mobile favicon

Get Started

@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.

@nuxtjs/supabase is a Nuxt module for first class integration with Supabase.

Checkout the Nuxt 3 documentation and Supabase to learn more.

For integrating Supabase with Nuxt 2, checkout supabase-community/nuxt-supabase.


Add @nuxtjs/supabase dev dependency to your project:

npx nuxi@latest module add supabase

Add @nuxtjs/supabase to the modules section of nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],

Add SUPABASE_URL and SUPABASE_KEY to the .env:

Alternatively, you can prefix the env variables with NUXT_PUBLIC_ in order to use runtimeConfig.


You can configure the supabase module by using the supabase key in nuxt.config:

export default defineNuxtConfig({
  // ...
  supabase: {
    // Options


Default: process.env.SUPABASE_URL (ex:

The unique Supabase URL which is supplied when you create a new project in your project dashboard.


Default: process.env.SUPABASE_KEY

Supabase 'anon key', used to bypass the Supabase API gateway and interact with your Supabase database making use of user JWT to apply RLS Policies.


Default: process.env.SUPABASE_SERVICE_KEY

Supabase 'service role key', has super admin rights and can bypass your Row Level Security.


Default: true

Redirect automatically to the configured login page if a non authenticated user is trying to access a guarded. You can disable all redirects by setting this option to false.



  redirectOptions: {
    login: '/login',
    callback: '/confirm',
    include: undefined,
    exclude: [],
    cookieRedirect: false,
  • login: User will be redirected to this path if not authenticated or after logout.
  • callback: This is the path the user will be redirect to after supabase login redirection. Should match configured redirectTo option of your signIn method. Should also be configured in your Supabase dashboard under Authentication -> URL Configuration -> Redirect URLs.
  • include: Routes to include in the redirect. ['/admin(/*)?'] will enable the redirect only for the admin page and all sub-pages.
  • exclude: Routes to exclude from the redirect. ['/foo', '/bar/*'] will exclude the foo page and all pages in your bar folder.
  • cookieRedirect: Sets a cookie containing the path an unauthenticated user tried to access. The cookie can then be used on the /confirm page to redirect the user to the page they previously tried to visit.


Default: sb

Cookie name used for storing access and refresh tokens, added in front of -access-token and -refresh-token to form the full cookie name e.g. sb-access-token


  cookieOptions: {
    maxAge: 60 * 60 * 8,
    sameSite: 'lax',
    secure: true

Options for cookies used to share tokens between server and client, refer to cookieOptions for available settings. Please note that the lifetime set here does not determine the Supabase session lifetime.



  clientOptions: {
    auth: {
      flowType: 'pkce',
      detectSessionInUrl: true,
      persistSession: true,
      autoRefreshToken: true

Supabase client options available here.


0.1.x versions are wrapped around supabase-js v1.

1.x.x versions are wrapped around supabase-js v2.


A live demo is made for see this module in action on, read more in the demo section.

Supabase demo with Nuxt 3

Also checkout the YouTube video about its usage in a live demo.

Made with Nuxt Studio