Setting up Server-Side Auth for SvelteKit

Set up Server-Side Auth to use cookie-based authentication with SvelteKit.

Install Supabase packages

Install the @supabase/supabase-js package and the helper @supabase/ssr package.


_10npm install @supabase/supabase-js @supabase/ssr

Set up environment variables

Create a .env.local file in your project root directory.

Fill in your PUBLIC_SUPABASE_URL and PUBLIC_SUPABASE_ANON_KEY:

Project URL

Anon key

.env.local


_10PUBLIC_SUPABASE_URL=<your_supabase_project_url>
_10PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>

Set up server-side hooks

Set up server-side hooks in src/hooks.server.ts. The hooks:

Create a request-specific Supabase client, using the user credentials from the request cookie. This client is used for server-only code.
Check user authentication.
Guard protected pages.

src/hooks.server.ts


_81import { createServerClient } from '@supabase/ssr'
_81import { type Handle, redirect } from '@sveltejs/kit'
_81import { sequence } from '@sveltejs/kit/hooks'
_81
_81import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'
_81
_81const supabase: Handle = async ({ event, resolve }) => {
_81  /**
_81   * Creates a Supabase client specific to this server request.
_81   *
_81   * The Supabase client gets the Auth token from the request cookies.
_81   */
_81  event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
_81    cookies: {
_81      getAll: () => event.cookies.getAll(),
_81      /**
_81       * SvelteKit's cookies API requires `path` to be explicitly set in
_81       * the cookie options. Setting `path` to `/` replicates previous/
_81       * standard behavior.
_81       */
_81      setAll: (cookiesToSet) => {
_81        cookiesToSet.forEach(({ name, value, options }) => {
_81          event.cookies.set(name, value, { ...options, path: '/' })
_81        })
_81      },
_81    },
_81  })
_81
_81  /**
_81   * Unlike `supabase.auth.getSession()`, which returns the session _without_
_81   * validating the JWT, this function also calls `getUser()` to validate the
_81   * JWT before returning the session.
_81   */
_81  event.locals.safeGetSession = async () => {
_81    const {
_81      data: { session },
_81    } = await event.locals.supabase.auth.getSession()
_81    if (!session) {
_81      return { session: null, user: null }
_81    }
_81
_81    const {
_81      data: { user },
_81      error,
_81    } = await event.locals.supabase.auth.getUser()
_81    if (error) {
_81      // JWT validation has failed
_81      return { session: null, user: null }
_81    }
_81
_81    return { session, user }
_81  }
_81
_81  return resolve(event, {
_81    filterSerializedResponseHeaders(name) {
_81      /**
_81       * Supabase libraries use the `content-range` and `x-supabase-api-version`
_81       * headers, so we need to tell SvelteKit to pass it through.
_81       */
_81      return name === 'content-range' || name === 'x-supabase-api-version'
_81    },
_81  })
_81}
_81
_81const authGuard: Handle = async ({ event, resolve }) => {
_81  const { session, user } = await event.locals.safeGetSession()
_81  event.locals.session = session
_81  event.locals.user = user
_81
_81  if (!event.locals.session && event.url.pathname.startsWith('/private')) {
_81    return redirect(303, '/auth')
_81  }
_81
_81  if (event.locals.session && event.url.pathname === '/auth') {
_81    return redirect(303, '/private')
_81  }
_81
_81  return resolve(event)
_81}
_81
_81export const handle: Handle = sequence(supabase, authGuard)

Create TypeScript definitions

To prevent TypeScript errors, add type definitions for the new event.locals properties.

src/app.d.ts


_20import type { Session, SupabaseClient, User } from '@supabase/supabase-js'
_20
_20declare global {
_20  namespace App {
_20    // interface Error {}
_20    interface Locals {
_20      supabase: SupabaseClient
_20      safeGetSession: () => Promise<{ session: Session | null; user: User | null }>
_20      session: Session | null
_20      user: User | null
_20    }
_20    interface PageData {
_20      session: Session | null
_20    }
_20    // interface PageState {}
_20    // interface Platform {}
_20  }
_20}
_20
_20export {}

Create a Supabase client in your root layout

Create a Supabase client in your root +layout.ts. This client can be used to access Supabase from the client or the server. In order to get access to the Auth token on the server, use a +layout.server.ts file to pass in the session from event.locals.

src/routes/+layout.ts

src/routes/+layout.server.ts


_43import { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr'
_43import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'
_43import type { LayoutLoad } from './$types'
_43
_43export const load: LayoutLoad = async ({ data, depends, fetch }) => {
_43  /**
_43   * Declare a dependency so the layout can be invalidated, for example, on
_43   * session refresh.
_43   */
_43  depends('supabase:auth')
_43
_43  const supabase = isBrowser()
_43    ? createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
_43        global: {
_43          fetch,
_43        },
_43      })
_43    : createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
_43        global: {
_43          fetch,
_43        },
_43        cookies: {
_43          getAll() {
_43            return data.cookies
_43          },
_43        },
_43      })
_43
_43  /**
_43   * It's fine to use `getSession` here, because on the client, `getSession` is
_43   * safe, and on the server, it reads `session` from the `LayoutData`, which
_43   * safely checked the session using `safeGetSession`.
_43   */
_43  const {
_43    data: { session },
_43  } = await supabase.auth.getSession()
_43
_43  const {
_43    data: { user },
_43  } = await supabase.auth.getUser()
_43
_43  return { session, supabase, user }
_43}

