Supabase Auth with SvelteKit

We generally recommend using the new @supabase/ssr package instead of auth-helpers. @supabase/ssr takes the core concepts of the Auth Helpers package and makes them available to any server framework. Check out the migration doc to learn more.

This submodule provides convenience helpers for implementing user authentication in SvelteKit applications.

Configuration

Install SvelteKit Auth helpers library

This library supports Node.js ^16.15.0.

Terminal


_10npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js

Declare environment variables

Retrieve your project's URL and anon key from your API settings, and create a .env.local file with the following environment variables:

.env.local


_10# Find these in your Supabase project settings https://supabase.com/dashboard/project/_/settings/api
_10PUBLIC_SUPABASE_URL=https://your-project.supabase.co
_10PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Creating a Supabase client

Create a new hooks.server.js file in the root of your project and populate with the following to retrieve the user session.

The session information from getSession is supplied to the Supabase client so it can retrieve the auth token. This is safe, since the auth token signature will be revalidated on the Auth server. But you shouldn't trust the unsigned data that is stored alongside the auth token:

Note that auth.getSession reads the auth token and the unencoded session data from the local storage medium. It doesn't send a request back to the Supabase Auth server unless the local session is expired.

You should never trust the unencoded session data if you're writing server code, since it could be tampered with by the sender. If you need verified, trustworthy user data, call auth.getUser instead, which always makes a request to the Auth server to fetch trusted data.

src/hooks.server.js


_29// src/hooks.server.js
_29import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'
_29import { createSupabaseServerClient } from '@supabase/auth-helpers-sveltekit'
_29
_29export const handle = async ({ event, resolve }) => {
_29  event.locals.supabase = createSupabaseServerClient({
_29    supabaseUrl: PUBLIC_SUPABASE_URL,
_29    supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
_29    event,
_29  })
_29
_29  /**
_29   * a little helper that is written for convenience so that instead
_29   * of calling `const { data: { session } } = await supabase.auth.getSession()`
_29   * you just call this `await getSession()`
_29   */
_29  event.locals.getSession = async () => {
_29    const {
_29      data: { session },
_29    } = await event.locals.supabase.auth.getSession()
_29    return session
_29  }
_29
_29  return resolve(event, {
_29    filterSerializedResponseHeaders(name) {
_29      return name === 'content-range'
_29    },
_29  })
_29}

Note that we are specifying filterSerializedResponseHeaders here. We need to tell SvelteKit that supabase needs the content-range header.

Code Exchange route

The Code Exchange route is required for the server-side auth flow implemented by the SvelteKit Auth Helpers. It exchanges an auth code for the user's session, which is set as a cookie for future requests made to Supabase.

Create a new file at src/routes/auth/callback/+server.js and populate with the following:

src/routes/auth/callback/+server.js


_11import { redirect } from '@sveltejs/kit'
_11
_11export const GET = async ({ url, locals: { supabase } }) => {
_11  const code = url.searchParams.get('code')
_11
_11  if (code) {
_11    await supabase.auth.exchangeCodeForSession(code)
_11  }
_11
_11  throw redirect(303, '/')
_11}

Generate types from your database

In order to get the most out of TypeScript and it's intellisense, you should import the generated Database types into the app.d.ts type definition file that comes with your SvelteKit project, where import('./DatabaseDefinitions') points to the generated types file outlined in v2 docs here after you have logged in, linked, and generated types through the Supabase CLI.

src/app.d.ts


_18// src/app.d.ts
_18
_18import { SupabaseClient, Session } from '@supabase/supabase-js'
_18import { Database } from './DatabaseDefinitions'
_18
_18declare global {
_18  namespace App {
_18    interface Locals {
_18      supabase: SupabaseClient<Database>
_18      getSession(): Promise<Session | null>
_18    }
_18    interface PageData {
_18      session: Session | null
_18    }
_18    // interface Error {}
_18    // interface Platform {}
_18  }
_18}

Authentication

Authentication can be initiated client or server-side. All of the supabase-js authentication strategies are supported with the Auth Helpers client.

Note: The authentication flow requires the Code Exchange Route to exchange a code for the user's session.

Client-side

Send session to client

To make the session available across the UI, including pages and layouts, it is crucial to pass the session as a parameter in the root layout's server load function.

src/routes/+layout.server.js


