Getting 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:
pnpm add -D @nuxtjs/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.
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',
exclude: [],
}
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 configuredredirectTo
option of your signIn method. Should also be configured in your Supabase dashboard underAuthentication -> URL Configuration -> Redirect URLs
.exclude
: Routes to exclude from the redirect.['/foo', '/bar/*']
will exclude thefoo
page and all pages in yourbar
folder.
cookieName
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
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
Default:
clientOptions: {
auth: {
flowType: 'pkce',
detectSessionInUrl: true,
persistSession: true,
autoRefreshToken: true
},
}
Supabase client options available here.
Versions
0.1.x
versions are wrapped around supabase-js v1
.
1.x.x
versions are wrapped around supabase-js v2
.
Demo
A live demo is made for 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.