Excessive Refresh Token Requests in Nuxt Auth (sidebase)

[dickhorror]

Environment

• bun v1.2.5
• Operating System: Windows_NT
• Node Version: v22.14.0
• Nuxt Version: 3.16.0
• CLI Version: 3.23.0
• Nitro Version: 2.11.6
• Package Manager: bun@1.2.5
• Builder: -
• User Config: compatibilityDate, devtools, css, ssr, devServer, plugins, vite, typescript, modules, primevue, postcss, nitro, runtimeConfig, auth
• Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/icon@1.11.0, @nuxt/image@1.9.0, @nuxt/test-utils@3.17.2, @primevue/nuxt-module@4.3.2, @sidebase/nuxt-auth@0.10.1
• Build Modules: -

Reproduction

// https://nuxt.com/docs/api/configuration/nuxt-config
import Aura from '@primeuix/themes/aura'

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  css: ["@/assets/css/tailwind.css", "@/assets/css/main.css", "primeicons/primeicons.css"],

  ssr: false,
  devServer: { 
    host: process.env.NUXT_PUBLIC_TAURI_DEV_HOST || 'localhost'
  },

  plugins: [
  ],

  vite: {
    // Better support for Tauri CLI output
    clearScreen: false,
    // Enable environment variables
    // Additional environment variables can be found at
    // https://v2.tauri.app/reference/environment-variables/
    envPrefix: ['VITE_', 'TAURI_'],
    server: {
      // Tauri requires a consistent port
      strictPort: true,
    },
  },

  typescript: {
    tsConfig: {
      include: [
        'types/**/*',
        'composables/**/*'
      ],
      compilerOptions: {
        module: 'esnext',
      },
    },
  },

  modules: [
    '@nuxt/eslint',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/test-utils',
    "@primevue/nuxt-module",
    '@sidebase/nuxt-auth',
  ],

  primevue: {
    options: {
      theme: {
        preset: Aura
      }
    }
  },
  postcss: {
    plugins: {
      "postcss-import": {},
      '@tailwindcss/postcss': {},
      // tailwindcss: {},
      autoprefixer: {},
    },
  },

  nitro: {
    routeRules: {
      '/api/**': {
        proxy: {
          to: `${process.env.NUXT_PUBLIC_BASE_URL || 'http://localhost:8080'}/**`,
        },
      },
    },
  },

  runtimeConfig: {
    public: {
      baseUrl: '',
      origin: ''
    }
  },

  auth: {
    origin: process.env.NUXT_PUBLIC_ORIGIN,
    originEnvKey: 'NUXT_PUBLIC_ORIGIN',
    baseURL: process.env.NUXT_PUBLIC_BASE_URL,

    provider: {
      type: 'local',
      
      endpoints: {
        signIn: { 
          path: '/users/login', 
          method: 'post' 
        },
        signOut: { 
          path: '/users/logout', 
          method: 'post' 
        },
        getSession: { 
          path: '/users/profile', 
          method: 'get' 
        }
      },

      token: {
        signInResponseTokenPointer: '/access_token',
        type: 'Bearer',
        headerName: 'Authorization',
        maxAgeInSeconds: 3600,
        cookieName: 'auth.token',
      },

      
      refresh: {
        isEnabled: true,
        endpoint: {
          path: '/users/refresh_token', 
          method: 'post' 
        },
        refreshOnlyToken: false,
        token: {
          maxAgeInSeconds: 60 * 60 * 24 * 30, // 30 วัน
          signInResponseRefreshTokenPointer: '/refresh_token',
          refreshResponseTokenPointer: '/access_token',
          refreshResponseRefreshTokenPointer: '/refresh_token',
          cookieName: 'auth.refresh-token',
          // cookieName: 'RefreshToken',
          refreshRequestTokenPointer: '/refresh_token',
          headerName: 'RefreshToken',
        }
      },

      pages: {
        login: '/sign-in'
      }
    }
  }
})

login function

const login = async () => {
  if (!validateEmail()) return

  try {
    const { signIn } = useAuth()

    await signIn({
      email: email.value,
      password: password.value,
    })

    navigateTo('/user')

  } catch (error) {
    console.log(error);
  }
}

user page

<template>
  <div class="container mx-auto p-4 max-w-md">
    <h1 class="text-2xl font-bold mb-6">User Profile</h1>

    <button 
      class="w-full bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded transition"
      @click="logout"
    >
      Logout
    </button>
  </div>
</template>

<script setup>
definePageMeta({
  // middleware: 'auth'
  middleware: 'sidebase-auth'
})

const logout = async () => {
  await signOut({ redirect: false })
  navigateTo('/sign-in')
}
</script>

Describe the bug

Problem Description
I'm experiencing an issue with Nuxt Auth (sidebase) where it's making excessive refresh token requests. I want the system to only request a new refresh token when the access token is about to expire or has expired, but currently it's making continuous requests regardless of token status.