_10// src/routes/+layout.server.js
_10export const load = async ({ locals: { getSession } }) => {
_10  return {
_10    session: await getSession(),
_10  }
_10}

Shared load functions and pages

To utilize Supabase in shared load functions and within pages, it is essential to create a Supabase client in the root layout load.

src/routes/+layout.js


_20// src/routes/+layout.js
_20import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'
_20import { createSupabaseLoadClient } from '@supabase/auth-helpers-sveltekit'
_20
_20export const load = async ({ fetch, data, depends }) => {
_20  depends('supabase:auth')
_20
_20  const supabase = createSupabaseLoadClient({
_20    supabaseUrl: PUBLIC_SUPABASE_URL,
_20    supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
_20    event: { fetch },
_20    serverSession: data.session,
_20  })
_20
_20  const {
_20    data: { session },
_20  } = await supabase.auth.getSession()
_20
_20  return { supabase, session }
_20}

Access the client inside pages by $page.data.supabase or data.supabase when using export let data.

The usage of depends tells sveltekit that this load function should be executed whenever invalidate is called to keep the page store in sync.

createSupabaseLoadClient caches the client when running in a browser environment and therefore does not create a new client for every time the load function runs.

Setting up the event listener on the client side

We need to create an event listener in the root +layout.svelte file in order to catch supabase events being triggered.

src/routes/+layout.svelte


_24<!-- src/routes/+layout.svelte -->
_24<script lang="ts">
_24  import { invalidate } from '$app/navigation'
_24  import { onMount } from 'svelte'
_24
_24  export let data
_24
_24  let { supabase, session } = data
_24  $: ({ supabase, session } = data)
_24
_24  onMount(() => {
_24    const {
_24      data: { subscription },
_24    } = supabase.auth.onAuthStateChange((event, _session) => {
_24      if (_session?.expires_at !== session?.expires_at) {
_24        invalidate('supabase:auth')
_24      }
_24    })
_24
_24    return () => subscription.unsubscribe()
_24  });
_24</script>
_24
_24<slot />

The usage of invalidate tells SvelteKit that the root +layout.ts load function should be executed whenever the session updates to keep the page store in sync.

We can access the supabase instance in our +page.svelte file through the data object.

src/routes/auth/+page.svelte


_39<!-- // src/routes/auth/+page.svelte -->
_39<script>
_39  export let data
_39  let { supabase } = data
_39  $: ({ supabase } = data)
_39
_39  let email
_39  let password
_39
_39  const handleSignUp = async () => {
_39    await supabase.auth.signUp({
_39      email,
_39      password,
_39      options: {
_39        emailRedirectTo: `${location.origin}/auth/callback`,
_39      },
_39    })
_39  }
_39
_39  const handleSignIn = async () => {
_39    await supabase.auth.signInWithPassword({
_39      email,
_39      password,
_39    })
_39  }
_39
_39  const handleSignOut = async () => {
_39    await supabase.auth.signOut()
_39  }
_39</script>
_39
_39<form on:submit="{handleSignUp}">
_39  <input name="email" bind:value="{email}" />
_39  <input type="password" name="password" bind:value="{password}" />
_39  <button>Sign up</button>
_39</form>
_39
_39<button on:click="{handleSignIn}">Sign in</button>
_39<button on:click="{handleSignOut}">Sign out</button>

Server-side

Form Actions can be used to trigger the authentication process from form submissions.

src/routes/login/+page.server.js


_27// src/routes/login/+page.server.js
_27import { fail } from '@sveltejs/kit'
_27
_27export const actions = {
_27  default: async ({ request, url, locals: { supabase } }) => {
_27    const formData = await request.formData()
_27    const email = formData.get('email')
_27    const password = formData.get('password')
_27
_27    const { error } = await supabase.auth.signUp({
_27      email,
_27      password,
_27      options: {
_27        emailRedirectTo: `${url.origin}/auth/callback`,
_27      },
_27    })
_27
_27    if (error) {
_27      return fail(500, { message: 'Server error. Try again later.', success: false, email })
_27    }
_27
_27    return {
_27      message: 'Please check your email for a magic link to log into the website.',
_27      success: true,
_27    }
_27  },
_27}

src/routes/login/+page.svelte


