Auth-module: SSR: Logged-in user redirected to login page when refreshing secure page

[makurtu]

Version

v4.5.1

Reproduction link

https://codesandbox.io/s/github/nuxt-community/auth-module/tree/master/

Steps to reproduce

Well, this bug is highly related to this GitHub issue #55 .

I'm simply cloning this whole repo to my computer and run a yarn install and yarn dev into a terminal. Next, I'm going to http://localhost:3000 and all works fine, I can go to the secure page and, as expected, it redirects me to Login page. Next, when I'm logged in, I can access the secure page. Ok, now, if I press the F5 button to reload the page, it throws the bug. I'm redirected to the login page, but at the same time (well, some milliseconds after it) it displays my name at the navbar. Looking in the console there is two vue-warnings:

But wait, if I run the live example on herokuapp (https://nuxt-auth.herokuapp.com/) it works as expected, if i press F5 it keeps me on secure page and no warnings are displayed.

What is expected ?

When pressing F5 key (to reload the page) on secured page, no redirecting to login page.

What is actually happening?

When pressing F5 key (to reload the page) on secured page, it takes me to login page.

Additional comments?

Software I'm using:

• OS: Ubuntu 16.04 LTS
• Node: v10.12.0
• Yarn: 1.10.1
• Browsers: Chrome and Firefox, the bug exists in both browsers, and the live example works as expected in the two browsers.

P.S.1: I've cleaned the cache and all aplication data in Chrome, because this bug was firstly discovered in a project that I'm developing.
P.S.2: No bug was observed in my home laptop. It's very very strange.

_{This bug report is available on Nuxt community (#c216)}

[sfgn]

I have the same issue when running using SSR, but on SPA it does not happen.

[makurtu]

Yes, I forget to say it, I'm in SSR mode too.

[asmodeus74]

I have the same issue, with page refresh user comes back even though I'm logged out

[drewjbartlett]

Same issue

[cliqer]

me too, just bumped into this.
Do you guys happen to use nuxt-i18n?
I have set up i18n as a multidomain (domain.com, eu, fr ...) and the redirection works on all other domains but the main one when refreshing the page.
Maybe something is still being cached somewhere in the browser but can't figure out what is happening exactly.

[sebas7dk]

Same issue, but it only happens when I dockerize nuxt, on local it works as expected. Whenever you refresh the page on a authenticated page it will redirect you to the login page. It's very hard to reproduce and only happens when you build nuxt.

I run nuxt in ssr mode and the api is another docker container and the calls are done over https. I also use Cloudflare.

[cliqer]

It seems this error has to do with self-signed certificates.
It has been solved in the dev branch:
"@nuxtjs/auth": "git://github.com/nuxt-community/auth-module.git#dev"

[makurtu]

@gianniskarmas Unfortunately your solution doesen't work for me :pensive:

I have to say that in my project I have "the Nuxt part" and "the Express API part", so it's not the same server where I make the auth.

The issue appears until I click the Clear site data in Chrome Dev tools, even I clean Local storage, Session storage and so on, it throws me the error on console, only when I click the Clear site data it doesn't throws it.

[sebas7dk]

Guys, I figured out what is happening on my part, maybe it can help someone else.

Correct me if I'm wrong, the auth module uses axios to fetch the user once logged in. So if you refresh the page, it will try to fetch the user, if that fails you will be redirected to the login page. What happened in my case is that on server side rendering the axios base url is not defined. Although in my nuxt config it's defined and working as expected. I added the API_URL environment variable and now it registers correctly. So test your api responses and your axios configuration.

Cloudflare was giving me Error 1000: DNS points to prohibited IP error so I disabled the proxy and now it's working as expected.

The main problem is that you will be logged out if the fetch user function fails, but there should be some log message displaying what happened. It's really hard to debug because it can depend on so many factors.

[ngcammayo]

Thanks @gianniskarmas. Resolved when actually generating a valid cert not self-singed.

[digitalmagnets]

I have had this problem too on 4.5.3. I'm not using a self signed cert and I have the axios url defined.

A workaround I have done is:

1. Turn off all auth redirects
2. Modify my default layout with a v-if, so if the user is not logged in, they will see a login component.

Then after they login, they will see the page on the URL they tried to access, no redirecting necessary.

I'm relieved to have found this workaround, as I couldn't get anything else to work and it seems simple. Although I am getting the hydration error, which I will have to look into but can live with.

[allenhark]

The problem seems to be with cloudflare generated ssl certificates. I fixed by using letsencrypt.

Sample Code

[kiwicopple]

Thanks @sebas7dk - I had forgotten to set this in one of my server instances. Solved by setting the following 2 environment variables:

API_URL=https://example.com
API_URL_BROWSER=https://example.com

[stevepop]

@sebas7dk @kiwicopple I have a similar setup although in my case, I have a separate container running node-express for my API in my local environment. When I reload my page, I can see that the endpoint is being requested and the user being returned but I don't know why the server keeps redirecting me to login. This works when I switch to spa but this application needs to be SSR. See my page and console when I reload the page after logging in. See screenshot below;

I am really open to ideas to help resolve this issue. Thanks!

[drewjbartlett]

If it's useful for anyone, I accidentally had my API_URL set to http://api.foo.com instead of https://api.foo.com. Moving it to https was the fix I needed. Simple oversight!

[stevepop]

@drewjbartlett My case has nothing to do with https though. Can someone actually explain what the problem is here? Why should Nuxt server side not have access to the user even when the API responds with a valid token and user data when the page is reloaded?

[hasanmumin]

I have the same issue on localhost. How can I fix ?

[samturrell]

Issue for me too. isLoggedIn isn't returning true on server side, so getting SSR errors when loading pages when logged in.

Weirdly this only happens when you close the browser down fully and then navigate back to a page with an authenticated state.

Additional reloads or navigations don't suffer from the issue.

[MathiasCiarlo]

I just solved this by removing an x-forwarded-for header that was added to the userinfo request (used in oauth2) by my load balancer/reverse proxy. I was on VPN, and it appeared to make my public IP different than what was shown in the x-forwarded-for header. The calls were then rejected by the auth provider (Keycloak). Try it out with a clean instance of axios, if you suspect header issues. (Replace the axios instance with a fresh one in the fetchUser method defined in schemes/oauth2.js

[er1x]

For me, setting the API_URL fixed it. But keep in mind that API_URL may not be the same in server and client sides.

In my case I noticed that on the first request nuxt was throwing me a 302 to /login page. But, on client side, I could see that user request was sent and user came back correctly.

So I set my public host API_URL for the nuxt build command, and API_URL=http://localhost:XXXX for npm start. Hope this helps.

[art0s]

Same issue.
When I start nuxt app with auth module in docker (local strategy) - through "yarn run dev" and
"yarn run build && yarn run start".
On local it works as expected.
auth-module v.4.5.3

[MathiasCiarlo]

@art0s do you get an error? And is your identity provider running on localhost in docker as well? I experienced the same, where the the userinfo calls did not hit the identity provider. The problem for me was that the docker network was set up incorrectly.

[art0s]

do you get an error?

No

And is your identity provider running on localhost in docker as well?

Yes, but I changed hostname in hosts file and in baseURL of axios's option
Also, I tried proxy option of axios

I experienced the same, where the the userinfo calls did not hit the identity provider.

When nuxt in the docker "fetchUserOnce" function called on refresh on secure page,
but on browser (that is wrong).
In local - it called from server and works as expected

The problem for me was that the docker network was set up incorrectly.

May be you're right, but I removed "x-" headers in nginx as you advised - got same problem.

I solved this problem by disabling local strategy in a auth-module, I made this strategy myself.

[art0s]

The problem for me was that the docker network was set up incorrectly.

you was right, resolved problem, issue was in my local DNS server
after fixed it - module is working as expected.

now all strategies working fine.

[russellsean]

I'm still being redirected to the login route on page load even though state says I'm logged in.

Here's the kicker: it only happens on https. The first response is a 302 redirect.

[ehigiepaul]

Hi Guy,
Here is a solution for this issue.

Goto
_nuxt.config.js > auth> strategies>local>endpoints_

then set the user object to
user: { url: '/api/customers/me', method: "GET", propertyName: false }
this works on Universal mode.

to handle redirect
Goto
_nuxt.config.js > auth> redirect_

then set all the redirects
redirect: { login: '/login', logout: '/login', callback: '/login', home: '/home' },

also add this to make authentication work
router: { middleware: ['auth'], }

at the end you should have something like this in your nuxt.config.js
```
export default {
....
auth: {
redirect: {
login: '/login',
logout: '/login',
callback: '/login',
home: '/home'
},
strategies: {
local: {
endpoints: {
login: { url: '/api/customers/login', method: "POST", propertyName: 'id' },
logout: { url: '/api/customers/logout', method: "POST" },
reset: { url: '/api/customers/reset', method: "POST" },
user: { url: '/api/customers/me', method: "GET", propertyName: false }
},
tokenType: false
}
},
...
router: {
middleware: ['auth']
}
}

```

[Lucky3337]

Hi guys. Have everyone been fixed this issue?

[localhost5001]

Facing with this issue, it's really hard to understand. Any updates?

[sts-ryan-holton]

Same issue here!

[stevenraines]

I solved this by making sure the BASE_URL is included in the paths to my API endpoints for authentication.

login: {
url: ${process.env.BASE_URL}/api/auth/local,
method: 'post',
propertyName: 'token'
},
logout: {
url: ${process.env.BASE_URL}/api/auth/logout,
method: 'post'
},
user: {
url: ${process.env.BASE_URL}/api/users/me,
method: 'get',
propertyName: ''
}

Without the base URL in place, the server side can't call the URL. In my case, I set-up a Proxy for /api/ to call to an API_URL set-up for my backend.

[hhanh00]

In case someone else still has this issue, I spent some time debugging this. Turns out it is a combination of several things. When using SSR, the server receives the request from the browser with the credentials (as cookies I believe) and renders the page. If the page requires authentication, @nuxt/auth will fetch the user and redirect to /login if it authentication fails.

To do this, it uses ctx.$axios which is injected by the axios plugin

The baseURL is set as such:

  const baseURL = process.browser
      ? '<%= options.browserBaseURL || '' %>'
      : (process.env._AXIOS_BASE_URL_ || '<%= options.baseURL || '' %>')

From the browser, you have no issue. But from the server, it will use _AXIOS_BASE_URL_ which is either computed from HOST, PORT (and some variants of them) or set by API_URL. The code is in module.js

By default, this will resolve to http://localhost:3000. So it could work if you are running the server at this endpoint.

In my case, I unfortunately had HOST defined as my external FQDN and the request would fail since port 3000 is not exposed to the internet.

TLDR

• Check that you haven't touched HOST, PORT, or added config options to axios that would make the request fail from the server,
• If everything seems ok, check the debug log baseURL from nuxt:axios

[ohidere]

• [ ]

In case someone else still has this issue, I spent some time debugging this. Turns out it is a combination of several things. When using SSR, the server receives the request from the browser with the credentials (as cookies I believe) and renders the page. If the page requires authentication, @nuxt/auth will fetch the user and redirect to /login if it authentication fails.

To do this, it uses ctx.$axios which is injected by the axios plugin

The baseURL is set as such:

  const baseURL = process.browser
      ? '<%= options.browserBaseURL || '' %>'
      : (process.env._AXIOS_BASE_URL_ || '<%= options.baseURL || '' %>')

From the browser, you have no issue. But from the server, it will use _AXIOS_BASE_URL_ which is either computed from HOST, PORT (and some variants of them) or set by API_URL. The code is in module.js

By default, this will resolve to http://localhost:3000. So it could work if you are running the server at this endpoint.

In my case, I unfortunately had HOST defined as my external FQDN and the request would fail since port 3000 is not exposed to the internet.

TLDR

• Check that you haven't touched HOST, PORT, or added config options to axios that would make the request fail from the server,
• If everything seems ok, check the debug log baseURL from nuxt:axios

Hi there.
I'm facing the same issues and I've been looking around everywhere for this baseURL setting. Aside from my nuxt.config.js file, I can't seem to find this property.

Could you please tell me where you found the setting?

[hhanh00]

https://axios.nuxtjs.org/options.html#baseurl

[localhost5001]

The problem could appear if you define API_URL in .env file.

[vivekkairi]

Workaround:

So I had base url set to '/api' and all secured pages were getting redirected through 302.

Changed baseUrl to complete site url with https and it worked.
axios: { baseURL: 'https://mdsaban/api' }

[debagger]

Hello! I also ran into a similar issue. I found that if the propertyName property is not specified in the configuration for the "user" endpoint, the library equates it to the propertyName: "user" from the default settings. If server returns user as root object then put any false value to user endpoint propertyName:

          user: {
            url: '/api/users/me',
            method: 'get',
            propertyName: null //IMPORTANT
          }

This fix bug for me.

Here is screenshot from debugging when no any user.propertyName setted:

[honarmandpooria]

Issue for me too. isLoggedIn isn't returning true on server side, so getting SSR errors when loading pages when logged in.

Weirdly this only happens when you close the browser down fully and then navigate back to a page with an authenticated state.

Additional reloads or navigations don't suffer from the issue.

did you solve it?

[oluomotoso]

If you are using Laravel passport, just add the nuxt dashboard domain accessing the laravel api to your routes/api.php .

I wrote about it here

[evd3v]

Had the same issue, in my case the problem was in the server network settings.

I have the API, URL with domain name https://api.com (for example). But the server was in the same local network, where the nuxt app was. And when I'd tried to make request as curl -X GET https://api.com - it throw me the error curl: (7) Failed to connect to https://api.com : Connection refused, but when I sent the same request from my local machine, or from another server - it was work well. And when requests were sent by SSR, it throw the same error, I think. So, in this moment authentification fails.

After, we fixed the local network settings and all works as expected. May be it helps somebody.

[bmulholland]

Looks like the issue here is that, when using SSR and the fetch user request on page hydration fails for any reason, the user is redirected to login page. Is that correct? Has anyone encountered this issue in other scenarios?

If so, then the root cause is likely some combination of other things, hence the varying solutions posted here to unrelated issues. Obviously server network configuration is out of scope for the auth module 😄 . What we should do, however, is provide some clarity about what the root cause is to help you move on to the real culprit in your debugging.

I don't use SSR myself and am unfamiliar with debugging approaches. What's the standard way of debugging, logging, and/or raising errors during SSR hydration?

[kgnfth]

For me the issue using docker, i had a typo in my env API_URL

[silencechow]

I cloned the middleware auth from runtime.js and used it as a custom-auth middleware.
And I got the error Cannot set property 'Access-Control-Allow-Origin' of undefined in SSR mode.
Then the application will be redirected to login page.

@nuxt/server: 2.15.1
@nuxtjs/auth-next: 5.0.0-1613647907.37b1156 (Latest Version)
@nuxtjs/axios: 5.13.1

[kamilcglr]

Hello I have a similar problem I do not know if it is related.

In development everything works perfectly but on the production server, when I refresh the page while the user is authenticated I have a timeout of 20 seconds before being redirected to /login.

I am in SSR with a nginx reverse proxy. Can this be the cause?

[kamilcglr]

Hello I have a similar problem I do not know if it is related.

In development everything works perfectly but on the production server, when I refresh the page while the user is authenticated I have a timeout of 20 seconds before being redirected to /login.

I am in SSR with a nginx reverse proxy. Can this be the cause?

I finally solved my problem it was related to the proxy.

```
axios: {
proxy: true,
credentials: true,
},

proxy: {
'/api/': 'http://localhost:3000',
},
```