Bug on reload secure page

mateullull
0
mateullull
commented 10 months ago

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:

Captura_2018-10-16_09-08-31.png

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.

bug
0
sfgn
0
sfgn
commented 10 months ago

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

0
mateullull
0
mateullull
commented 10 months ago

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

0
asmodeus74
0
asmodeus74
commented 10 months ago

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

0
drewjbartlett
0
drewjbartlett
commented 10 months ago

Same issue

0
gianniskarmas
0
gianniskarmas
commented 10 months ago

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.

0
sebas7dk
0
sebas7dk
commented 10 months ago

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.

0
gianniskarmas
0
gianniskarmas
commented 10 months ago

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"

0
mateullull
0
mateullull
commented 10 months ago

@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.

0
sebas7dk
0
sebas7dk
commented 10 months ago

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.

0
ngcammayo
0
ngcammayo
commented 10 months ago

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

0
digitalmagnets
0
digitalmagnets
commented 8 months ago

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.

0
allenhark
0
allenhark
commented 8 months ago

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

Sample Code

0
kiwicopple
0
kiwicopple
commented 8 months ago

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
0
stevepop
10
stevepop
commented 7 months ago

@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;
ssr_console_error

console_error

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

0
drewjbartlett
0
drewjbartlett
commented 7 months ago

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!

0
stevepop
10
stevepop
commented 7 months ago

@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?

0
hasanmumin
0
hasanmumin
commented 6 months ago

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

0
samturrell
11
samturrell
commented 4 months ago

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.

0
MathiasCiarlo
0
MathiasCiarlo
commented 4 months ago

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

0
er1x
0
er1x
commented 4 months ago

For me, setting the APIURL fixed it. But keep in mind that APIURL 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 APIURL for the nuxt build command, and APIURL=http://localhost:XXXX for npm start. Hope this helps.

0
art0s
0
art0s
commented 4 months ago

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

0
MathiasCiarlo
0
MathiasCiarlo
commented 4 months ago

@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.

0
art0s
0
art0s
commented 4 months ago

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.

0
art0s
0
art0s
commented 3 months ago

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.

0
russellsean
0
russellsean
commented 2 months ago

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.

0
ehigiepaul
0
ehigiepaul
commented 2 months ago

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']
  }
  }
0
steklopod
0
steklopod
commented 5 days ago

Have the same problem. Nothing helps, guys :-(

0
steklopod
0
steklopod
commented 4 days ago

My problem was using:

  $axios.defaults.baseURL = process.env.DOCKER_HOST_WINDOWS || process.env.DOCKER_HOST;

instead of

  $axios.defaults.baseURL = process.env.DOCKER_HOST || process.env.DOCKER_HOST_WINDOWS ;

Looks like a stupid bug of axios, not auth module.

0
Informations
Bug Report โ€ข Open
#c216 - Created 10 months ago