Version
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.
I have the same issue, with page refresh user comes back even though I'm logged out
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.
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.
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"
@gianniskarmas Unfortunately your solution doesen't work for me 😔
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.
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.
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:
- Turn off all auth redirects
- 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.
The problem seems to be with cloudflare generated ssl certificates. I fixed by using letsencrypt.
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
@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!
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!
@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?
I have the same issue when running using SSR, but on SPA it does not happen.