Mismatching client-side rendered virtual DOM and server-side rendered content only in dev mode cookie-based flow

[Whiled0S]

Version

v4.8.4

Reproduction link

https://github.com/nuxt-community/auth-module

Steps to reproduce

1. Follow this guide for cookie-based flow: https://auth.nuxtjs.org/schemes/local.html#options
2. Configure your nuxt.config.js like in comment below
3. Run nuxt application in dev mode (via npm run dev for example)
4. Login on login page
5. Open network tab in developer tools
6. Go to home page where menu or any other element renders only if user logged in
7. See that this element renders first time for not authenticated user
8. Nuxt auth making a request for check if user authenticated (why? Cookie was available from server side before response from server and it was enough for checking authenticate route before render the page)
9. When response is ready – nuxt auth set loggedIn variable to true and re-render element
10. I have errors in console and invalid application

What is expected ?

Nuxt auth module will make a request ON SERVER SIDE and BEFORE RENDER CONTENT set variable loggenIn to appropriate value.

What is actually happening?

Nuxt auth module makes authentication request on client side and re-renders page, it leads to problems with ssr.

Additional comments?

I don't know why, but when I build application and deploy it to production – everything works fine and I don't see any client-side requests, but only in dev mode on my laptop (osx) I have this annoying trouble – it makes my development painful. I also want to provide my project stack and difference between production machine and local. Project stack – symfony as backend api and nuxt as frontend. Symfony and database are working in docker and it's too slow (popular issue on macOS – https://github.com/docker/for-mac/issues/2707). On my production machine I'm using ubuntu, symfony and database are working without docker.

My nuxt config for auth module:

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/userapi/authenticate',
            method: 'post'
          },
          user: {
            url: '/userapi/authenticated_user',
            method: 'get',
            propertyName: 'email'
          },
          logout: {
            url: '/userapi/logout',
            method: 'delete'
          }
        },
        tokenRequired: false,
        tokenType: false
      }
    },
    watchLoggedIn: false,
    redirect: false
  },

Request that is sent on initial loading (reload page, already has valid cookie for authentication):

Errors which I have in console:

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

[Whiled0S]

I solved this by adding baseUrl property to my axios configuration. By default axios, which used in auth module, makes user request by url localhost:3000, because nuxt in dev mode uses port 3000. In my case I used nginx proxy in dev mode for userapi route, but my nginx listens port 3030. From client side it was OK because it was relative path, but from server side it wasn't and user request was sent to wrong endpoint.

[lordjoo]

I'm facing this issue but my api endponts are working perfectly The always showen when using v-if with $auth.user

[jonalxh]

Same issue here, when user is logged and tries to open a new tab, the error logs are shown in company of DOM errors, if I logout the user it works as expected.

[haexhub]

any news on this topic? facing the same problem. If I use a conditional render based on the status of a user, I run into the mismatch warning.