Nuxt 4 + Supabase Auth example? (SSR)

[steady cedar]

Hi, does anyone have a barebones example/template for Nuxt 4 + Supabase with server-side auth instead of client-side?

The demo in the supabase module is client-sided sadly.

[lament summit]

Hi @steady cedar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The knowledge sources don’t contain a full, bare‑bones Nuxt 4 + Supabase SSR auth template, and they only touch Supabase in a few small ways (redirect behavior and some config hints), so I can’t give you a complete, authoritative example from them.

Here’s what is clearly documented:

1. The Supabase Nuxt module auto‑redirects to /login by default when a non‑authenticated user hits a guarded route. That’s why a fresh Nuxt app with @nuxtjs/supabase can suddenly start redirecting to /login even if you didn’t add any middleware yourself. [Nuxt redirect]
   The docs (linked in that answer) explain you can disable or customize this via the redirectOptions in nuxt.config:

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ['@nuxtjs/supabase'],
     supabase: {
       redirectOptions: {
         login: '/login',
         callback: '/confirm',
         exclude: ['/*'], // or adjust to your needs
       },
     },
   })
   

2. For OAuth flows, the module expects a callback route (e.g. /confirm) that you must actually create as a page. In one example, GitHub OAuth wasn’t working until a confirm.vue page was added to match redirectOptions.callback. [Supabase OAuth]

   // nuxt.config.ts (excerpt)
   supabase: {
     redirectOptions: {
       login: '/login',
       callback: '/confirm',
       exclude: ['/*'],
     },
   }
   

   And then you need a pages/confirm.vue file so the callback route exists. [Supabase OAuth]

3. There’s also a note from a Nuxt issue showing a working Nuxt 4 + Supabase setup that adds some Vite/Nitro config to make Supabase work nicely in SSR:

   // nuxt.config.ts (excerpt)
   export default defineNuxtConfig({
     modules: ['@nuxtjs/supabase', /* ... */],
     vite: {
       optimizeDeps: {
         include: ['@supabase/postgrest-js', '@supabase/supabase-js'],
       },
     },
     nitro: {
       externals: {
         inline: ['@supabase/supabase-js'],
       },
     },
     supabase: {
       // your supabase config here
     },
   })

[Nuxt 4 + Supabase]

What’s missing from the sources:

• A full SSR‑first pattern like “check session on the server in middleware, inject user into SSR context, and render protected pages accordingly” is not shown in the provided documents.
• There’s no complete example repo or code snippet that wires useSupabaseUser() / useSupabaseClient() into a Nuxt 4 SSR auth flow.

Given that, I can’t honestly provide a full, working “barebones Nuxt 4 + Supabase SSR auth template” strictly from these sources.

If you want to build SSR auth around the module, the pieces you do have from the docs/answers above are:

• Use the @nuxtjs/supabase module with the redirectOptions to control unauthenticated redirects. [Nuxt redirect]
• Ensure your OAuth callback route (e.g. /confirm) exists as a page so the login flow completes. [Supabase OAuth]
• Apply the Vite/Nitro config shown above if you hit bundling/SSR issues with Supabase in Nuxt 4. [Nuxt 4 + Supabase]

Beyond that, you’d need to consult the official Supabase Nuxt module docs or an external example repo for a full SSR auth pattern, which is not included in the knowledge sources I have.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: