使用 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.net.cn/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
  /**
25
   * Unlike `supabase.auth.getSession`, which is unsafe on the server because it
26
   * doesn't validate the JWT, this function validates the JWT by first calling
27
   * `getUser` and aborts early if the JWT signature is invalid.
28
   */
29
  event.locals.safeGetSession = async () => {
30
    const {
31
      data: { user },
32
      error,
33
    } = await event.locals.supabase.auth.getUser()
34
    if (error) {
35
      return { session: null, user: null }
36
    }
37
38
    const {
39
      data: { session },
40
    } = await event.locals.supabase.auth.getSession()
41
    return { session, user }
42
  }
43
44
  return resolve(event, {
45
    filterSerializedResponseHeaders(name: string) {
46
      return name === 'content-range' || name === 'x-supabase-api-version'
47
    },
48
  })
49
}

1
import { SupabaseClient, Session } from '@supabase/supabase-js'
2
// See https://kit.svelte.net.cn/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
			safeGetSession(): Promise<{ session: Session | null; user?: Session["user"] | null }>
10
		}
11
		interface PageData {
12
			session: Session | null
13
			user?: Session["user"] | null
14
		}
15
		// interface PageState {}
16
		// interface Platform {}
17
	}
18
}
19
20
export {};

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

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
   * It's fine to use `getSession` here, because on the client, `getSession` is
28
   * safe, and on the server, it reads `session` from the `LayoutData`, which
29
   * safely checked the session using `safeGetSession`.
30
   */
31
  const {
32
    data: { session },
33
  } = await supabase.auth.getSession()
34
35
  return { supabase, session }
36
}

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, session } = $derived(data)
9
10
	onMount(() => {
11
		const { data } = supabase.auth.onAuthStateChange((event, _session) => {
12
			if (_session?.expires_at !== session?.expires_at) {
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: { safeGetSession } }) => {
6
  const { session } = await safeGetSession()
7
8
  // if the user is already logged in return them to the account page
9
  if (session) {
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 { session, 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 () => {
20
			loading = false
21
		}
22
	}
23
24
	const handleSignOut: SubmitFunction = () => {
25
		loading = true
26
		return async ({ update }) => {
27
			loading = false
28
			update()
29
		}
30
	}
31
</script>
32
33
<div class="form-widget">
34
	<form
35
		class="form-widget"
36
		method="post"
37
		action="?/update"
38
		use:enhance={handleSubmit}
39
		bind:this={profileForm}
40
	>
41
42
		// ...
43
44
		<div>
45
			<label for="email">Email</label>
46
			<input id="email" type="text" value={session.user.email} disabled />
47
		</div>
48
49
		<div>
50
			<label for="fullName">Full Name</label>
51
			<input id="fullName" name="fullName" type="text" value={form?.fullName ?? fullName} />
52
		</div>
53
54
		<div>
55
			<label for="username">Username</label>
56
			<input id="username" name="username" type="text" value={form?.username ?? username} />
57
		</div>
58
59
		<div>
60
			<label for="website">Website</label>
61
			<input id="website" name="website" type="url" value={form?.website ?? website} />
62
		</div>
63
64
		<div>
65
			<input
66
				type="submit"
67
				class="button block primary"
68
				value={loading ? 'Loading...' : 'Update'}
69
				disabled={loading}
70
			/>
71
		</div>
72
	</form>
73
74
	<form method="post" action="?/signout" use:enhance={handleSignOut}>
75
		<div>
76
			<button class="button block" disabled={loading}>Sign Out</button>
77
		</div>
78
	</form>
79
</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
<div class="form-widget">
10
11
        // ...
12
13
        <Avatar
14
            {supabase}
15
            bind:url={avatarUrl}
16
            size={10}
17
            onupload={() => {
18
                profileForm.requestSubmit();
19
            }}
20
        />
21
22
// ...
23
24
</div>