How to Use Supabase with SvelteKit

1npm install @supabase/supabase-js @supabase/ssr

1// src/lib/supabase/server.ts
2import { createServerClient } from '@supabase/ssr'
3import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'
4import type { Cookies } from '@sveltejs/kit'
5
6export function createSupabaseServerClient(cookies: Cookies) {
7  return createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
8    cookies: {
9      getAll: () => cookies.getAll(),
10      setAll: (cookiesToSet) => {
11        cookiesToSet.forEach(({ name, value, options }) => {
12          cookies.set(name, value, { ...options, path: '/' })
13        })
14      },
15    },
16  })
17}
18
19// src/lib/supabase/browser.ts
20import { createBrowserClient } from '@supabase/ssr'
21import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'
22
23export function createSupabaseBrowserClient() {
24  return createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY)
25}

1// src/hooks.server.ts
2import { createSupabaseServerClient } from '$lib/supabase/server'
3import type { Handle } from '@sveltejs/kit'
4
5export const handle: Handle = async ({ event, resolve }) => {
6  event.locals.supabase = createSupabaseServerClient(event.cookies)
7
8  // Use getUser() for server-side verification (not getSession())
9  event.locals.safeGetSession = async () => {
10    const { data: { user }, error } = await event.locals.supabase.auth.getUser()
11    if (error || !user) {
12      return { session: null, user: null }
13    }
14    const { data: { session } } = await event.locals.supabase.auth.getSession()
15    return { session, user }
16  }
17
18  return resolve(event, {
19    filterSerializedResponseHeaders(name) {
20      return name === 'content-range' || name === 'x-supabase-api-version'
21    },
22  })
23}

1// src/routes/dashboard/+page.server.ts
2import type { PageServerLoad } from './$types'
3import { redirect } from '@sveltejs/kit'
4
5export const load: PageServerLoad = async ({ locals }) => {
6  const { session, user } = await locals.safeGetSession()
7
8  if (!session) {
9    throw redirect(303, '/login')
10  }
11
12  const { data: todos, error } = await locals.supabase
13    .from('todos')
14    .select('*')
15    .eq('user_id', user.id)
16    .order('created_at', { ascending: false })
17
18  return {
19    session,
20    user,
21    todos: todos ?? [],
22  }
23}

1// src/routes/login/+page.server.ts
2import type { Actions } from './$types'
3import { fail, redirect } from '@sveltejs/kit'
4
5export const actions: Actions = {
6  login: async ({ request, locals }) => {
7    const formData = await request.formData()
8    const email = formData.get('email') as string
9    const password = formData.get('password') as string
10
11    const { error } = await locals.supabase.auth.signInWithPassword({
12      email,
13      password,
14    })
15
16    if (error) {
17      return fail(400, { error: error.message, email })
18    }
19
20    throw redirect(303, '/dashboard')
21  },
22}

1<!-- src/routes/+layout.svelte -->
2<script lang="ts">
3  import { invalidateAll } from '$app/navigation'
4  import { onMount } from 'svelte'
5  import { createSupabaseBrowserClient } from '$lib/supabase/browser'
6
7  const supabase = createSupabaseBrowserClient()
8
9  onMount(() => {
10    const { data: { subscription } } = supabase.auth.onAuthStateChange(() => {
11      invalidateAll()
12    })
13
14    return () => subscription.unsubscribe()
15  })
16</script>
17
18<slot />