_11<!-- // src/routes/login/+page.svelte -->
_11<script>
_11	import { enhance } from '$app/forms'
_11	export let form
_11</script>
_11
_11<form method="post" use:enhance>
_11  <input name="email" value={form?.email ?? ''} />
_11  <input type="password" name="password" />
_11  <button>Sign up</button>
_11</form>

Authorization

Protecting API routes

Wrap an API Route to check that the user has a valid session. If they're not logged in the session is null.

src/routes/api/protected-route/+server.ts


_13// src/routes/api/protected-route/+server.ts
_13import { json, error } from '@sveltejs/kit'
_13
_13export const GET = async ({ locals: { supabase, getSession } }) => {
_13  const session = await getSession()
_13  if (!session) {
_13    // the user is not signed in
_13    throw error(401, { message: 'Unauthorized' })
_13  }
_13  const { data } = await supabase.from('test').select('*')
_13
_13  return json({ data })
_13}

If you visit /api/protected-route without a valid session cookie, you will get a 401 response.

Protecting actions

Wrap an Action to check that the user has a valid session. If they're not logged in the session is null.

src/routes/posts/+page.server.ts


_29// src/routes/posts/+page.server.ts
_29import { error, fail } from '@sveltejs/kit'
_29
_29export const actions = {
_29  createPost: async ({ request, locals: { supabase, getSession } }) => {
_29    const session = await getSession()
_29
_29    if (!session) {
_29      // the user is not signed in
_29      throw error(401, { message: 'Unauthorized' })
_29    }
_29    // we are save, let the user create the post
_29    const formData = await request.formData()
_29    const content = formData.get('content')
_29
_29    const { error: createPostError, data: newPost } = await supabase
_29      .from('posts')
_29      .insert({ content })
_29
_29    if (createPostError) {
_29      return fail(500, {
_29        supabaseErrorMessage: createPostError.message,
_29      })
_29    }
_29    return {
_29      newPost,
_29    }
_29  },
_29}

If you try to submit a form with the action ?/createPost without a valid session cookie, you will get a 401 error response.

Protecting multiple routes

To avoid writing the same auth logic in every single route you can also use the handle hook to protect multiple routes at once. For this to work with your Supabase session, you need to use Sveltekit's sequence helper function. Edit your /src/hooks.server.js with the below:

src/hooks.server.js


_55// src/hooks.server.js
_55import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'
_55import { createSupabaseServerClient } from '@supabase/auth-helpers-sveltekit'
_55import { redirect, error } from '@sveltejs/kit'
_55import { sequence } from '@sveltejs/kit/hooks'
_55
_55async function supabase({ event, resolve }) {
_55  event.locals.supabase = createSupabaseServerClient({
_55    supabaseUrl: PUBLIC_SUPABASE_URL,
_55    supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
_55    event,
_55  })
_55
_55  /**
_55   * a little helper that is written for convenience so that instead
_55   * of calling `const { data: { session } } = await supabase.auth.getSession()`
_55   * you just call this `await getSession()`
_55   */
_55  event.locals.getSession = async () => {
_55    const {
_55      data: { session },
_55    } = await event.locals.supabase.auth.getSession()
_55    return session
_55  }
_55
_55  return resolve(event, {
_55    filterSerializedResponseHeaders(name) {
_55      return name === 'content-range'
_55    },
_55  })
_55}
_55
_55async function authorization({ event, resolve }) {
_55  // protect requests to all routes that start with /protected-routes
_55  if (event.url.pathname.startsWith('/protected-routes') && event.request.method === 'GET') {
_55    const session = await event.locals.getSession()
_55    if (!session) {
_55      // the user is not signed in
_55      throw redirect(303, '/')
_55    }
_55  }
_55
_55  // protect POST requests to all routes that start with /protected-posts
_55  if (event.url.pathname.startsWith('/protected-posts') && event.request.method === 'POST') {
_55    const session = await event.locals.getSession()
_55    if (!session) {
_55      // the user is not signed in
_55      throw error(303, '/')
_55    }
_55  }
_55
_55  return resolve(event)
_55}
_55
_55export const handle = sequence(supabase, authorization)

Data fetching

Client-side data fetching with RLS

For row level security to work properly when fetching data client-side, you need to use supabaseClient from PageData and only run your query once the session is defined client-side:

src/routes/+page.svelte


