useSupabaseUser() returns null in middlewares on page refresh (SPA mode)

[XStarlink]

Version

@nuxtjs/supabase: 2.0.3
nuxt: 4.2.1

Description

In v2, useSupabaseUser() now returns JWT claims via client.auth.getClaims(). The initialization happens in the page:start hook in supabase.client.ts, which causes the composable to return null in route middlewares on page refresh when using SPA mode (ssr: false).

This happens because Nuxt middlewares execute before page:start.

flowchart TD
    subgraph timeline["⏱️ Execution Timeline"]
        direction TB
        A["1️⃣ Page Refresh"] --> B["2️⃣ supabase.client.ts setup"]
        B --> C["3️⃣ Route Middleware runs"]
        C --> D["4️⃣ useSupabaseUser() = null"]
        D --> E["5️⃣ Redirect to /login 🚫"]
    end
    
    subgraph late["❌ Runs after middleware"]
        F["6️⃣ page:start hook"]
        F --> G["getClaims()"]
        G --> H["User available ✅"]
    end
    
    E -.->|"too late"| F

Loading

Reproduction

nuxt.config.ts:

export default defineNuxtConfig({
  ssr: false,
  modules: ['@nuxtjs/supabase'],
  supabase: { redirect: false }
})

middleware/auth.ts:

export default defineNuxtRouteMiddleware(() => {
  const user = useSupabaseUser()
  console.log(user.value) // null on refresh, even if logged in
  if (!user.value) return navigateTo('/login')
})

Steps:

1. Login successfully
2. Navigate to a protected page (works ✅)
3. Refresh the page → redirected to login ❌

Root cause

In supabase.client.js:

nuxtApp.hook("page:start", async () => {
  const { data } = await client.auth.getClaims();
  currentUser.value = data?.claims ?? null;
});

Nuxt execution order: plugins → middlewares → page:start

So useSupabaseUser() is still null when middlewares run.

Suggested fix

Initialize claims directly in setup() instead of page:start:

async setup({ provide }) {
  // ... client creation ...
  
  const currentUser = useSupabaseUser();
  
  // Initialize immediately (plugin has enforce: "pre")
  const { data } = await client.auth.getClaims();
  currentUser.value = data?.claims ?? null;
  
  // Keep onAuthStateChange for subsequent updates
  client.auth.onAuthStateChange(/* ... */);
}

Current workaround

Use supabase.auth.getClaims() directly in middlewares:

export default defineNuxtRouteMiddleware(async () => {
  const supabase = useSupabaseClient()
  const { data } = await supabase.auth.getClaims()
  if (!data?.claims) return navigateTo('/login')
})

[aaaaahaaaaa]

I'm observing the same issue with the default auth middleware (redirect: true). Upon refresh, it redirects to /login. It's not consistent, but usually after a couple of refreshes it always ends up redirecting, so that very much feels like a race condition.

Debugging shows the session is null here: https://github.com/nuxt-modules/supabase/blob/main/src/runtime/plugins/auth-redirect.ts#L38

[Nagell]

Didn't have a chance to analyze it in depth, but it sounds very much like my issue which was closed some time ago :/
Just to connect the dots: #506

[Syrex-o]

I'm observing the same if the route is set to: { prerender: true }
Just for additional information.

[patriktoth67]

Is there a planned fix for this?

[Bryanoxx]

I also have this issue

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[larbish]

Might be fixed in https://github.com/nuxt-modules/supabase/releases/tag/v2.0.5.

[mandalornl]

The issue actually still persists. The initialization of currentUser needs to be moved outside the page:start hook, since middleware will be fired before this event.

[XStarlink]

@larbish Thank you but it's not completely fixed, I have the problem discussed here that persist: #594