Auth-module: bug on reload home page

[venturion]

When you reload the home page (after authentication), the route goes to login page and forward to home page. the problem is that login layout not changes and the home page stay with it, in the console i have warning:

VM2698:34 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

_{This bug report is available on Nuxt.js community (#c41)}

[breakingrobot]

@venturion

Could you give us more details and code to reproduce your issue, thanks.

[venturion]

@breakingrobot

i'm already authenticated inside homepage, but when i press F5 the page first goes to login page and after this go to home page, but the layout stay the login layout, as you can see in the vue console

i have different layouts for login page and for home page, the problem is with the persistence after reload the home page

[fanckush]

What do you have in nuxt config for auth -> redirect ?

[venturion]

@fanckush

that's my config for redirect

redirect: { login: '/entrar', home: '/' },

[fanckush]

I think in a way this is related to this issue: https://github.com/nuxt-community/auth-module/issues/54
I am as lost as you are but i remember getting a similar warning when calling auth.redirect() in a component before it is loaded in the client side (in fetch() for example)

I cant wrap my head around what is happening but hopefully this helps..

[venturion]

@fanckush

my case is a little bit different, i'm using global auth middleware

[fanckush]

It is indeed different but in the other case i am also using auth middleware globally as well

[venturion]

i'm monitoring
store.state.auth.loggedIn
inside a middleware
when i reload the home page
even authenticated it's returning false

[venturion]

i can't access store values from middleware?
how can't i get the authentication state from from middleware?

[venturion]

@breakingrobot

any temporary solution to this bug?

[DougHayward]

You never provided any code to reproduce, so how can we help?

[breakingrobot]

@venturion

I use my personal project and the kitchensink examples to try to reproduce errors and detect issues.

I was unable to reproduce it with our current code base and that's why I asked for a code reproduction in the first place, so please mention :

• Which operating system are you using ?
• Which version of auth-module are you using ?
• How did you manage to get this error ? (code reproduction)
• How did you run your application ? (SSR / SPA / ...)
• Which Nuxt variant are you using ? (Vanilla, using class-component through Babel, using Typescript ?)

These details matters for us to analyse, reproduce then fix the error.

[venturion]

@breakingrobot

Which operating system are you using ?
windows 10

Which version of auth-module are you using ?
4.0.0-rc.3

How did you manage to get this error ? (code reproduction)
aparently all seems to be ok except when i reload the homepage after do the autentication, the login dont persists, and its return to the login page

How did you run your application ? (SSR / SPA / ...)
ssr

Which Nuxt variant are you using ? (Vanilla, using class-component through Babel, using Typescript ?)
babel

[fanckush]

@venturion

when i reload the home page
even authenticated it's returning false

Maybe it is related to this in way? https://github.com/nuxt-community/auth-module/issues/53

[breakingrobot]

@venturion

Related to #58 - please verify your propertyName

[venturion]

@breakingrobot

its seems to be a redirect error, redirect not changes the layout from login to home page!

[breakingrobot]

@venturion

It does not redirect because of your store.state.auth.loggedIn which is not set, please, verify if your propertyName on user is valid, or set it to false to test, then report the results here.

I'm still waiting on a code repro..

[nahue]

im guessing you are not preserving your vuex store through refreshes, im trying to do the same hehe

[venturion]

my nuxt.config.js settings

{ modules: [ "@nuxtjs/auth", "@nuxtjs/axios", "@nuxtjs/dotenv", "@nuxtjs/router" ], auth: { endpoints: { login: { url: "/user/auth/login", method: "post", propertyName: "access_token" }, logout: { url: "/user/auth/logout", method: "get" }, user: { url: "/user/auth/data", method: "get", propertyName: "user" } }, redirect: { login: "/entrar", logout: "/entrar", home: "/" } } }

my login page has a differente layout from the home page

[breakingrobot]

@venturion Why did you close this, have you found a solution ?

[venturion]

@breakingrobot nobody answer this question

[breakingrobot]

@venturion

There are similar issues to your own and others issues that are still unresolved, we are putting our best effort into fixing bugs and implementing new features and ideas on auth-module.

Meanwhile, I asked for code reproduction several times (here - here) and at this time, we have no code reproduction to at least reproduce your specific problem while in similar issues like #58, #54 or #53, we have some clues and code reproduction about this issue.

Your nuxt.config.js is not enough, I also asked you to check your propertyName and had no response what so ever about it.

I am not trying to be mean in anyway, but you have to understand that we cannot work or help you on this issue if you are not being specific and cooperative.

We don't know what kind of API you are using and how are you handling your requests and your states, because we have no information at all about your code and have no clue on how to reproduce it.

I sincerely hope you understand.

[borodyadka]

@venturion
I'm facing the same problem, but fixed it. In my case it was not porblem with auth-module itself. On the server-side, nuxt was unable to make requests to auth service and fetch user data. So nuxt server "thinks" user is not authorized, then on client-side browser redirects user to login page, sends request to endpoints.user (with credentials stored in browser), receiving user data and redirects user back.

Make sure your nuxt server can get data from auth service.

[breakingrobot]

Related issues are fixed on 4.0, please check your API responses too 👍

[steklopod]

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.

[vadymsem]

@venturion Today I faced exactly with the same issues. At least I got the same behaviour. In my case mismatching client-side virtual DOM and server-side was related to using component.
So, the main point I was broking my mind it why the system logs me out each time once I reload the window? It happens only on production. Once I run it on localhost it works. I spent some time to notice that I got auth.token set to false each time after reloading. But it should be bearer token. Setting same-site cookies options helps me. Nuxt auth module also provide a way to configure it by the next way:

nuxt.config.js

auth: {
 cookie: {
   options: {
      sameSite: 'lax',
   }
 }

More about SameSite cookies you can read here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite

Hope my answer will help someone.