Get Started

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

Checkout the Nuxt 3 documentation and Supabase to learn more.

Installation

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:

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

Options

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

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

url

Default: process.env.SUPABASE_URL (ex: https://example.supabase.co)

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

key

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.

serviceKey

Default: process.env.SUPABASE_SERVICE_KEY

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

useSsrCookies

Default: true

Controls whether the module uses cookies to share session info between server and client. You must enable this option if you need to access session or user info from the server. It will use the SSR client from the @supabase/ssr library.

When disabled, the module will use the default Supabase client from the @supabase/supabase-js library which stores session info in local storage. This is useful in certain cases, such as statically generated sites or mobile apps where cookies might not be available.

redirect

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

Default:

  redirectOptions: {
    login: '/login',
    callback: '/confirm',
    include: undefined,
    exclude: [],
    saveRedirectToCookie: 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.
• saveRedirectToCookie: Automatically sets a cookie containing the path an unauthenticated user tried to access. The value can be accessed using the useSupabaseCookieRedirect composable to redirect the user to the page they previously tried to visit.

cookiePrefix

Default: sb-{your-project-id}-auth-token

The prefix used for all supabase cookies, and the redirect cookie.

By default, the cookie prefix is the same as the default storage key from the supabase-js client. This includes your project id, and will look something like this: sb-ttc1xwfwkoleowdqayb19-auth-token

cookieOptions

  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.

types

Default: ./types/database.types.ts

The path for the generated Supabase TypeScript definitions. The database definitions will be automatically passed to all clients: useSupabaseClient, serverSupabaseClient and serverSupabaseServiceRole.

## Generate types from live database
supabase gen types --lang=typescript --project-id YourProjectId > types/database.types.ts

## Generate types when using local environment
supabase gen types --lang=typescript --local > types/database.types.ts

Set to false to disable.

Check Supabase documentation for further information.

clientOptions

Default:

  clientOptions: { }

Customize the Supabase client options available here.

If useSsrCookies is enabled, these options will be merged with values from @supabase/ssr, and some of the options cannot be customized.

  clientOptions: {
    auth: {
      flowType: 'pkce',
      autoRefreshToken: isBrowser(),
            detectSessionInUrl: isBrowser(),
            persistSession: true,
    },
  }

cookieName

Default: sb

Cookie name used for storing the redirect path when using the redirectOptions.cookieRedirect option, added in front of -redirect-path to form the full cookie name e.g. sb-redirect-path

redirectOptions.cookieRedirect

Default: false

Use the cookieRedirect option to store the redirect path in a cookie.

Demo

A live demo is made for you to see this module in action on n3-supabase.netlify.app, read more in the demo section.

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