_18<script lang="ts">
_18  export let data
_18
_18  let loadedData = []
_18  async function loadData() {
_18    const { data: result } = await data.supabase.from('test').select('*').limit(20)
_18    loadedData = result
_18  }
_18
_18  $: if (data.session) {
_18    loadData()
_18  }
_18</script>
_18
_18{#if data.session}
_18<p>client-side data fetching with RLS</p>
_18<pre>{JSON.stringify(loadedData, null, 2)}</pre>
_18{/if}

Server-side data fetching with RLS

src/routes/profile/+page.svelte


_11<!-- src/routes/profile/+page.svelte -->
_11<script lang="ts">
_11  export let data
_11
_11  let { user, tableData } = data
_11  $: ({ user, tableData } = data)
_11</script>
_11
_11<div>Protected content for {user.email}</div>
_11<pre>{JSON.stringify(tableData, null, 2)}</pre>
_11<pre>{JSON.stringify(user, null, 2)}</pre>

src/routes/profile/+page.ts


_15// src/routes/profile/+page.ts
_15import { redirect } from '@sveltejs/kit'
_15
_15export const load = async ({ parent }) => {
_15  const { supabase, session } = await parent()
_15  if (!session) {
_15    throw redirect(303, '/')
_15  }
_15  const { data: tableData } = await supabase.from('test').select('*')
_15
_15  return {
_15    user: session.user,
_15    tableData,
_15  }
_15}

Saving and deleting the session


_40import { fail, redirect } from '@sveltejs/kit'
_40import { AuthApiError } from '@supabase/supabase-js'
_40
_40export const actions = {
_40  signin: async ({ request, locals: { supabase } }) => {
_40    const formData = await request.formData()
_40
_40    const email = formData.get('email') as string
_40    const password = formData.get('password') as string
_40
_40    const { error } = await supabase.auth.signInWithPassword({
_40      email,
_40      password,
_40    })
_40
_40    if (error) {
_40      if (error instanceof AuthApiError && error.status === 400) {
_40        return fail(400, {
_40          error: 'Invalid credentials.',
_40          values: {
_40            email,
_40          },
_40        })
_40      }
_40      return fail(500, {
_40        error: 'Server error. Try again later.',
_40        values: {
_40          email,
_40        },
_40      })
_40    }
_40
_40    throw redirect(303, '/dashboard')
_40  },
_40
_40  signout: async ({ locals: { supabase } }) => {
_40    await supabase.auth.signOut()
_40    throw redirect(303, '/')
_40  },
_40}

Migration guide

Migrate to 0.10

PKCE Auth flow

Proof Key for Code Exchange (PKCE) is the new server-side auth flow implemented by the SvelteKit Auth Helpers. It requires a server endpoint for /auth/callback that exchanges an auth code for the user's session.

Check the Code Exchange Route steps above to implement this server endpoint.

Authentication

For authentication methods that have a redirectTo or emailRedirectTo, this must be set to this new code exchange route handler - /auth/callback. This is an example with the signUp function:


_10await supabase.auth.signUp({
_10  email: 'jon@example.com',
_10  password: 'sup3rs3cur3',
_10  options: {
_10    emailRedirectTo: 'http://localhost:3000/auth/callback',
_10  },
_10})

Migrate from 0.8.x to 0.9

Set up the Supabase client

In version 0.9 we now setup our Supabase client for the server inside of a hooks.server.ts file.

src/lib/db.ts


_10// src/lib/db.ts
_10import { createClient } from '@supabase/auth-helpers-sveltekit'
_10import { env } from '$env/dynamic/public'
_10// or use the static env
_10
_10// import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
_10
_10export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)

Initialize the client

In order to use the Supabase library in your client code you will need to setup a shared load function inside the root +layout.ts and create a +layout.svelte to handle our event listening for Auth events.

src/routes/+layout.svelte


_20<!-- src/routes/+layout.svelte -->
_20<script lang="ts">
_20  import { supabaseClient } from '$lib/db'
_20  import { invalidate } from '$app/navigation'
_20  import { onMount } from 'svelte'
_20
_20  onMount(() => {
_20    const {
_20      data: { subscription },
_20    } = supabaseClient.auth.onAuthStateChange(() => {
_20      invalidate('supabase:auth')
_20    })
_20
_20    return () => {
_20      subscription.unsubscribe()
_20    }
_20  })
_20</script>
_20
_20<slot />

Set up hooks

Since version 0.9 relies on hooks.server.ts to setup our client, we no longer need the hooks.client.ts in our project for Supabase related code.

