sveltekit helpers update

README.md

@@ -18,10 +18,10 @@ A collection of framework specific Auth utilities for working with Supabase.
   - `@examples/nextjs`: a [Next.js](https://nextjs.org) app
   - `@examples/sveltekit`: a [SvelteKit](https://kit.svelte.dev) app
   - `@examples/sveltekit-email-password`: a [SvelteKit](https://kit.svelte.dev) app with SSR sign in
+  - `@examples/sveltekit-magic-link`: a [SvelteKit](https://kit.svelte.dev) app with magic links
 - Packages
   - `@supabase/auth-helpers-nextjs`: the supabase auth helper nextjs library used by `nextjs` application
   - `@supabase/auth-helpers-react`: the supabase auth helper reactjs library used by `react` application
-  - `@supabase/auth-helpers-svelte`: the supabase auth helper svelte library used by `sveltekit` application
   - `@supabase/auth-helpers-sveltekit`: the supabase auth helper sveltekit library used by `sveltekit` application
   - `shared`: shared typescript types used by `@supabase/auth-helpers-nextjs` library
   - `config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)

examples/sveltekit-email-password/.env.example

@@ -1,3 +1,3 @@
 # Update these with your Supabase details from your project settings > API
-VITE_SUPABASE_URL=https://your-project.supabase.co
-VITE_SUPABASE_ANON_KEY=your-anon-key
+PUBLIC_SUPABASE_URL=https://your-project.supabase.co
+PUBLIC_SUPABASE_ANON_KEY=your-anon-key

examples/sveltekit-email-password/README.md

@@ -13,8 +13,9 @@ pnpm install
 1. Create a project on the Supabase dashboard
 2. Get the `URL` and `anon` key from your [Settings > API](https://app.supabase.com/project/_/settings/api) section
 3. Copy the `.env.example` file in this project and create a new `.env` file from it
-4. Replace `VITE_SUPABASE_URL` with the `URL` from step 2 and `VITE_SUPABASE_ANON_KEY` with `anon` key from step 2
+4. Replace `PUBLIC_SUPABASE_URL` with the `URL` from step 2 and `PUBLIC_SUPABASE_ANON_KEY` with `anon` key from step 2
 5. Copy the `SQL` below and paste it inside of the [SQL Editor](https://app.supabase.com/project/_/sql) section
+
 ```sql
 DROP TABLE IF EXISTS "public"."test";
 
@@ -25,11 +26,15 @@ CREATE TABLE "public"."test" (
     PRIMARY KEY ("id")
 );
 ```
-6. Build all the packages that this example relies on using the following command 
+
+6. Build the package that this example relies on using the following command
+
 ```bash
-pnpm build:svelteandkit
+pnpm build:sveltekit
 ```
-7. Run the following command from the repository root 
+
+7. Run the following command from the repository root
+
 ```bash
 pnpm dev --filter=@example/sveltekit-email-password -- --open
-```
+```

examples/sveltekit-email-password/package.json

@@ -1,42 +1,39 @@
 {
-  "name": "@example/sveltekit-email-password",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "vite dev --port 3002",
-    "build:example": "vite build",
-    "package": "svelte-kit package",
-    "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
-    "clean:all": "rimraf .svelte-kit node_modules"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "1.0.0-next.377",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "prettier": "^2.5.1",
-    "prettier-plugin-svelte": "^2.5.0",
-    "rimraf": "^3.0.2",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.10.1",
-    "tsconfig": "workspace:*",
-    "tslib": "^2.3.1",
-    "typescript": "~4.5.4",
-    "vite": "^3.0.0"
-  },
-  "type": "module",
-  "dependencies": {
-    "@supabase/auth-helpers-svelte": "workspace:*",
-    "@supabase/auth-helpers-sveltekit": "workspace:*",
-    "@supabase/supabase-js": "^1.35.3",
-    "jose": "^4.8.1"
-  }
+	"name": "@example/sveltekit-email-password",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev --port 3002",
+		"build:example": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
+		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
+		"clean:all": "rimraf .svelte-kit node_modules"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "1.0.0-next.499",
+		"@typescript-eslint/eslint-plugin": "^5.10.1",
+		"@typescript-eslint/parser": "^5.10.1",
+		"eslint": "^7.32.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^3.2.1",
+		"prettier": "^2.5.1",
+		"prettier-plugin-svelte": "^2.5.0",
+		"rimraf": "^3.0.2",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.2.6",
+		"svelte-preprocess": "^4.10.1",
+		"tsconfig": "workspace:*",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.1.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@supabase/auth-helpers-sveltekit": "workspace:*",
+		"@supabase/supabase-js": "^1.35.3"
+	}
 }

examples/sveltekit-email-password/src/app.d.ts

@@ -1,21 +1,15 @@
 /// <reference types="@sveltejs/kit" />
 
-// See https://kit.svelte.dev/docs/typescript
+// See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
+// and what to do when importing types
 declare namespace App {
 	interface Locals {
-		user: import('@supabase/supabase-js').User;
-		accessToken: string | null;
-		error: string | null;
+		session: import('@supabase/auth-helpers-sveltekit').SupabaseSession;
 	}
-
-	// interface Platform {}
-
-	interface Session {
-		user: import('@supabase/supabase-js').User;
-		accessToken: string | null;
-		error: string | null;
+	interface PageData {
+		session: import('@supabase/auth-helpers-sveltekit').SupabaseSession;
 	}
-
-	// interface Stuff {}
+	// interface Error {}
+	// interface Platform {}
 }

examples/sveltekit-email-password/src/hooks.server.ts

@@ -0,0 +1,4 @@
+import '$lib/db';
+import { auth } from '@supabase/auth-helpers-sveltekit/server';
+
+export const handle = auth();

examples/sveltekit-email-password/src/lib/db.ts

@@ -1,8 +1,16 @@
-import { createSupabaseClient } from '@supabase/auth-helpers-sveltekit';
+import { createClient } from '@supabase/supabase-js';
+import { setupSupabaseHelpers } from '@supabase/auth-helpers-sveltekit';
+import { env } from '$env/dynamic/public';
+import { dev } from '$app/environment';
 
-const { supabaseClient } = createSupabaseClient(
-	import.meta.env.VITE_SUPABASE_URL as string,
-	import.meta.env.VITE_SUPABASE_ANON_KEY as string
-);
+export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY, {
+	persistSession: false,
+	autoRefreshToken: false
+});
 
-export { supabaseClient };
+setupSupabaseHelpers({
+	supabaseClient,
+	cookieOptions: {
+		secure: !dev
+	}
+});

examples/sveltekit-email-password/src/routes/(app)/+layout.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { enhanceAndInvalidate } from '@supabase/auth-helpers-sveltekit';
+</script>
+
+<svelte:head>
+	<title>Email and Password Demo - Supabase Auth Helpers</title>
+</svelte:head>
+
+<main class="container is-max-desktop">
+	<div class="navbar-menu my-4">
+		<div class="navbar-start">
+			<a class="my-2" href="/">Supabase Auth Helpers Demo</a>
+		</div>
+		<div class="navbar-end">
+			{#if $page.data.session.user}
+				<form action="/logout" method="post" use:enhanceAndInvalidate>
+					<button type="submit">Sign out</button>
+				</form>
+			{/if}
+		</div>
+	</div>
+
+	<slot />
+</main>

examples/sveltekit-email-password/src/routes/(app)/+page.server.ts

@@ -0,0 +1,51 @@
+import { supabaseClient } from '$lib/db';
+import { invalid, redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { saveSession } from '@supabase/auth-helpers-sveltekit/server';
+
+export const actions: Actions = {
+	async default({ request, cookies, url }) {
+		const formData = await request.formData();
+
+		const email = formData.get('email') as string;
+		const password = formData.get('password') as string;
+
+		if (!email) {
+			return invalid(400, {
+				error: 'Please enter your email'
+			});
+		}
+		if (!password) {
+			return invalid(400, {
+				error: 'Please enter your password',
+				values: {
+					email
+				}
+			});
+		}
+
+		const { data, error } = await supabaseClient.auth.api.signInWithEmail(email, password, {
+			redirectTo: `${url.origin}/logging-in`
+		});
+
+		if (error || !data) {
+			if (error?.status === 400) {
+				return invalid(400, {
+					error: 'Invalid credentials',
+					values: {
+						email
+					}
+				});
+			}
+			return invalid(500, {
+				error: 'Server error. Try again later.',
+				values: {
+					email
+				}
+			});
+		}
+
+		saveSession(cookies, data);
+		throw redirect(303, '/dashboard');
+	}
+};

examples/sveltekit-email-password/src/routes/index.svelte → examples/sveltekit-email-password/src/routes/(app)/+page.svelte

@@ -1,22 +1,36 @@
 <script lang="ts">
-	export let errors: Record<string, string> = null;
-	export let values: Record<string, string> = null;
+	import { applyAction, enhance, type SubmitFunction } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
+
+	export let form: any;
+	let loading = false;
+
+	const handleSubmit: SubmitFunction = () => {
+		loading = true;
+		return async ({ result }) => {
+			loading = false;
+			await applyAction(result);
+			if (result.type === 'redirect') {
+				await invalidateAll();
+			}
+		};
+	};
 </script>
 
 <section class="columns mt-6 pt-6">
 	<div class="column is-half is-offset-one-quarter">
 		<h1 class="title">Sign in</h1>
-		{#if errors}
-			<div class="block notification is-danger">{errors.form}</div>
+		{#if form?.error}
+			<div class="block notification is-danger">{form.error}</div>
 		{/if}
-		<form method="post">
+		<form method="post" use:enhance={handleSubmit}>
 			<div class="field">
 				<label for="email" class="label">Email</label>
 				<p class="control">
 					<input
 						id="email"
 						name="email"
-						value={values?.email ?? ''}
+						value={form?.values?.email ?? ''}
 						class="input"
 						type="email"
 						placeholder="Email"
@@ -30,7 +44,6 @@
 					<input
 						id="password"
 						name="password"
-						value={values?.password ?? ''}
 						class="input"
 						type="password"
 						placeholder="Password"
@@ -40,7 +53,7 @@
 			</div>
 			<div class="field">
 				<p class="control">
-					<button class="button is-fullwidth is-link">Sign in</button>
+					<button disabled={loading} class="button is-fullwidth is-link">Sign in</button>
 				</p>
 			</div>
 		</form>

examples/sveltekit-email-password/src/routes/(app)/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import { withAuth } from '@supabase/auth-helpers-sveltekit';
+
+export const load: PageLoad = withAuth(({ session }) => {
+	if (session.user) {
+		throw redirect(303, '/dashboard');
+	}
+});

examples/sveltekit-email-password/src/routes/dashboard.svelte → examples/sveltekit-email-password/src/routes/(app)/dashboard/+page.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-	import type { TestTable } from '$lib/types';
-	import type { User } from '@supabase/supabase-js';
+	import type { PageData } from './$types';
 
-	export let data: TestTable[];
-	export let user: User;
+	export let data: PageData;
+	$: ({ testTable, user } = data);
 </script>
 
 <div class="block">
 	<p>Protected content for {user.email}</p>
 	<p>server-side fetched data with RLS:</p>
-	<pre>{JSON.stringify(data, null, 2)}</pre>
+	<pre>{JSON.stringify(testTable, null, 2)}</pre>
 </div>
 <div class="block">
 	<p>user:</p>

examples/sveltekit-email-password/src/routes/(app)/dashboard/+page.ts

@@ -0,0 +1,15 @@
+import type { PageLoad } from './$types';
+import { withAuth } from '@supabase/auth-helpers-sveltekit';
+import type { TestTable } from '$lib/types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageLoad = withAuth(async ({ getSupabaseClient, session }) => {
+	if (!session.user) {
+		throw redirect(303, '/');
+	}
+	const { data: testTable } = await getSupabaseClient().from<TestTable>('test').select('*');
+	return {
+		testTable,
+		user: session.user
+	};
+});