sveltekit-supabase-auth

SvelteKit Supabase Auth

!! This package is not up to date, have a look at supabase auth helpers !!

How to run it

Copy all contents inside src/package into a folder in your project eg. src/lib/supabase.

All imports used in this repo will then have to be replaced to match the path in your project.

How it works

It uses the invalidateAll method to refetch the session when the it´s about to expire or on signin/signout/etc. This makes sense since any data currently displayed may not belong to the user anymore.

If you don´t care about non JS situations you can just ignore actions and use the auth methods on the supabaseClient instance, the session will always be synced to the server.

Whats different

• No need for a SupaAuthHelper component
• still works when JS fails
• integrates nicely with SvelteKit´s actions

Things to improve

• helpers
  • supabaseServerClient(session.accessToken)
  • saveSession(cookies, session)
  • clearSession(cookies)
  • loadWithSession(...)
  • serverLoadWithSession(...)
  • serverWithSession(...)
• custom enhance functions
  • use:enhanceAndInvalidate - invalidates the page if it´s a redirect ur success type
• move the callback into a hook (not sure why this doesn´t work, seems to be a bug with the cookie api)
• use invalidate('sb:auth') and depends('sb:auth') to only force reloading authenticated data (not sure if this is necessary, needs some testing)
• allow customizing the session location (something else than locals.user and $page.data.session)
• add a session store to reduce $page.data.session to just $session

Minimal setup

/src/app.d.ts

declare namespace App {
	interface SupabaseSession {
		user: import('@supabase/supabase-js').User | null;
		accessToken: string | null;
	}

	interface Locals {
		user: import('@supabase/supabase-js').User | null;
		accessToken: string | null;
		error: string | null;
	}
	interface PageData {
		session: SupabaseSession;
	}
	// interface Platform {}
}

/src/lib/db.ts

import { createClient } from '@supabase/supabase-js';
import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';

export const supabaseClient = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
	persistSession: false,
	autoRefreshToken: false
});

/src/hooks.server.ts

import { dev } from '$app/environment';
import { supabaseClient } from '$lib/db';
import { auth } from '$lib/supabase/server';

export const handle = auth({
	supabaseClient,
	cookieOptions: {
		secure: !dev
	}
});

/src/routes/+layout.server.ts

import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals }) => {
	return {
		session: {
			user: locals.user,
			accessToken: locals.accessToken
		}
	};
};

/src/routes/+layout.svelte

<script lang="ts" context="module">
	import { supabaseClient } from '$lib/db';
	import { setupSupabase } from '$lib/supabase';

	// set the supabase instance so it can be used in helpers
	setupSupabase({ supabaseClient });
</script>

<script lang="ts">
	import { page } from '$app/stores';
	import { startSupabaseSessionSync, enhanceAndInvalidate } from '$lib/supabase';

	// sync session and refresh data when necessary
	startSupabaseSessionSync();
</script>

<slot />