updated to use supabase ssr instead of auth helpers

src/hooks.server.ts

@@ -1,17 +1,30 @@
-// src/hooks.server.ts
 import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
-import { createSupabaseServerClient } from '@supabase/auth-helpers-sveltekit';
+import { createServerClient } from '@supabase/ssr';
 import type { Handle } from '@sveltejs/kit';
 
 export const handle: Handle = async ({ event, resolve }) => {
- event.locals.supabase = createSupabaseServerClient({
- supabaseUrl: PUBLIC_SUPABASE_URL,
- supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
- event
+ event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
+ cookies: {
+ get: (key) => event.cookies.get(key),
+ /**
+ * Note: You have to add the `path` variable to the
+ * set and remove method due to sveltekit's cookie API
+ * requiring this to be set, setting the path to an empty string
+ * will replicate previous/standard behaviour (https://kit.svelte.dev/docs/types#public-types-cookies)
+ */
+ set: (key, value, options) => {
+ event.cookies.set(key, value, { ...options, path: '/' });
+ },
+ remove: (key, options) => {
+ event.cookies.delete(key, { ...options, path: '/' });
+ }
+ }
  });
 
  /**
- * A convenience helper so we can just call await getSession() instead const { data: { session } } = await supabase.auth.getSession()
+ * a little helper that is written for convenience so that instead
+ * of calling `const { data: { session } } = await supabase.auth.getSession()`
+ * you just call this `await getSession()`
  */
  event.locals.getSession = async () => {
  const {

src/routes/+layout.server.ts

@@ -1,5 +1,6 @@
-// src/routes/+layout.server.ts
-export const load = async ({ locals: { getSession } }) => {
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals: { getSession } }) => {
  return {
  session: await getSession()
  };

src/routes/+layout.ts

@@ -1,15 +1,24 @@
-// src/routes/+layout.ts
 import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public';
-import { createSupabaseLoadClient } from '@supabase/auth-helpers-sveltekit';
+import { createBrowserClient, isBrowser, parse } from '@supabase/ssr';
+import type { LayoutLoad } from './$types';
 
-export const load = async ({ fetch, data, depends }) => {
+export const load: LayoutLoad = async ({ fetch, data, depends }) => {
  depends('supabase:auth');
 
- const supabase = createSupabaseLoadClient({
- supabaseUrl: PUBLIC_SUPABASE_URL,
- supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
- event: { fetch },
- serverSession: data.session
+ const supabase = createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {
+ global: {
+ fetch
+ },
+ cookies: {
+ get(key) {
+ if (!isBrowser()) {
+ return JSON.stringify(data.session);
+ }
+
+ const cookie = parse(document.cookie);
+ return cookie[key];
+ }
+ }
  });
 
  const {

src/routes/+page.svelte

@@ -1,23 +1,26 @@
 <!-- src/routes/+page.svelte -->
 <script lang="ts">
- import { Auth } from '@supabase/auth-ui-svelte';
- import { ThemeSupa } from '@supabase/auth-ui-shared';
+ import { Auth } from '@supabase/auth-ui-svelte';
+ import { ThemeSupa } from '@supabase/auth-ui-shared';
 
- export let data;
+ export let data;
+
+ let { supabase, url } = data;
+ $: ({ supabase, url } = data);
 </script>
 
 <svelte:head>
- <title>User Management</title>
+ <title>User Management</title>
 </svelte:head>
 
-<div class="row flex-center flex">
- <div class="col-6 form-widget">
- <Auth
- supabaseClient={data.supabase}
- view="magic_link"
- redirectTo={`${data.url}/auth/callback`}
- showLinks={false}
- appearance={{ theme: ThemeSupa, style: { input: 'color: #fff' } }}
- />
- </div>
+<div class="flex">
+ <div class="form-widget">
+ <Auth
+ supabaseClient={supabase}
+ view="magic_link"
+ redirectTo={`${url}/auth/callback`}
+ showLinks={false}
+ appearance={{ theme: ThemeSupa, style: { input: 'color: #fff' } }}
+ />
+ </div>
 </div>

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

@@ -1,12 +1,20 @@
-// src/routes/auth/callback/+server.ts
 import { redirect } from '@sveltejs/kit';
 
-export const GET = async ({ url, locals: { supabase } }) => {
- const code = url.searchParams.get('code');
+export const GET = async (event) => {
+ const {
+ url,
+ locals: { supabase }
+ } = event;
+ const code = url.searchParams.get('code') as string;
+ const next = url.searchParams.get('next') ?? '/';
 
  if (code) {
- await supabase.auth.exchangeCodeForSession(code);
+ const { error } = await supabase.auth.exchangeCodeForSession(code);
+ if (!error) {
+ throw redirect(303, `/${next.slice(1)}`);
+ }
  }
 
- throw redirect(303, '/account');
+ // return the user to an error page with instructions
+ throw redirect(303, '/auth/auth-code-error');
 };