Redirect to login page after page reload in "refresh" provider

[devknight216]

Environment

OS: Windows 11 Browser: Chrome(the only one I work)

Reproduction

My nuxt.config.ts configuration

auth: {
    baseURL: process.env.NUXT_PUBLIC_AUTH_URL,
    provider: {
      type: 'refresh',
      pages: {
        login: '/login'
      },
      endpoints: {
        signIn: {
          path: '/login',
          method: 'post',
        },
        signOut: {
          path: '/logout',
          method: 'post',
        },
        signUp: {
          path: '/register',
          method: 'post',
        },
        getSession: {
          path: '/session',
          method: 'get',
        },
        refresh: {
          path: '/refresh',
          method: 'post',
        }
      },
      token: { signInResponseTokenPointer: '/access_token' },
      refreshToken: { signInResponseRefreshTokenPointer: '/refresh_token' },
    },
  },

Describe the bug

It works well unless I reload the page. But after reloading the page at some point after successful login, it redirects to the login page. I analyzed the localstorage, sessionstorage, cookies of dev tools in the browser, but I couldn't find accessstoken saved in any of those areas. I only found refreshToken saved in the cookies. As far as I know, accessToken should be saved somewhere in the browser to put to the header with axios intercepter. As auth works fine unless reload page and it's not working after page reload, I assume it may be saved to memory. I couldn't find it in other areas as I stated. If my guess is wrong, please let me know where I can find accessToken after login and how to fix this issue.

Additional context

No response

Logs

No response

[dimitrileduc]

Hello, are there any updates on this? I'm experiencing the same issue. It works fine with 'local' type, but doesn't work with 'type: 'refresh''. It seems there is no access token stored.

[github-actions[bot]]

Hello 👋

Please provide a reproduction for this issue 🙏

How can I create a reproduction?

Please use one of the following links to reproduce your issue.

• https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
• https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

Please ensure that the reproduction is as minimal as possible. This will allow us to isolate the issue as best as possible.

Here are some more amazing posts about the importance of reproductions:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[phoenix-ru]

Investigation by the community would be highly appreciated, as the team is currently focused on merging long-awaited PRs and preparing for 0.8

[skmd87]

this issue occured to me, make sure you have both signInResponseRefreshTokenPointer & refreshRequestTokenPointer in refreshToken object: refreshToken: { signInResponseRefreshTokenPointer: '/refreshToken', refreshRequestTokenPointer: '/refreshToken', cookieName: 'auth.refreshToken', maxAgeInSeconds: 1000 * 60 * 60 * 24, },

[dev-davexoyinbo]

You can consider using this npm package https://www.npmjs.com/package/@workmate/nuxt-auth

[despatates]

I was facing the same issue using the refresh provider.
The access token was not saved in its cookie after a successful login, only the refresh token was saved. But both of the tokens are saved in the app state at login, so authentication data are available with useAuthState() until the page is refreshed.

I found the solution here: https://github.com/sidebase/nuxt-auth/issues/759#issuecomment-2138291544

The baseUrl set in my nuxt.config.js differs from my frontend domain. So I had to set the option sameSiteAttribute to "strict", and the access token is finally saved in a cookie!

My final nuxt.config.js:

auth: {
    baseURL: 'https://xxxxxxxxxx.cleverapps.io/',
    provider: {
      type: 'refresh',
      endpoints: {
        signIn: { path: 'accounts/signin', method: 'post' },
        signOut: { path: 'accounts/logout', method: 'post' },
        signUp: { path: 'accounts/signup', method: 'post' },
        getSession: { path: '/user-profile', method: 'get' },
        refresh: { path: 'accounts/refresh', method: 'post' },
      },
      token: {
        sameSiteAttribute: 'strict', // <-- with this it works!
        signInResponseTokenPointer: '/access_token',
      },
      refreshOnlyToken: false,
      refreshToken: {
        // no `sameSiteAttribute` here
        signInResponseRefreshTokenPointer: '/refresh_token',
        refreshRequestTokenPointer: '/refresh_token',
      },
    },
  },

Setting this option also enabled session auto-load when refreshing the page, using the endpoints.getSession endpoint.

[bneumann97]

For me, I missed setting the correct refreshRequestTokenPointer value. It's now also working on page reload

[zoey-kaiser]

Closed in favour of #754