fix(#621): store the data promise to await in route middleware

playground-local/nuxt.config.ts

@@ -12,7 +12,7 @@ export default defineNuxtConfig({
         signUp: { path: '/signup', method: 'post' }
       },
       pages: {
-        login: '/'
+        login: '/login'
       },
       token: {
         signInResponseTokenPointer: '/token/accessToken'
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
       // 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 off. The session will only be refreshed if a session already exists.
-      enablePeriodically: 5000,
+      enablePeriodically: 30000,
       // Custom refresh handler - uncomment to use
       // handler: './config/AuthRefreshHandler'
     },

src/runtime/composables/commonAuthState.ts

@@ -5,6 +5,19 @@ import { useState } from '#imports'
 export function makeCommonAuthState<SessionData>() {
   const data = useState<SessionData | undefined | null>('auth:data', () => undefined)
 
+  // Store non-hydratable promise in useState, promise would be skipped by JSON.stringify
+  const dataPromise = useState('auth:dataPromise', () => {
+    const holder = {
+      promise: undefined as Promise<SessionData> | undefined,
+    }
+
+    Object.defineProperty(holder, 'promise', {
+      enumerable: false
+    })
+
+    return holder
+  })
+
   const hasInitialSession = computed(() => !!data.value)
 
   // If session exists, initialize as already synced
@@ -30,6 +43,7 @@ export function makeCommonAuthState<SessionData>() {
 
   return {
     data,
+    dataPromise,
     loading,
     lastRefreshedAt,
     status,

src/runtime/composables/local/useAuth.ts

@@ -54,6 +54,7 @@ export function useAuth(): UseAuthReturn {
 
   const {
     data,
+    dataPromise,
     status,
     lastRefreshedAt,
     loading,
@@ -184,7 +185,10 @@ export function useAuth(): UseAuthReturn {
 
     loading.value = true
     try {
-      const result = await _fetch<any>(nuxt, path, { method, headers })
+      const promise = _fetch<any>(nuxt, path, { method, headers })
+      dataPromise.value.promise = promise
+
+      const result = await promise
       const { dataResponsePointer: sessionDataResponsePointer } = config.session
       data.value = jsonPointerGet<SessionData>(result, sessionDataResponsePointer)
     }
@@ -197,7 +201,9 @@ export function useAuth(): UseAuthReturn {
       data.value = null
       rawToken.value = null
     }
+
     loading.value = false
+    dataPromise.value.promise = undefined
     lastRefreshedAt.value = new Date()
 
     const { required = false, callbackUrl, onUnauthenticated, external } = getSessionOptions ?? {}

src/runtime/middleware/sidebase-auth.ts

@@ -2,7 +2,7 @@ import { isExternalUrl } from '../utils/url'
 import { isProduction } from '../helpers'
 import { ERROR_PREFIX } from '../utils/logger'
 import { determineCallbackUrlForRouteMiddleware } from '../utils/callbackUrl'
-import { defineNuxtRouteMiddleware, navigateTo, useAuth, useRuntimeConfig } from '#imports'
+import { defineNuxtRouteMiddleware, navigateTo, useAuth, useAuthState, useRuntimeConfig } from '#imports'
 
 type MiddlewareMeta = boolean | {
   /**
@@ -37,7 +37,7 @@ declare module 'vue-router' {
   }
 }
 
-export default defineNuxtRouteMiddleware((to) => {
+export default defineNuxtRouteMiddleware(async (to) => {
   // Normalize options. If `undefined` was returned, we need to skip middleware
   const options = normalizeUserOptions(to.meta.auth)
   if (!options) {
@@ -63,6 +63,25 @@ export default defineNuxtRouteMiddleware((to) => {
     return
   }
 
+  // Handle the possible loading state by awaiting the data promise
+  // https://github.com/sidebase/nuxt-auth/issues/621
+  if (status.value === 'loading') {
+    const { dataPromise } = useAuthState()
+
+    if (dataPromise.value.promise) {
+      try {
+        const data = await dataPromise.value.promise
+        if (data) {
+          // Data was successfully fetched - user is logged in
+          return
+        }
+      }
+      catch {
+        // an error occurred, proving that we need to continue with the redirect
+      }
+    }
+  }
+
   // We do not want to block the login page when the local provider is used
   if (authConfig.provider.type === 'local') {
     const loginRoute: string | undefined = authConfig.provider.pages.login

src/runtime/types.ts

@@ -554,6 +554,7 @@ export interface CommonUseAuthReturn<SignIn, SignOut, SessionData> {
 
 export interface CommonUseAuthStateReturn<SessionData> {
   data: WrappedSessionData<SessionData>
+  dataPromise: Ref<{ promise?: Promise<SessionData> | undefined }>
   loading: Ref<boolean>
   lastRefreshedAt: Ref<SessionLastRefreshedAt>
   status: ComputedRef<SessionStatus>