Build a User Management App with SvelteKit

1
2
3
npm create svelte@latest supabase-sveltekitcd supabase-sveltekitnpm install

1
npm install @supabase/supabase-js

1
2
PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// src/hooks.server.tsimport { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'import { createServerClient } from '@supabase/ssr'import type { Handle } from '@sveltejs/kit'export const handle: Handle = async ({ event, resolve }) => {  event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {    cookies: {      getAll: () => event.cookies.getAll(),      /**       * SvelteKit's cookies API requires `path` to be explicitly set in       * the cookie options. Setting `path` to `/` replicates previous/       * standard behavior.       */      setAll: (cookiesToSet) => {        cookiesToSet.forEach(({ name, value, options }) => {          event.cookies.set(name, value, { ...options, path: '/' })        })      },    },  })  /**   * Unlike `supabase.auth.getSession()`, which returns the session _without_   * validating the JWT, this function also calls `getUser()` to validate the   * JWT before returning the session.   */  event.locals.safeGetSession = async () => {    const {      data: { session },    } = await event.locals.supabase.auth.getSession()    if (!session) {      return { session: null, user: null }    }    const {      data: { user },      error,    } = await event.locals.supabase.auth.getUser()    if (error) {      // JWT validation has failed      return { session: null, user: null }    }    return { session, user }  }  return resolve(event, {    filterSerializedResponseHeaders(name) {      return name === 'content-range' || name === 'x-supabase-api-version'    },  })}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/app.d.tsimport { SupabaseClient, Session } from '@supabase/supabase-js'declare global {  namespace App {    interface Locals {      supabase: SupabaseClient      safeGetSession(): Promise<{ session: Session | null; user: User | null }>    }    interface PageData {      session: Session | null      user: User | null    }    // interface Error {}    // interface Platform {}  }}

