isLogged in may creates problem on SSR

[skoenfaelt]

After my long journey through the net i did not find a solution.

I setted up a refresh scheme. In my default.vue is set computed properties

computed: {
    isAuthenticated() {
      return this.$auth.loggedIn
    },
    user() {
      return this.$auth.user
    },
  },

I expect, if I sign in successfully, to use the isAuthenticated to show my Sidebar. If I sign in all works fine without errors. As I hit F5 to refresh the page, I got following error:

[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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

and

Cannot read property 'toLowerCase' of undefined

I dont have a clue, why the auth module resets the isLoggedIn and so on because initial after load isLoggedIn is false and gets true after load finish

Settings:

auth: {
    redirect: {
      login: '/de/sign-in',  // <<  should be more dynamic for i18n module
      logout: '/de/',
      home: '/de/',
    },
    strategies: {
      local: {
        scheme: 'refresh',
        token: {
          property: 'token',
          maxAge: 1800,
          type: 'Bearer',
        },
        refreshToken: {
          property: 'refreshToken',
          data: 'refreshToken',
          maxAge: 60 * 60 * 24 * 30,
        },
        user: {
          property: 'user',
        },
        endpoints: {
          login: { url: 'auth/sign-in', method: 'post' },
          refresh: { url: 'auth/refresh', method: 'post' },
          user: { url: 'auth/user', method: 'get' },
          logout: { url: 'auth/sign-out', method: 'post' },
        },
        autoLogout: true,
      },
    },
  },

[productdevbook]

your write custom axios settings ?

[skoenfaelt]

no I don't, I use the default settings which are described in the docs.

[skoenfaelt]

Obsolet