Auth status unexpectedly unauthenticated when using globalAppMiddleware

[bodgerbarnett]

Environment

• Operating System: Darwin
• Node Version: v20.19.0
• Nuxt Version: 3.16.2
• CLI Version: 3.24.1
• Nitro Version: 2.11.9
• Package Manager: yarn@1.22.22
• Builder: -
• User Config: compatibilityDate, devtools, css, devServer, modules, app, auth, colorMode, googleFonts, svgo, runtimeConfig
• Runtime Modules: @sidebase/nuxt-auth@0.10.1, @nuxtjs/google-fonts@3.2.0, nuxt-svgo@4.0.14, nuxt-api-party@2.2.2, @nuxt/ui@3.0.2, nuxt-time@1.0.3
• Build Modules: -

Reproduction

nuxt.config.ts

globalAppMiddleware: {
  isEnabled: false,
  addDefaultCallbackUrl: true,
}

custom-middleware.ts

export default defineNuxtRouteMiddleware(async (to) => {
    // logic to determine whether the logged-in user should have access to this page
    return abortNavigation()
}

page.vue

definePageMeta({
  middleware: ["sidebase-auth", "custom-middleware"]
})

Describe the bug

I need to use the object representation of globalAppMiddleware, as I need to add the default callback URL on login.

I also need some custom middleware that checks to see whether the logged-in user should have access to the page. If they don't, I want to abort the navigation and show an error page.

If I set globalAppMiddleware to false, it all works as expected.
But if I use the object representation, the sidebase-auth middleware sometimes returns "unauthenticated" as the user's status and that causes the user to be redirected to the login page before the custom middleware is able to abort and show the error. So the logged-in user is redirected to the login page.

Additional context

No response

Logs

[bodgerbarnett]

Quick update on this one - the specific situations in which the middleware returns "unauthenticated" when the user is, in reality, authenticated are when the code either creates an error (using createError) or aborts the navigation (using abortNavigation). In both of these scenarios, the useState call in useAuth returns undefined - and, since the middleware only assumes that the user is authenticated if the status value is "authenticated", as soon as this happens, it sees the user as unauthenticated, which in turn causes them to be redirected to the login page and thus the error page isn't seen, as you'd expect when you explicitly call createError (or abortNavigation).

What I don't understand is why useState comes back with undefined in these situations.

[phoenix-ru]

@bodgerbarnett Is this perhaps the same problem as #621? If yes, you can try the fix from #1033

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