Build a User Management App with SvelteKit

1
PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"
2
PUBLIC_SUPABASE_PUBLISHABLE_KEY="YOUR_SUPABASE_PUBLISHABLE_KEY"

1
// src/hooks.server.ts
2
import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY } from '$env/static/public'
3
import { createServerClient } from '@supabase/ssr'
4
import type { Handle } from '@sveltejs/kit'
5
6
export const handle: Handle = async ({ event, resolve }) => {
7
  event.locals.supabase = createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY, {
8
    cookies: {
9
      getAll: () => event.cookies.getAll(),
10
      /**
11
       * Note: You have to add the `path` variable to the
12
       * set and remove method due to sveltekit's cookie API
13
       * requiring this to be set, setting the path to `/`
14
       * will replicate previous/standard behaviour (https://kit.svelte.dev/docs/types#public-types-cookies)
15
       */
16
      setAll: (cookiesToSet) => {
17
        cookiesToSet.forEach(({ name, value, options }) => {
18
          event.cookies.set(name, value, { ...options, path: '/' })
19
        })
20
      },
21
    },
22
  })
23
24
  return resolve(event, {
25
    filterSerializedResponseHeaders(name: string) {
26
      return name === 'content-range' || name === 'x-supabase-api-version'
27
    },
28
  })
29
}

1
import type { SupabaseClient } from '@supabase/supabase-js'
2
// See https://kit.svelte.dev/docs/types#app
3
// for information about these interfaces
4
declare global {
5
  namespace App {
6
    // interface Error {}
7
    interface Locals {
8
      supabase: SupabaseClient
9
    }
10
    // interface PageState {}
11
    // interface Platform {}
12
  }
13
}
14
15
export {}

1
// src/routes/+layout.server.ts
2
import type { LayoutServerLoad } from './$types'
3
4
export const load: LayoutServerLoad = async ({ cookies }) => {
5
  return {
6
    cookies: cookies.getAll(),
7
  }
8
}

1
// src/routes/+layout.ts
2
import { PUBLIC_SUPABASE_PUBLISHABLE_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'
3
import type { LayoutLoad } from './$types'
4
import { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr'
5
6
export const load: LayoutLoad = async ({ fetch, data, depends }) => {
7
  depends('supabase:auth')
8
9
  const supabase = isBrowser()
10
    ? createBrowserClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY, {
11
        global: {
12
          fetch,
13
        },
14
      })
15
    : createServerClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_PUBLISHABLE_KEY, {
16
        global: {
17
          fetch,
18
        },
19
        cookies: {
20
          getAll() {
21
            return data.cookies
22
          },
23
        },
24
      })
25
26
  /**
27
   * `getClaims` validates the JWT signature locally (for asymmetric keys) once
28
   * the relevant signing keys are available or cached, and returns the decoded
29
   * claims. While an initial or periodic network request may be required to
30
   * fetch or refresh keys, this is both faster and safer than `getSession`,
31
   * which does not validate the JWT.
32
   */
33
  const { data: claimsData, error } = await supabase.auth.getClaims()
34
  const claims = error ? null : claimsData?.claims
35
36
  return { supabase, claims }
37
}

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

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

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

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

1
<p>Login error</p>

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

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

1
<script lang="ts">
2
3
    // ...
4
5
    import Avatar from './Avatar.svelte'
6
7
// ...
8
9
10
11
	// ...
12
13
	>
14
        <Avatar
15
            {supabase}
16
            bind:url={avatarUrl}
17
            size={10}
18
            onupload={() => {
19
                profileForm.requestSubmit();
20
            }}
21
22
		// ...
23
24
		</div>
25
26
		// ...