Auth-module: Refreshing the page brokes auth state

[sinnrrr]

Version

module: 5.0.0-1612791489.a5d8c28
nuxt: 2.14.12

Nuxt configuration

mode:

• [x] universal
• [ ] spa

Nuxt configuration

auth: {
    strategies: {
      redirect: false,
      local: {
        scheme: 'refresh',
        token: {
          property: 'data.accessToken',
          maxAge: 1800,
        },
        refreshToken: {
          property: 'data.refreshToken',
          data: 'refreshToken',
          maxAge: 60 * 60 * 24 * 30
        },
        user: {
          property: 'data',
        },
        endpoints: {
          login: { url: 'auth/login', method: 'post' },
          refresh: { url: 'auth/refresh', method: 'post' },
          user: { url: 'auth/user', method: 'get' },
          logout: { url: 'auth/logout', method: 'post' },
        },
      },
    },
  },

Reproduction

https://github.com/sinnrrr/loonify

What is expected?

Normal work after reload

What is actually happening?

After refresh it's just logging out and throws following error in console:
TypeError: Cannot read property 'toLowerCase' of undefined

After this, the whole SPA is broken. The nuxt links are just reloading page and not working properly and overall all navigation becomes broken

Steps to reproduce

cd packages/frontend
yarn
yarn dev

Checklist

• [x] I have tested with the latest Nuxt version and the issue still occurs
• [x] I have tested with the latest module version and the issue still occurs
• [ ] I have searched the issue tracker and this issue hasn't been reported yet

[derHodrig]

Same here

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

[nhanco]

we dont have solution for this ?

[sinnrrr]

we dont have solution for this ?

no, we don't
searched through the whole lot of issues

[nhanco]

Sometime that work sometime not.

[JoaoPedroAS51]

Hi @sinnrrr! I looked at your issue and it seems to be unrelated to auth module. I cloned your repo and reproduced it. The cause seems to be using v-if tag directly in b-navbar-dropdown component in your header. To solve the error simply wrap the component in a div (or other element) and use the v-if in this element. It may be good to do the same with the other components. I also recommend using $auth.loggedIn to check the logged in state instead of using $auth.user :)

Here is the component that causes the toLowerCase issue:

<b-navbar-dropdown v-if='$auth.user' label='Account'>
  <b-navbar-item
    tag='nuxt-link'
    :to="{ name: 'account-settings' }">
    Settings
  </b-navbar-item>

  <b-navbar-item @click.prevent='logout'>
    Logout
  </b-navbar-item>
</b-navbar-dropdown>

Then wrap it in a div with v-if

<div v-if='$auth.loggedIn'>
  <b-navbar-dropdown label='Account'>
    <b-navbar-item
      tag='nuxt-link'
      :to="{ name: 'account-settings' }">
      Settings
    </b-navbar-item>

    <b-navbar-item @click.prevent='logout'>
      Logout
    </b-navbar-item>
  </b-navbar-dropdown>
</div>