1
2
3
4
5
6
7
8
9
10
11
12
// src/routes/+layout.server.tsimport type { LayoutServerLoad } from './$types'export const load: LayoutServerLoad = async ({ locals: { safeGetSession }, cookies }) => {  const { session, user } = await safeGetSession()  return {    session,    user,    cookies: cookies.getAll(),  }}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// src/routes/+layout.tsimport { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr'import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'import type { LayoutLoad } from './$types'export const load: LayoutLoad = async ({ fetch, data, depends }) => {  depends('supabase:auth')  const supabase = isBrowser()    ? createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {        global: {          fetch,        },      })    : createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY, {        global: {          fetch,        },        cookies: {          getAll() {            return data.cookies          },        },      })  /**   * It's fine to use `getSession` here, because on the client, `getSession` is   * safe, and on the server, it reads `session` from the `LayoutData`, which   * safely checked the session using `safeGetSession`.   */  const {    data: { session },  } = await supabase.auth.getSession()  return { supabase, session }}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- src/routes/+layout.svelte --><script lang="ts">	import '../styles.css'	import { invalidate } from '$app/navigation'	import { onMount } from 'svelte'	export let data	let { supabase, session } = data	$: ({ supabase, session } = data)	onMount(() => {		const { data } = supabase.auth.onAuthStateChange((event, newSession) => {			if (newSession?.expires_at !== session?.expires_at) {				invalidate('supabase:auth')			}		})		return () => data.subscription.unsubscribe()	})</script><svelte:head>	<title>User Management</title></svelte:head><div class="container" style="padding: 50px 0 100px 0">	<slot /></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!-- src/routes/+page.svelte --><script lang="ts">	import { enhance } from '$app/forms'	import type { ActionData, SubmitFunction } from './$types.js'	export let form: ActionData;	let loading = false	const handleSubmit: SubmitFunction = () => {		loading = true		return async ({ update }) => {			update()			loading = false		}	}</script><svelte:head>	<title>User Management</title></svelte:head><form class="row flex flex-center" method="POST" use:enhance={handleSubmit}>	<div class="col-6 form-widget">		<h1 class="header">Supabase + SvelteKit</h1>		<p class="description">Sign in via magic link with your email below</p>		{#if form?.message !== undefined}		<div class="success {form?.success ? '' : 'fail'}">			{form?.message}		</div>		{/if}		<div>			<label for="email">Email address</label>			<input				id="email"				name="email"				class="inputField"				type="email"				placeholder="Your email"				value={form?.email ?? ''}			/>		</div>		{#if form?.errors?.email}		<span class="flex items-center text-sm error">			{form?.errors?.email}		</span>		{/if}		<div>			<button class="button primary block">				{ loading ? 'Loading' : 'Send magic link' }			</button>		</div>	</div></form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// src/routes/+page.server.tsimport { fail, redirect } from '@sveltejs/kit'import type { Actions, PageServerLoad } from './$types'export const load: PageServerLoad = async ({ url, locals: { safeGetSession } }) => {  const { session } = await safeGetSession()  // if the user is already logged in return them to the account page  if (session) {    redirect(303, '/account')  }  return { url: url.origin }}export const actions: Actions = {  default: async (event) => {    const {      url,      request,      locals: { supabase },    } = event    const formData = await request.formData()    const email = formData.get('email') as string    const validEmail = /^[\w-\.+]+@([\w-]+\.)+[\w-]{2,8}$/.test(email)    if (!validEmail) {      return fail(400, { errors: { email: 'Please enter a valid email address' }, email })    }    const { error } = await supabase.auth.signInWithOtp({ email })    if (error) {      return fail(400, {        success: false,        email,        message: `There was an issue, Please contact support.`,      })    }    return {      success: true,      message: 'Please check your email for a magic link to log into the website.',    }  },}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// src/routes/auth/confirm/+server.tsimport type { EmailOtpType } from '@supabase/supabase-js'import { redirect } from '@sveltejs/kit'import type { RequestHandler } from './$types'export const GET: RequestHandler = async ({ url, locals: { supabase } }) => {  const token_hash = url.searchParams.get('token_hash')  const type = url.searchParams.get('type') as EmailOtpType | null  const next = url.searchParams.get('next') ?? '/account'  /**   * Clean up the redirect URL by deleting the Auth flow parameters.   *   * `next` is preserved for now, because it's needed in the error case.   */  const redirectTo = new URL(url)  redirectTo.pathname = next  redirectTo.searchParams.delete('token_hash')  redirectTo.searchParams.delete('type')  if (token_hash && type) {    const { error } = await supabase.auth.verifyOtp({ type, token_hash })    if (!error) {      redirectTo.searchParams.delete('next')      redirect(303, redirectTo)    }  }  redirectTo.pathname = '/auth/error'  redirect(303, redirectTo)}