Specific Issues:
Post-Login Refresh Requests: After a successful login where I already receive both access and refresh tokens, the system immediately starts making refresh token requests even though the access token is still valid.

Continuous Refresh Cycle: After a successful refresh token request where the tokens are properly updated in cookies, the system continues to make more refresh token requests in rapid succession, creating an endless cycle.

These excessive requests are causing problems with my backend, including token revocation due to too many requests.

Expected Behavior
The system should:

1. Only attempt to refresh tokens when the access token is about to expire (e.g., within 5 minutes of expiration)
2. Not make refresh requests immediately after login
3. Not make continuous refresh requests after a successful refresh

Question
How can I configure Nuxt Auth to only refresh tokens when the access token is about to expire? Is there a built-in way to control the refresh timing, or do I need to implement a custom solution?

All the following images occurred during the sign-in process with email and password.

Response access and refresh when login
https://ibb.co/dw30HGwM

After that, Nuxt Auth continues to send refresh token requests. In reality, this should trigger a "not before" error, but I have disabled the "not before" check for debugging purposes and the access token and refresh token in the image have been verified to be correctly saved in the cookies.
https://ibb.co/MxY9yMX5

After that, Nuxt Auth still doesn't stop sending refresh token requests, continuing to fire them repeatedly in an infinity loop. All of these requests result in errors because they are sent too frequently, causing the tokens to be revoked.
https://ibb.co/qM5s7gS1

Additional context

No response

Logs

[phoenix-ru]

Hi @dickhorror , thank you for your detailed report! I'll take a look and see if I can reproduce this error (likely next week)

[theflyingape]

In nuxt.config.ts, you can set it to false to disable or at the very least increase the periodic refresh to something more tolerable that the default of 5000:

    sessionRefresh: {
      // Whether to refresh the session every time the browser window is refocused.
      enableOnWindowFocus: true,
      // Whether to refresh the session every `X` milliseconds. Set this to `false` to turn it o
ff. The session will only be refreshed if a session already exists.
      enablePeriodically: 98765,

Also, I have refresh called in middleware/get-session.global.ts, so it's checked prior to session check when moving around the portal:

import { get } from '@vueuse/core'

export default defineNuxtRouteMiddleware(async (to, from) => {
  const { refresh, signOut, status } = useAuth()

  if (get(status) !== 'unauthenticated') {
    await refresh().then((result) => {
      console.log('get-session result:', result)
    }).catch((err) => {
      console.error('get-session error:', err)
      signOut({callbackUrl: 'logout', external: false})
    })
  }
})

[JarvisChao]

I have the same issue—after logging in, the refreshToken keeps making requests repeatedly. So I decided to disable it and handle the refresh manually. However, another problem is that the signIn function doesn’t provide the response data, so I can’t retrieve the refresh token during login and store it in a cookie myself.

[phoenix-ru]

@JarvisChao signIn should now return the response thanks to #977. This is pre-released in https://github.com/sidebase/nuxt-auth/releases/tag/v1.0.0-rc.1

[coreyshuman]

I believe this is caused when maxAgeInSeconds is too large. I ran into this same issue when I set max age to 30 days, just as you have in your example.

This occurs because the refresh timer users setInterval(callback, maxAgeInSeconds * 1000) and at 30 days the interval in milliseconds is larger than the largest int32 value. This causes setInterval to fire every second.

nuxt-auth/src/runtime/utils/refreshHandler.ts

Line 48 in 58193dd

this.refreshTokenIntervalTimer = setInterval(() => {

Per the MDN docs:

Note: The delay argument is converted to a signed 32-bit integer. This effectively limits delay to 2147483647 ms, roughly 24.8 days, since it's specified as a signed integer in the IDL.
https://developer.mozilla.org/en-US/docs/Web/API/Window/setInterval#return_value

You can test this behavior easily. The following will behave as expected:

setInterval(() => console.log('.'), 2147483647)

Increase the delay by 1 and the interval will fire constantly:

setInterval(() => console.log('.'), 2147483648)

[phoenix-ru]

@coreyshuman Thanks for the info, there was a PR for it (#891), but I am unhappy with the overly complex implementation.

Do you think a simple Math.min(timer, 2147483647) is going to be a sufficient fix?

One might even argue that at >24.8 days no timer is actually needed, so it can even look like this:

if (timer < 2147483647) {
  setInterval()
} else {
  console.log('Omitting the timer')
}

[phoenix-ru]

@dickhorror @theflyingape @coreyshuman Please check if #1032 resolves your issue

npm i https://pkg.pr.new/@sidebase/nuxt-auth@1032

[coreyshuman]

@phoenix-ru I agree in that I'm not sure how necessary the timer is for that configuration variable. When I initially ran into this, my intuition was that sessionRefresh.enablePeriodically would handle any refresh timer value while token.maxAgeInSeconds would be strictly for the cookie expiration, so I was surprised to find a timer attached to token.maxAgeInSeconds.

#1032 did resolve the issue when using a large maxAgeInSeconds value and continued to work as expected with a small value.