--- title: "Introduction" description: "@nuxtjs/supabase is a Nuxt module for first class integration with Supabase." canonical_url: "https://supabase.nuxtjs.org/getting-started/introduction" --- # Introduction > @nuxtjs/supabase is a Nuxt module for first class integration with Supabase. [@nuxtjs/supabase](https://github.com/nuxt-modules/supabase) is a Nuxt module for first class integration with Supabase. Checkout the [Nuxt](https://nuxt.com/) documentation and [Supabase](https://supabase.com) to learn more. For integrating Supabase with Nuxt 2, checkout [supabase-community/nuxt-supabase](https://github.com/supabase-community/nuxt-supabase). ## Installation Add `@nuxtjs/supabase` dev dependency to your project: ```bash npx nuxi@latest module add supabase ``` Add `@nuxtjs/supabase` to the `modules` section of `nuxt.config.ts`: ```ts [nuxt.config.ts] export default defineNuxtConfig({ modules: ['@nuxtjs/supabase'], }) ``` Add `NUXT_PUBLIC_SUPABASE_URL` and `NUXT_PUBLIC_SUPABASE_KEY` to the `.env`: ```bash [env] NUXT_PUBLIC_SUPABASE_URL="https://example.supabase.co" NUXT_PUBLIC_SUPABASE_KEY="" ``` The legacy `SUPABASE_URL` and `SUPABASE_KEY` env variables are still supported as fallbacks. Using the `NUXT_` prefix is recommended as it follows Nuxt's [runtimeConfig](https://nuxt.com/docs/guide/going-further/runtime-config) convention and allows overriding values at runtime without rebuilding. ## Options You can configure the supabase module by using the `supabase` key in `nuxt.config`: ```ts [nuxt.config.ts] export default defineNuxtConfig({ // ... supabase: { // Options } } ``` ### `url` Default: `NUXT_PUBLIC_SUPABASE_URL` env variable (falls back to `SUPABASE_URL`) (ex: [https://example.supabase.co](https://example.supabase.co)) The unique Supabase URL which is supplied when you create a new project in your project dashboard. ### `key` Default: `NUXT_PUBLIC_SUPABASE_KEY` env variable (falls back to `SUPABASE_KEY`) Supabase `publishable key`, used to verify and decode the JWT. Can bypass the Supabase API gateway and interact with your Supabase database applying RLS Policies. In `v1.x.x` and earlier, this was referring to the `anon key`. With the introduction of JWT signing keys, Supabase now needs a "publishable key" to decode the JWT and let you interact with your database. ### `secretKey` Default: `NUXT_SUPABASE_SECRET_KEY` env variable (falls back to `SUPABASE_SECRET_KEY`) Supabase `secret key`, has super admin rights and can bypass your Row Level Security. This key is server-only and never exposed to the client. Keep it in environment variables. ### `serviceKey` Default: `NUXT_SUPABASE_SERVICE_KEY` env variable (falls back to `SUPABASE_SERVICE_KEY`) *Legacy API key* used before signing JWT keys were introduced. Use `secretKey` instead. This option will be removed in a future version. 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](https://github.com/supabase/ssr) library. When disabled, the module will use the default Supabase client from the [@supabase/supabase-js](https://github.com/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. When `useSsrCookies` is `true` the following options cannot be customized with `clientOptions`: - `flowType`, `autoRefreshToken`, `detectSessionInUrl`, `persistSession`, `storage` If you need to customize one of the above options, you must set `useSsrCookies` to `false`. Bear in mind that this will disable SSR support, you'll need to take care of it yourself if needed. ### `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: ```ts [nuxt.config.ts] 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](https://supabase.com/docs/reference/javascript/auth-signinwithoauth). 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`](https://supabase.nuxtjs.org/composables/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` If the `useSsrCookies` option is set to `false`, this option will not affect supabase, and only apply to the `useSupabaseCookieRedirect` cookie. ### `cookieOptions` ```ts cookieOptions: { maxAge: 60 * 60 * 8, sameSite: 'lax', secure: true } ``` Options for cookies used to share tokens between server and client, refer to [cookieOptions](https://nuxt.com/docs/api/composables/use-cookie#options) 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`. `~/` resolves to your Nuxt source directory: the `app/` directory when present (Nuxt 4 default), otherwise the project root (Nuxt 3 or Nuxt 4 without an `app/` directory). ```bash ## Generate types from live database supabase gen types --lang=typescript --project-id YourProjectId > app/types/database.types.ts ## Generate types when using local environment supabase gen types --lang=typescript --local > app/types/database.types.ts ``` Drop the `app/` prefix if your project doesn't have an `app/` directory. To store the file outside `srcDir` (e.g. at the project root alongside `app/`), set `supabase.types` to the matching path, for example `'~~/types/database.types.ts'`. Set to `false` to disable. Check Supabase [documentation](https://supabase.com/docs/reference/javascript/release-notes#typescript-support) for further information. ### `clientOptions` Default: ```ts clientOptions: { } ``` Customize the Supabase client options [available here](https://supabase.com/docs/reference/javascript/initializing#parameters). If `useSsrCookies` is enabled, these options will be merged with values from `@supabase/ssr`, and some of the [options cannot be customized](https://supabase.nuxtjs.org/getting-started/introduction#usessrcookies). ```ts clientOptions: { auth: { flowType: 'pkce', autoRefreshToken: isBrowser(), detectSessionInUrl: isBrowser(), persistSession: true, }, } ``` ### `timezone` Default: `''` Time zone PostgREST should answer in, sent as the [`Prefer: timezone`](https://docs.postgrest.org/en/v12/references/api/preferences.html#timezone) header. ```ts timezone: 'browser' ``` Set to `'browser'` to use the viewer's own zone, resolved in the browser. Any other value is used verbatim and must be an IANA name, which pins the client and the server to the same zone. ```ts timezone: 'America/Los_Angeles' ``` This matters because `now()::date`, `current_date` and any `timestamptz` cast to a date resolve in the connection's time zone, and PostgREST leaves that at UTC. A view comparing a `date` column against `current_date` therefore answers on UTC's day, which is already tomorrow for part of every working day west of Greenwich. It is also the only way to tell a *view*, which cannot take the day as an argument the way a function can. A `timestamptz` in the response is rendered with this offset rather than `+00:00` — the same instant, written differently. Client code that compares timestamps as **strings** should compare instants instead (`Date.parse(a) < Date.parse(b)`), because a lexicographic comparison is only reliable while every value carries the same offset. `'browser'` names a zone only the browser knows, so the server client leaves PostgREST on its own zone. Pass an IANA name if you need both to agree during SSR. ### `cookieName` This option is deprecated, use [`cookiePrefix`](https://supabase.nuxtjs.org/getting-started/introduction#cookieprefix) instead. 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` This option is deprecated, use [`redirectOptions.saveRedirectToCookie`](https://supabase.nuxtjs.org/getting-started/introduction#redirectoptions) instead. 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 [https://supabase-demo-gamma.vercel.app](https://supabase-demo-gamma.vercel.app), read more in the [demo section](https://supabase.nuxtjs.org/getting-started/demo). ![Demo supabase x nuxt](https://supabase.nuxtjs.org/demo.png) Also checkout the [YouTube video](https://www.youtube.com/watch?v=jIyiRT6zT8Q) about its usage in a live demo. ## Sitemap See the full [sitemap](https://supabase.nuxtjs.org/sitemap.md) for all pages.