Listen to Auth events

Set up a listener for Auth events on the client, to handle session refreshes and signouts.

src/routes/+layout.svelte


_19<script>
_19	import { invalidate } from '$app/navigation';
_19	import { onMount } from 'svelte';
_19
_19	export let data;
_19	$: ({ session, supabase } = data);
_19
_19	onMount(() => {
_19		const { data } = supabase.auth.onAuthStateChange((_, newSession) => {
_19			if (newSession?.expires_at !== session?.expires_at) {
_19				invalidate('supabase:auth');
_19			}
_19		});
_19
_19		return () => data.subscription.unsubscribe();
_19	});
_19</script>
_19
_19<slot />

Create your first page

Create your first page. This example page calls Supabase from the server to get a list of countries from the database.

This is an example of a public page that uses publicly readable data.

To populate your database, run the countries quickstart from your dashboard.

src/routes/+page.server.ts

src/routes/+page.svelte


_10import type { PageServerLoad } from './$types'
_10
_10export const load: PageServerLoad = async ({ locals: { supabase } }) => {
_10  const { data: countries } = await supabase.from('countries').select('name').limit(5).order('name')
_10  return { countries: countries ?? [] }
_10}

Change the Auth confirmation path

If you have email confirmation turned on (the default), a new user will receive an email confirmation after signing up.

Change the email template to support a server-side authentication flow.

Go to the Auth templates page in your dashboard. In the Confirm signup template, change {{ .ConfirmationURL }} to {{ .SiteURL }}/api/auth/confirm?token_hash={{ .TokenHash }}&type=email.

Create a login page

Next, create a login page to let users sign up and log in.

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

src/routes/auth/+page.svelte

src/routes/auth/+layout.svelte

src/routes/auth/error/+page.svelte


_32import { redirect } from '@sveltejs/kit'
_32
_32import type { Actions } from './$types'
_32
_32export const actions: Actions = {
_32  signup: async ({ request, locals: { supabase } }) => {
_32    const formData = await request.formData()
_32    const email = formData.get('email') as string
_32    const password = formData.get('password') as string
_32
_32    const { error } = await supabase.auth.signUp({ email, password })
_32    if (error) {
_32      console.error(error)
_32      return redirect(303, '/auth/error')
_32    } else {
_32      return redirect(303, '/')
_32    }
_32  },
_32  login: async ({ request, locals: { supabase } }) => {
_32    const formData = await request.formData()
_32    const email = formData.get('email') as string
_32    const password = formData.get('password') as string
_32
_32    const { error } = await supabase.auth.signInWithPassword({ email, password })
_32    if (error) {
_32      console.error(error)
_32      return redirect(303, '/auth/error')
_32    } else {
_32      return redirect(303, '/private')
_32    }
_32  },
_32}

Create the signup confirmation route

Finish the signup flow by creating the API route to handle email verification.

src/routes/api/auth/confirm/+server.ts


_31import type { EmailOtpType } from '@supabase/supabase-js'
_31import { redirect } from '@sveltejs/kit'
_31
_31import type { RequestHandler } from './$types'
_31
_31export const GET: RequestHandler = async ({ url, locals: { supabase } }) => {
_31  const token_hash = url.searchParams.get('token_hash')
_31  const type = url.searchParams.get('type') as EmailOtpType | null
_31  const next = url.searchParams.get('next') ?? '/'
_31
_31  /**
_31   * Clean up the redirect URL by deleting the Auth flow parameters.
_31   *
_31   * `next` is preserved for now, because it's needed in the error case.
_31   */
_31  const redirectTo = new URL(url)
_31  redirectTo.pathname = next
_31  redirectTo.searchParams.delete('token_hash')
_31  redirectTo.searchParams.delete('type')
_31
_31  if (token_hash && type) {
_31    const { error } = await supabase.auth.verifyOtp({ type, token_hash })
_31    if (!error) {
_31      redirectTo.searchParams.delete('next')
_31      return redirect(303, redirectTo)
_31    }
_31  }
_31
_31  redirectTo.pathname = '/auth/error'
_31  return redirect(303, redirectTo)
_31}

Create private routes

Create private routes that can only be accessed by authenticated users. The routes in the private directory are protected by the route guard in hooks.server.ts.

To ensure that hooks.server.ts runs for every nested path, put a +layout.server.ts file in the private directory. This file can be empty, but must exist to protect routes that don't have their own +layout|page.server.ts.

src/routes/private/+layout.server.ts

src/routes/private/+layout.svelte

SQL

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

src/routes/private/+page.svelte


_10/**
_10 * This file is necessary to ensure protection of all routes in the `private`
_10 * directory. It makes the routes in this directory _dynamic_ routes, which
_10 * send a server request, and thus trigger `hooks.server.ts`.
_10 **/

Edit this page on GitHub