1
<p>Login error</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!-- src/routes/account/+page.svelte --><script lang="ts">	import { enhance } from '$app/forms';	import type { SubmitFunction } from '@sveltejs/kit';	export let data	export let form	let { session, supabase, profile } = data	$: ({ session, supabase, profile } = data)	let profileForm: HTMLFormElement	let loading = false	let fullName: string = profile?.full_name ?? ''	let username: string = profile?.username ?? ''	let website: string = profile?.website ?? ''	let avatarUrl: string = profile?.avatar_url ?? ''	const handleSubmit: SubmitFunction = () => {		loading = true		return async () => {			loading = false		}	}	const handleSignOut: SubmitFunction = () => {		loading = true		return async ({ update }) => {			loading = false			update()		}	}</script><div class="form-widget">	<form		class="form-widget"		method="post"		action="?/update"		use:enhance={handleSubmit}		bind:this={profileForm}	>		<div>			<label for="email">Email</label>			<input id="email" type="text" value={session.user.email} disabled />		</div>		<div>			<label for="fullName">Full Name</label>			<input id="fullName" name="fullName" type="text" value={form?.fullName ?? fullName} />		</div>		<div>			<label for="username">Username</label>			<input id="username" name="username" type="text" value={form?.username ?? username} />		</div>		<div>			<label for="website">Website</label>			<input id="website" name="website" type="url" value={form?.website ?? website} />		</div>		<div>			<input				type="submit"				class="button block primary"				value={loading ? 'Loading...' : 'Update'}				disabled={loading}			/>		</div>	</form>	<form method="post" action="?/signout" use:enhance={handleSignOut}>		<div>			<button class="button block" disabled={loading}>Sign Out</button>		</div>	</form></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { fail, redirect } from '@sveltejs/kit'import type { Actions, PageServerLoad } from './$types'export const load: PageServerLoad = async ({ locals: { supabase, safeGetSession } }) => {  const { session } = await safeGetSession()  if (!session) {    redirect(303, '/')  }  const { data: profile } = await supabase    .from('profiles')    .select(`username, full_name, website, avatar_url`)    .eq('id', session.user.id)    .single()  return { session, profile }}export const actions: Actions = {  update: async ({ request, locals: { supabase, safeGetSession } }) => {    const formData = await request.formData()    const fullName = formData.get('fullName') as string    const username = formData.get('username') as string    const website = formData.get('website') as string    const avatarUrl = formData.get('avatarUrl') as string    const { session } = await safeGetSession()    const { error } = await supabase.from('profiles').upsert({      id: session?.user.id,      full_name: fullName,      username,      website,      avatar_url: avatarUrl,      updated_at: new Date(),    })    if (error) {      return fail(500, {        fullName,        username,        website,        avatarUrl,      })    }    return {      fullName,      username,      website,      avatarUrl,    }  },  signout: async ({ locals: { supabase, safeGetSession } }) => {    const { session } = await safeGetSession()    if (session) {      await supabase.auth.signOut()      redirect(303, '/')    }  },}

1
npm run dev

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!-- src/routes/account/Avatar.svelte --><script lang="ts">	import type { SupabaseClient } from '@supabase/supabase-js'	import { createEventDispatcher } from 'svelte'	export let size = 10	export let url: string	export let supabase: SupabaseClient	let avatarUrl: string | null = null	let uploading = false	let files: FileList	const dispatch = createEventDispatcher()	const downloadImage = async (path: string) => {		try {			const { data, error } = await supabase.storage.from('avatars').download(path)			if (error) {				throw error			}			const url = URL.createObjectURL(data)			avatarUrl = url		} catch (error) {			if (error instanceof Error) {				console.log('Error downloading image: ', error.message)			}		}	}	const uploadAvatar = async () => {		try {			uploading = true			if (!files || files.length === 0) {				throw new Error('You must select an image to upload.')			}			const file = files[0]			const fileExt = file.name.split('.').pop()			const filePath = `${Math.random()}.${fileExt}`			const { error } = await supabase.storage.from('avatars').upload(filePath, file)			if (error) {				throw error			}			url = filePath			setTimeout(() => {				dispatch('upload')			}, 100)		} catch (error) {			if (error instanceof Error) {				alert(error.message)			}		} finally {			uploading = false		}	}	$: if (url) downloadImage(url)</script><div>	{#if avatarUrl}		<img			src={avatarUrl}			alt={avatarUrl ? 'Avatar' : 'No image'}			class="avatar image"			style="height: {size}em; width: {size}em;"		/>	{:else}		<div class="avatar no-image" style="height: {size}em; width: {size}em;" />	{/if}	<input type="hidden" name="avatarUrl" value={url} />	<div style="width: {size}em;">		<label class="button primary block" for="single">			{uploading ? 'Uploading ...' : 'Upload'}		</label>		<input			style="visibility: hidden; position:absolute;"			type="file"			id="single"			accept="image/*"			bind:files			on:change={uploadAvatar}			disabled={uploading}		/>	</div></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- src/routes/account/+page.svelte --><script lang="ts">  // Import the new component  import Avatar from './Avatar.svelte'</script><div class="form-widget">  <form    class="form-widget"    method="post"    action="?/update"    use:enhance={handleSubmit}    bind:this={profileForm}  >    <!-- Add to body -->    <Avatar        {supabase}        bind:url={avatarUrl}        size={10}        on:upload={() => {          profileForm.requestSubmit();        }}      />    <!-- Other form elements -->  </form></div>