Local strategy refresh token API call causes 401

[AnteDelic]

Environment

• Operating System: Darwin
• Node Version: v20.19.0
• Nuxt Version: 3.18.1
• CLI Version: 3.28.0
• Nitro Version: 2.12.5
• Package Manager: yarn@1.22.19
• Builder: -
• User Config: compatibilityDate, devtools, components, typescript, css, plugins, runtimeConfig, router, modules, icon, i18n, site, sitemap, robots, app, sentry, sourcemap, auth, floatingVue, security
• Runtime Modules: @nuxtjs/i18n@10.0.6, @nuxtjs/robots@5.5.0, @sidebase/nuxt-auth@1.0.2, @nuxt/icon@1.15.0, @nuxtjs/sitemap@7.4.3, @sentry/nuxt/module@10.8.0, nuxt-security@2.4.0, floating-vue/nuxt@5.2.2
• Build Modules: -

Reproduction

I am unsure as to how to exactly reproduce the issue at this point.

Describe the bug

We occasionally get a 401 on the refresh token API call, seemingly due to the internal auth state value of rawToken and rawRefreshToken not matching the cookie state.

We have recently added a couple of bandaids, so to speak, to somewhat mitigate this issue:

1. Added a bit of JWT grace period on the backend side.
2. Added a plugin which syncs internal auth token values to the cookies so that the refresh token API call does not break when more than one tab of our website is open.
3. Added a manual sync between internal auth token values and cookies in certain places.

After all of those adjustments we still sometimes (I could have an entire session go by without problems) get the 401 on the refresh token.

We have local strategy set up with the following values:

auth: {
    isEnabled: true,
    globalAppMiddleware: true,
    disableServerSideAuth: false,
    originEnvKey: 'NUXT_AUTH_ORIGIN',
    provider: {
        type: 'local',
        endpoints: {
            signIn: { path: 'auth/login', method: 'post' },
            signOut: false,
            signUp: { path: 'auth/register', method: 'post' },
            getSession: { path: 'me', method: 'get' },
        },
        token: {
            signInResponseTokenPointer: '/data/token',
            type: 'Bearer',
            cookieName: 'auth._token.laravelJWT',
            headerName: 'Authorization',
            maxAgeInSeconds: 60 * 60, // same as backend's ttl but in seconds
            sameSiteAttribute: 'lax',
        },
        refresh: {
            isEnabled: true,
            endpoint: { path: 'auth/refresh', method: 'post' },
            refreshOnlyToken: false,
            token: {
                refreshResponseTokenPointer: '/data/token',
                signInResponseRefreshTokenPointer: '/data/token',
                cookieName: 'auth._refresh_token.laravelJWT',
                maxAgeInSeconds: 20160 * 60, // same as backend's refresh_ttl but in seconds
                sameSiteAttribute: 'lax',
            },
        },
        pages: {
            login: '/?popup=login',
        },
        plugins: ['~/plugins/preferredCurrency.ts', '~/plugins/intercom.client.ts', '~/plugins/posthog.client.ts'],
    },
    sessionRefresh: {
        //TODO change periodic sync to 10 minutes after testing phase
        enablePeriodically: 2 * 60 * 1000, // 2 minutes
        enableOnWindowFocus: false,
    },
},

Additional context

Our backend uses a one token strategy (i.e. one token for both refresh and access).

We are switching from Nuxt 2 to Nuxt 3. Previously we have used "nuxt-basic-auth-module": "^1.4.1" which worked fine with our backend setup.

This issue is not tied to local env or my machine but rather a pretty consistent problem which happens in our staging environment to a lot of testers.

It is pretty suspicious to us that we have this many issues and can't find a lot of similar issues being reported here.