Typings

src/app.d.ts


_19// src/app.d.ts
_19/// <reference types="@sveltejs/kit" />
_19
_19// See https://kit.svelte.dev/docs/types#app
_19// for information about these interfaces
_19// and what to do when importing types
_19declare namespace App {
_19  interface Supabase {
_19    Database: import('./DatabaseDefinitions').Database
_19    SchemaName: 'public'
_19  }
_19
_19  // interface Locals {}
_19  interface PageData {
_19    session: import('@supabase/auth-helpers-sveltekit').SupabaseSession
_19  }
_19  // interface Error {}
_19  // interface Platform {}
_19}

Protecting a page

src/routes/profile/+page.svelte


_10<!-- src/routes/profile/+page.svelte -->
_10<script lang="ts">
_10  /** @type {import('./$types').PageData} */
_10  export let data
_10  $: ({ user, tableData } = data)
_10</script>
_10
_10<div>Protected content for {user.email}</div>
_10<pre>{JSON.stringify(tableData, null, 2)}</pre>
_10<pre>{JSON.stringify(user, null, 2)}</pre>

src/routes/profile/+page.ts


_17// src/routes/profile/+page.ts
_17import type { PageLoad } from './$types'
_17import { getSupabase } from '@supabase/auth-helpers-sveltekit'
_17import { redirect } from '@sveltejs/kit'
_17
_17export const load: PageLoad = async (event) => {
_17  const { session, supabaseClient } = await getSupabase(event)
_17  if (!session) {
_17    throw redirect(303, '/')
_17  }
_17  const { data: tableData } = await supabaseClient.from('test').select('*')
_17
_17  return {
_17    user: session.user,
_17    tableData,
_17  }
_17}

Protecting a API route

src/routes/api/protected-route/+server.ts


_14// src/routes/api/protected-route/+server.ts
_14import type { RequestHandler } from './$types'
_14import { getSupabase } from '@supabase/auth-helpers-sveltekit'
_14import { json, redirect } from '@sveltejs/kit'
_14
_14export const GET: RequestHandler = async (event) => {
_14  const { session, supabaseClient } = await getSupabase(event)
_14  if (!session) {
_14    throw redirect(303, '/')
_14  }
_14  const { data } = await supabaseClient.from('test').select('*')
_14
_14  return json({ data })
_14}

Migrate from 0.7.x to 0.8

Set up the Supabase client

src/lib/db.ts


_19import { createClient } from '@supabase/supabase-js'
_19import { setupSupabaseHelpers } from '@supabase/auth-helpers-sveltekit'
_19import { dev } from '$app/environment'
_19import { env } from '$env/dynamic/public'
_19// or use the static env
_19
_19// import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
_19
_19export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY, {
_19  persistSession: false,
_19  autoRefreshToken: false,
_19})
_19
_19setupSupabaseHelpers({
_19  supabaseClient,
_19  cookieOptions: {
_19    secure: !dev,
_19  },
_19})

Initialize the client

src/routes/+layout.svelte


_15<script lang="ts">
_15  // make sure the supabase instance is initialized on the client
_15  import '$lib/db'
_15  import { startSupabaseSessionSync } from '@supabase/auth-helpers-sveltekit'
_15  import { page } from '$app/stores'
_15  import { invalidateAll } from '$app/navigation'
_15
_15  // this sets up automatic token refreshing
_15  startSupabaseSessionSync({
_15    page,
_15    handleRefresh: () => invalidateAll(),
_15  })
_15</script>
_15
_15<slot />

Set up hooks

src/hooks.server.ts


_10// make sure the supabase instance is initialized on the server
_10import '$lib/db'
_10import { dev } from '$app/environment'
_10import { auth } from '@supabase/auth-helpers-sveltekit/server'
_10
_10export const handle = auth()

Optional if using additional handle methods

src/hooks.server.ts


_10// make sure the supabase instance is initialized on the server
_10import '$lib/db'
_10import { dev } from '$app/environment'
_10import { auth } from '@supabase/auth-helpers-sveltekit/server'
_10import { sequence } from '@sveltejs/kit/hooks'
_10
_10export const handle = sequence(auth(), yourHandler)

Typings

src/app.d.ts


