Auth-module: Nuxt Auth middleware redirect seems to fires before the store is initialized

[meltinbit]

Hi, I implemented a local strategy with @nuxt/auth and laravel sanctum as backend using the cookie instead of the token.
Everything seems to work great, but after I log in i am correctly redirected to the home / but if i reload the page the middleware: 'auth' redirects me to the login even if the $auth storage state: isLogged and user are correctly populated. It seems then that the redirects applies before the state is re-initialized after the page reload. Is this possible?

[Altyon]

Did you run your app inside a docker container and in ssr mode ?
Because i have the exact same problem : the app works well by launching it on my localhost, auth too, with redirection etc.
But as soon as I launch it from docker, I can access and navigate without problem, as well as log, but when reloading the page, I am redirected to / login even if there is my token in the localStorage and cookies.

[meltinbit]

I am not using docker, but if i just switch from SSR to SPA it works well...so the problem seems to be in SSR mode

[IsidroMar95]

i'm facing exactly the same issue if i just switch from SSR to SPA it works as expected... but i need the app to be a SSR.

[Altyon]

Can nuxt reach the host which provides your token ?
Like domain.com/api or api.domain.com.
Try to make a request to your api from server side (in nuxtServerInit for example).
Check also if base_url is correctly set server side, else it will fail and redirect you to login.

[IsidroMar95]

the login and register request are fine so nuxt reach the host, and Laravel return the cookies instead token... how can i check if the base_url is correctly server side?

```js
router: {
middleware: ['auth']
},
auth: {
strategies: {
local: {
endpoints: {
login: { url: 'api/auth/login', method: 'post' },
logout: { url: 'api/auth/logout', method: 'post' },
user: { url: 'api/user', method: 'get', propertyName: 'user' }
},
tokenRequired: false,
tokenType: false,
}
},
redirect: {
home: '/admin',
login: '/',
logout: '/',
},
},

```

[Altyon]

You can check inside any server side function (like nuxtServerInit in your store/index.js). You can console.log from the context (output will be server side too, in your terminal where you run yarn/npm run dev)
_In you example config, you redirect to /admin, are you sure you really need SSR in your backoffice ?
SSR is mainly for SEO, if you don't need your app to be crawled (like a protected area, robots cannot access it), maybe you should go for spa_

[Icon003]

Hi, I implemented a local strategy with @nuxt/auth and laravel sanctum as backend using the cookie instead of the token.
Everything seems to work great, but after I log in i am correctly redirected to the home / but if i reload the page the middleware: 'auth' redirects me to the login even if the $auth storage state: isLogged and user are correctly populated. It seems then that the redirects applies before the state is re-initialized after the page reload. Is this possible?

Good day, it seems I have the same problem, when I update some pages, I am transferred to the username and then redirect to the main page. And I can't understand the logic in this, for example, on the page with the address /user-page throws, but on others there is no . But on an address with triple nesting (blog/user_id/article_id), it always switches to the username.

Can you find a way to avoid this behavior?

[pepeloper]

We had the same problem and used this workaround on created hook in our login page 👍

created() {
  if (this.$auth.user) {
    this.$router.push({ name: 'index' })
  }
}

[Phifo]

Same issue here. Meanwhile, the @pepeloper workaround works for me.

[kevinzie]

same problem. I just use this on auth plugins and called asyncdata on secret page.

$axios.get('auth/user').then((resp) => {
            $auth.setUser(resp.data)
        }).catch((err) => {
            $auth.setUser()
        });

secretpage

async asyncData({store, redirect}) {
            await store.dispatch('GET_SEO', {type: 'page', id: 'seo_dashboard'});
            if (!store.state.auth.loggedIn) {
                redirect('/login')
            }
        },

but need to call user data everytime. :(

[1070rik]

Seems like nxut auth it getting a 401 from Laravel even though all the headers and cookies seem to be fine. So it might also be related to Laravel Sanctum?

[bpeab]

Same here.

Also, I initially implemented the auth process (getToken, revokeToken, refreshToken) without auth-module and switched to auth-module after having this issue without it. Now that I have fully implemented the same process but with auth-module, I am facing the exact same problem.

Note that in my case, I use the local scheme and it's not related to Laravel which I don't use.

[seeARMS]

For SSR, I'm also having this problem. NodeJS backend.

Looks like this line is the problem: https://github.com/nuxt-community/auth-module/blob/dev/src/schemes/cookie.ts#L27

I'm getting the following exception thrown:

 error: TypeError: Cannot read property 'headers' of undefined
      at CookieScheme.mounted (server.js:4199:28)
      at Auth.mounted (server.js:3370:46)
      at Auth.init (server.js:3316:24)
      at server.js:397:16
      at createApp (server.js:1374:85)
      at async module.exports../.nuxt/server.js.__webpack_exports__.default (server.js:1782:7)

[antony989]

me too I'm using nuxt ssr with Python Backend. (local schema)

[SamGeens]

Try enabling axios https, it might fix the problem:

axios: { https: true, },

[nomikz]

I have this exact same problem. I don't know how to fix this issue. It is pity. Nuxt can't fix this issue.

[thefoxie]

We had the same problem and used this workaround on created hook in our login page +1

created() {
  if (this.$auth.user) {
    this.$router.push({ name: 'index' })
  }
}

This works partially as we don't have information on what was the previous route. I guess it could be overridden via custom middleware but that doesn't solve the issue as it's just wrong init order. I will take a look into this and possibly fix it.