_17/// <reference types="@sveltejs/kit" />
_17
_17// See https://kit.svelte.dev/docs/types#app
_17// for information about these interfaces
_17// and what to do when importing types
_17declare namespace App {
_17  interface Locals {
_17    session: import('@supabase/auth-helpers-sveltekit').SupabaseSession
_17  }
_17
_17  interface PageData {
_17    session: import('@supabase/auth-helpers-sveltekit').SupabaseSession
_17  }
_17
_17  // interface Error {}
_17  // interface Platform {}
_17}

`withPageAuth`

src/routes/protected-route/+page.svelte


_12<script lang="ts">
_12  import type { PageData } from './$types'
_12
_12  export let data: PageData
_12  $: ({ tableData, user } = data)
_12</script>
_12
_12<div>Protected content for {user.email}</div>
_12<p>server-side fetched data with RLS:</p>
_12<pre>{JSON.stringify(tableData, null, 2)}</pre>
_12<p>user:</p>
_12<pre>{JSON.stringify(user, null, 2)}</pre>

src/routes/protected-route/+page.ts


_12import { withAuth } from '@supabase/auth-helpers-sveltekit'
_12import { redirect } from '@sveltejs/kit'
_12import type { PageLoad } from './$types'
_12
_12export const load: PageLoad = withAuth(async ({ session, getSupabaseClient }) => {
_12  if (!session.user) {
_12    throw redirect(303, '/')
_12  }
_12
_12  const { data: tableData } = await getSupabaseClient().from('test').select('*')
_12  return { tableData, user: session.user }
_12})

`withApiAuth`

src/routes/api/protected-route/+server.ts


_18import type { RequestHandler } from './$types'
_18import { withAuth } from '@supabase/auth-helpers-sveltekit'
_18import { json, redirect } from '@sveltejs/kit'
_18
_18interface TestTable {
_18  id: string
_18  created_at: string
_18}
_18
_18export const GET: RequestHandler = withAuth(async ({ session, getSupabaseClient }) => {
_18  if (!session.user) {
_18    throw redirect(303, '/')
_18  }
_18
_18  const { data } = await getSupabaseClient().from<TestTable>('test').select('*')
_18
_18  return json({ data })
_18})

Migrate from 0.6.11 and below to 0.7.0

There are numerous breaking changes in the latest 0.7.0 version of this library.

Environment variable prefix

The environment variable prefix is now PUBLIC_ instead of VITE_ (e.g., VITE_SUPABASE_URL is now PUBLIC_SUPABASE_URL).

Set up the Supabase client

src/lib/db.ts


_10import { createSupabaseClient } from '@supabase/auth-helpers-sveltekit';
_10
_10const { supabaseClient } = createSupabaseClient(
_10  import.meta.env.VITE_SUPABASE_URL as string,
_10  import.meta.env.VITE_SUPABASE_ANON_KEY as string
_10);
_10
_10export { supabaseClient };

Initialize the client

src/routes/__layout.svelte


_10<script>
_10  import { session } from '$app/stores'
_10  import { supabaseClient } from '$lib/db'
_10  import { SupaAuthHelper } from '@supabase/auth-helpers-svelte'
_10</script>
_10
_10<SupaAuthHelper {supabaseClient} {session}>
_10  <slot />
_10</SupaAuthHelper>

Set up hooks

src/hooks.ts


_14import { handleAuth } from '@supabase/auth-helpers-sveltekit'
_14import type { GetSession, Handle } from '@sveltejs/kit'
_14import { sequence } from '@sveltejs/kit/hooks'
_14
_14export const handle: Handle = sequence(...handleAuth())
_14
_14export const getSession: GetSession = async (event) => {
_14  const { user, accessToken, error } = event.locals
_14  return {
_14    user,
_14    accessToken,
_14    error,
_14  }
_14}

Typings

src/app.d.ts


_18/// <reference types="@sveltejs/kit" />
_18// See https://kit.svelte.dev/docs/types#app
_18// for information about these interfaces
_18declare namespace App {
_18  interface UserSession {
_18    user: import('@supabase/supabase-js').User
_18    accessToken?: string
_18  }
_18
_18  interface Locals extends UserSession {
_18    error: import('@supabase/supabase-js').ApiError
_18  }
_18
_18  interface Session extends UserSession {}
_18
_18  // interface Platform {}
_18  // interface Stuff {}
_18}

Check the user on the client

src/routes/index.svelte


_10<script>
_10  import { session } from '$app/stores'
_10</script>
_10
_10{#if !$session.user}
_10<h1>I am not logged in</h1>
_10{:else}
_10<h1>Welcome {$session.user.email}</h1>
_10<p>I am logged in!</p>
_10{/if}

`withPageAuth`

src/routes/protected-route.svelte


_27<script lang="ts" context="module">
_27  import { supabaseServerClient, withPageAuth } from '@supabase/auth-helpers-sveltekit'
_27  import type { Load } from './__types/protected-page'
_27
_27  export const load: Load = async ({ session }) =>
_27    withPageAuth(
_27      {
_27        redirectTo: '/',
_27        user: session.user,
_27      },
_27      async () => {
_27        const { data } = await supabaseServerClient(session.accessToken).from('test').select('*')
_27        return { props: { data, user: session.user } }
_27      }
_27    )
_27</script>
_27
_27<script>
_27  export let data
_27  export let user
_27</script>
_27
_27<div>Protected content for {user.email}</div>
_27<p>server-side fetched data with RLS:</p>
_27<pre>{JSON.stringify(data, null, 2)}</pre>
_27<p>user:</p>
_27<pre>{JSON.stringify(user, null, 2)}</pre>

`withApiAuth`

src/routes/api/protected-route.ts


_22import { supabaseServerClient, withApiAuth } from '@supabase/auth-helpers-sveltekit'
_22import type { RequestHandler } from './__types/protected-route'
_22
_22interface TestTable {
_22  id: string
_22  created_at: string
_22}
_22
_22interface GetOutput {
_22  data: TestTable[]
_22}
_22
_22export const GET: RequestHandler<GetOutput> = async ({ locals, request }) =>
_22  withApiAuth({ user: locals.user }, async () => {
_22    // Run queries with RLS on the server
_22    const { data } = await supabaseServerClient(request).from('test').select('*')
_22
_22    return {
_22      status: 200,
_22      body: { data },
_22    }
_22  })

Additional links

Edit this page on GitHub

Supabase Auth with SvelteKit

Configuration#

Install SvelteKit Auth helpers library#

Declare environment variables#

Creating a Supabase client#

Code Exchange route#

Generate types from your database#

Authentication#

Client-side#

Send session to client#

Shared load functions and pages#

Setting up the event listener on the client side#

Sign in / sign up / sign out#

Server-side#

Authorization#

Protecting API routes#

Protecting actions#

Protecting multiple routes#

Data fetching#

Client-side data fetching with RLS#

Server-side data fetching with RLS#

Saving and deleting the session#

Migration guide #

Migrate to 0.10#

PKCE Auth flow#

Authentication#

Migrate from 0.8.x to 0.9 #

Set up the Supabase client #

Initialize the client #

Set up hooks #

Typings #

Protecting a page #

Protecting a API route #

Migrate from 0.7.x to 0.8 #

Set up the Supabase client #

Initialize the client #

Set up hooks #

Typings #

withPageAuth#

withApiAuth#

Migrate from 0.6.11 and below to 0.7.0 #

Environment variable prefix#

Set up the Supabase client #

Initialize the client #

Set up hooks #

Typings #

Check the user on the client#

withPageAuth#

withApiAuth#

Additional links#

Configuration

Install SvelteKit Auth helpers library

Declare environment variables

Creating a Supabase client

Code Exchange route

Generate types from your database

Authentication

Client-side

Send session to client

Shared load functions and pages

Setting up the event listener on the client side

Sign in / sign up / sign out

Server-side

Authorization

Protecting API routes

Protecting actions

Protecting multiple routes

Data fetching

Client-side data fetching with RLS

Server-side data fetching with RLS

Saving and deleting the session

Migration guide

Migrate to 0.10

PKCE Auth flow

Authentication

Migrate from 0.8.x to 0.9

Set up the Supabase client

Initialize the client

Set up hooks

Typings

Protecting a page

Protecting a API route

Migrate from 0.7.x to 0.8

Set up the Supabase client

Initialize the client

Set up hooks

Typings

`withPageAuth`

`withApiAuth`

Migrate from 0.6.11 and below to 0.7.0

Environment variable prefix

Set up the Supabase client

Initialize the client

Set up hooks

Typings

Check the user on the client

`withPageAuth`

`withApiAuth`

Additional links