From 82910e97e91e206385da9202d4646dc208216b65 Mon Sep 17 00:00:00 2001
From: Bart van der Braak <bartvdbraak@gmail.com>
Date: Wed, 21 Feb 2024 04:19:09 +0100
Subject: [PATCH] feat: wip auth rework

---
 .../auth/(components)/login-form.svelte       | 118 ++++++------
 .../auth/(components)/register-form.svelte    | 129 ++++++++-----
 .../(auth)/auth/(components)/sso-form.svelte  |  73 +++++---
 src/routes/(auth)/auth/+page.server.ts        | 169 +++++++-----------
 src/routes/(auth)/auth/+page.svelte           |  11 +-
 5 files changed, 270 insertions(+), 230 deletions(-)

diff --git a/src/routes/(auth)/auth/(components)/login-form.svelte b/src/routes/(auth)/auth/(components)/login-form.svelte
index 5b569ea..b5cb157 100644
--- a/src/routes/(auth)/auth/(components)/login-form.svelte
+++ b/src/routes/(auth)/auth/(components)/login-form.svelte
@@ -1,15 +1,44 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import { Icons } from '$lib/components/site/icons';
-	import { Button } from '$lib/components/ui/button';
-	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
-	import * as Alert from '$lib/components/ui/alert';
-	import { cn } from '$lib/utils';
-	import type { ActionData } from '../$types';
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const loginFormSchema = z.object({
+		usernameEmail: z.string(),
+		password: z.string()
+	});
+	export type LoginFormSchema = typeof loginFormSchema;
+</script>
 
-	export let form: ActionData;
-	export let isLoading = false;
+<script lang="ts">
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import { toast } from 'svelte-sonner';
+	import { Icons } from '$lib/components/site';
+	import { cn } from '$lib/utils';
+
+	export let data: SuperValidated<Infer<LoginFormSchema>>;
+	let isLoading = false;
+
+	const form = superForm(data, {
+		validators: zodClient(loginFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Logging in...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Succesfully logged in.');
+			} else {
+				toast.error('Please fix the errors.');
+			}
+		}
+	});
+
+	const { form: formData, enhance } = form;
 </script>
 
 <div class="flex flex-col space-y-2 text-center">
@@ -19,45 +48,32 @@
 	</p>
 </div>
 <div class={cn('grid gap-6')} {...$$restProps}>
-	<form
-		method="POST"
-		action="?/login"
-		use:enhance={() => {
-			isLoading = true;
-			return async ({ update }) => {
-				isLoading = false;
-				update();
-			};
-		}}
-	>
-		<div class="grid gap-2">
-			<div class="grid gap-2">
-				<Label for="emailUsername">Email or username</Label>
-				<Input
-					id="emailUsername"
-					name="emailUsername"
-					type="text"
-					autocapitalize="none"
-					autocomplete="email"
-					autocorrect="off"
-					disabled={isLoading}
-				/>
-			</div>
-			<div class="grid gap-2">
-				<Label for="password">Password</Label>
-				<Input id="password" name="password" type="password" disabled={isLoading} />
-			</div>
-			<Button type="submit" disabled={isLoading}>
-				{#if isLoading}
-					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-				{/if}
-				Sign In
-			</Button>
-		</div>
-		{#if form?.notVerified}
-			<Alert.Root class="mt-4">
-				<Alert.Description>You must verify your email before you can log in.</Alert.Description>
-			</Alert.Root>
-		{/if}
+	<form method="POST" action="?/login" class="grid gap-2" use:enhance>
+		<Form.Field {form} name="usernameEmail" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Username or email</Form.Label>
+				<Input {...attrs} bind:value={$formData.usernameEmail} />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="password" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Password</Form.Label>
+				<Input {...attrs} bind:value={$formData.password} type="password" />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Button disabled={isLoading}>
+			{#if isLoading}
+				<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+			{/if}
+			Log in
+		</Form.Button>
 	</form>
 </div>
+
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+	<div class="pt-4">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}
diff --git a/src/routes/(auth)/auth/(components)/register-form.svelte b/src/routes/(auth)/auth/(components)/register-form.svelte
index f22caef..fc7dff1 100644
--- a/src/routes/(auth)/auth/(components)/register-form.svelte
+++ b/src/routes/(auth)/auth/(components)/register-form.svelte
@@ -1,11 +1,46 @@
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const registerFormSchema = z.object({
+		username: z.string().min(3).max(24),
+		email: z.string().email(),
+		password: z.string().min(8),
+		passwordConfirm: z.string().min(8)
+	});
+	export type RegisterFormSchema = typeof registerFormSchema;
+</script>
+
 <script lang="ts">
-	import { enhance } from '$app/forms';
-	import { Icons } from '$lib/components/site/icons';
-	import { Button } from '$lib/components/ui/button';
+	import * as Form from '$lib/components/ui/form';
 	import { Input } from '$lib/components/ui/input';
-	import { Label } from '$lib/components/ui/label';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import { toast } from 'svelte-sonner';
+	import { Icons } from '$lib/components/site';
 	import { cn } from '$lib/utils';
-	export let isLoading = false;
+
+	export let data: SuperValidated<Infer<RegisterFormSchema>>;
+	let isLoading = false;
+
+	const form = superForm(data, {
+		validators: zodClient(registerFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Creating account...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Account created succesfully.');
+			} else {
+				toast.error('Please fix the errors.');
+			}
+		}
+	});
+
+	const { form: formData, enhance } = form;
 </script>
 
 <div class="flex flex-col space-y-2 text-center">
@@ -13,48 +48,46 @@
 	<p class="pb-6 text-sm text-muted-foreground">Enter your details below to create a new account</p>
 </div>
 <div class={cn('grid gap-6')} {...$$restProps}>
-	<form
-		method="POST"
-		action="?/register"
-		use:enhance={() => {
-			isLoading = true;
-			return async ({ update }) => {
-				isLoading = false;
-				update();
-			};
-		}}
-	>
-		<div class="grid gap-2">
-			<div class="grid gap-2">
-				<Label for="email">Name</Label>
-				<Input id="name" name="name" type="name" disabled={isLoading} />
-			</div>
-			<div class="grid gap-2">
-				<Label for="email">Email</Label>
-				<Input
-					id="email"
-					name="email"
-					type="email"
-					autocapitalize="none"
-					autocomplete="email"
-					autocorrect="off"
-					disabled={isLoading}
-				/>
-			</div>
-			<div class="grid gap-2">
-				<Label for="password">Password</Label>
-				<Input id="password" name="password" type="password" disabled={isLoading} />
-			</div>
-			<div class="grid gap-2">
-				<Label for="passwordConfirm">Confirm password</Label>
-				<Input id="passwordConfirm" name="passwordConfirm" type="password" disabled={isLoading} />
-			</div>
-			<Button type="submit" disabled={isLoading}>
-				{#if isLoading}
-					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-				{/if}
-				Register
-			</Button>
-		</div>
+	<form method="POST" action="?/register" class="grid gap-2" use:enhance>
+		<Form.Field {form} name="email" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Email</Form.Label>
+				<Input {...attrs} bind:value={$formData.email} />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="username" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Username</Form.Label>
+				<Input {...attrs} bind:value={$formData.username} />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="password" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Password</Form.Label>
+				<Input {...attrs} bind:value={$formData.password} type="password" />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="passwordConfirm" class="grid gap-2">
+			<Form.Control let:attrs>
+				<Form.Label>Confirm password</Form.Label>
+				<Input {...attrs} bind:value={$formData.passwordConfirm} type="password" />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Button disabled={isLoading}>
+			{#if isLoading}
+				<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
+			{/if}
+			Log in
+		</Form.Button>
 	</form>
 </div>
+
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+	<div class="pt-4">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}
diff --git a/src/routes/(auth)/auth/(components)/sso-form.svelte b/src/routes/(auth)/auth/(components)/sso-form.svelte
index 2dbc75e..60e5ccf 100644
--- a/src/routes/(auth)/auth/(components)/sso-form.svelte
+++ b/src/routes/(auth)/auth/(components)/sso-form.svelte
@@ -1,14 +1,49 @@
+<script lang="ts" context="module">
+	import { z } from 'zod';
+	export const ssoFormSchema = z.object({
+		token: z.string()
+	});
+	export type SsoFormSchema = typeof ssoFormSchema;
+</script>
+
 <script lang="ts">
+	import * as Form from '$lib/components/ui/form';
+	import { Input } from '$lib/components/ui/input';
+	import { type SuperValidated, type Infer, superForm } from 'sveltekit-superforms';
+	import SuperDebug from 'sveltekit-superforms';
+	import { zodClient } from 'sveltekit-superforms/adapters';
+	import { browser, dev } from '$app/environment';
+	import { PUBLIC_DEBUG_FORMS } from '$env/static/public';
+	import { toast } from 'svelte-sonner';
 	import { Icons } from '$lib/components/site';
+	import { cn } from '$lib/utils';
 	import PocketBase from 'pocketbase';
 	import { PUBLIC_CLIENT_PB } from '$env/static/public';
-	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components/ui/button';
 	import { Separator } from '$lib/components/ui/separator';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import { ChevronDown } from 'radix-icons-svelte';
 
-	export let isLoading = false;
+	export let data: SuperValidated<Infer<SsoFormSchema>>;
+	let isLoading = false;
+
+	const form = superForm(data, {
+		validators: zodClient(ssoFormSchema),
+		onSubmit: () => {
+			isLoading = true;
+			toast.loading('Logging in...');
+		},
+		onUpdated: ({ form: f }) => {
+			isLoading = false;
+			if (f.valid) {
+				toast.success('Succesfully logged in.');
+			} else {
+				toast.error('Please fix the errors.');
+			}
+		}
+	});
+
+	const { form: formData, enhance } = form;
 
 	/* eslint-disable  @typescript-eslint/no-explicit-any */
 	export let providers: { name: string; icon?: any; displayName: string }[];
@@ -31,26 +66,14 @@
 	}
 </script>
 
-<form
-	method="POST"
-	action="?/oauth2"
-	bind:this={oauth2Form}
-	use:enhance={() => {
-		isLoading = true;
-		return async ({ update }) => {
-			isLoading = false;
-			update();
-		};
-	}}
->
-	<div class="relative">
-		<div class="absolute inset-0 flex items-center">
-			<span class="w-full border-t" />
-		</div>
-		<div class="relative flex justify-center text-xs uppercase">
-			<span class="bg-background px-2 py-4 text-muted-foreground"> Or continue with </span>
-		</div>
-	</div>
+<form method="POST" action="?/sso" class="grid gap-2" use:enhance>
+	<Form.Field {form} name="token" class="grid gap-2">
+		<Form.Control let:attrs>
+			<Input {...attrs} bind:value={$formData.token} class="hidden" />
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+
 	<div
 		class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
 	>
@@ -115,3 +138,9 @@
 		{/if}
 	</div>
 </form>
+
+{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
+	<div class="pt-4">
+		<SuperDebug data={$formData} />
+	</div>
+{/if}
diff --git a/src/routes/(auth)/auth/+page.server.ts b/src/routes/(auth)/auth/+page.server.ts
index 9649e65..15f6c76 100644
--- a/src/routes/(auth)/auth/+page.server.ts
+++ b/src/routes/(auth)/auth/+page.server.ts
@@ -1,118 +1,79 @@
-import { error, redirect, type Cookies } from '@sveltejs/kit';
-import type { Actions } from './$types';
+import type { PageServerLoad } from './$types';
+import { superValidate } from 'sveltekit-superforms';
+import { zod } from 'sveltekit-superforms/adapters';
+import { loginFormSchema } from './(components)/login-form.svelte';
+import { registerFormSchema } from './(components)/register-form.svelte';
+import { ssoFormSchema } from './(components)/sso-form.svelte';
+import { fail, type Actions, redirect } from '@sveltejs/kit';
 
-export const actions = {
-	login: async ({
-		request,
-		locals,
-		cookies
-	}: {
-		request: Request;
-		locals: App.Locals;
-		cookies: Cookies;
-	}) => {
-		const body = Object.fromEntries(await request.formData());
+export const load: PageServerLoad = async () => {
+	return {
+		loginForm: await superValidate(zod(loginFormSchema)),
+		registerForm: await superValidate(zod(registerFormSchema)),
+		ssoForm: await superValidate(zod(ssoFormSchema))
+	};
+};
+
+export const actions: Actions = {
+	login: async ({ request, locals, cookies }) => {
+		const form = await superValidate(request, zod(loginFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
 		try {
-			const emailUsername = body.emailUsername.toString();
-			const password = body.password.toString();
-			await locals.pocketBase.collection('users').authWithPassword(emailUsername, password);
-			if (!locals.pocketBase?.authStore?.model?.verified) {
-				locals.pocketBase.authStore.clear();
-				return {
-					notVerified: true
-				};
-			}
+			await locals.pocketBase
+				.collection('users')
+				.authWithPassword(form.data.usernameEmail, form.data.password);
 		} catch (err) {
-			console.log('Error: ', err);
-			throw error(500, 'Something went wrong logging in');
+			return fail(500, {
+				form
+			});
 		}
 		cookies.set('pb_auth', JSON.stringify({ token: locals.pocketBase.authStore.token }), {
 			path: '/'
 		});
-
 		throw redirect(303, '/');
 	},
-	register: async ({ request, locals }: { request: Request; locals: App.Locals }) => {
-		if (locals.pocketBase.authStore.isValid) {
-			return;
-		}
-
-		const formData = await request.formData();
-
-		const name = formData.get('name');
-		const email = formData.get('email');
-		const password = formData.get('password');
-		const passwordConfirm = formData.get('passwordConfirm');
-
-		try {
-			if (typeof name !== 'string') {
-				throw new Error('Name must be a string');
-			}
-
-			if (name.length === 0) {
-				throw new Error('Please enter a valid name');
-			}
-
-			if (typeof email !== 'string') {
-				throw new Error('Email must be a string');
-			}
-
-			if (email.length < 5) {
-				throw new Error('Please enter a valid e-mail address');
-			}
-
-			if (typeof password !== 'string') {
-				throw new Error('Password must be a string');
-			}
-
-			if (password.length < 8) {
-				throw new Error('Password must be at least 8 characters in length');
-			}
-
-			if (password !== passwordConfirm) {
-				throw new Error('Passwords do not match');
-			}
-
-			await locals.pocketBase.collection('users').create({
-				name,
-				email,
-				password,
-				passwordConfirm
+	register: async ({ request, locals }) => {
+		const form = await superValidate(request, zod(registerFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
+		try {
+			await locals.pocketBase.collection('users').create(form.data);
+			return {
+				form
+			};
+		} catch (err) {
+			return fail(500, {
+				form
 			});
-
-			await locals.pocketBase.collection('users').authWithPassword(email, password);
-			if (!locals.pocketBase?.authStore?.model?.verified) {
-				locals.pocketBase.authStore.clear();
-				return {
-					showLogin: true,
-					isLoading: false,
-					notVerified: true
-				};
-			}
-		} catch (error) {
-			console.error(error);
-
-			if (!(error instanceof Error)) {
-				return {
-					name,
-					email,
-					password,
-					error: 'Unknown error occured when signing up user'
-				};
-			}
-
-			return { error: error.message, name, email, password };
 		}
-
-		throw redirect(303, '/');
 	},
-	oauth2: async ({ request, cookies }) => {
-		const form = await request.formData();
-		const token = form.get('token');
-		if (!token || typeof token !== 'string') {
-			throw redirect(303, '/auth');
+	sso: async ({ request, cookies }) => {
+		const form = await superValidate(request, zod(ssoFormSchema));
+		if (!form.valid) {
+			return fail(400, {
+				form
+			});
+		}
+		const token = form.data.token;
+		try {
+			if (!token || typeof token !== 'string') {
+				throw redirect(303, '/auth');
+			}
+			cookies.set('pb_auth', JSON.stringify({ token: token }), { path: '/' });
+			return {
+				form
+			};
+		} catch (err) {
+			return fail(500, {
+				form
+			});
 		}
-		cookies.set('pb_auth', JSON.stringify({ token: token }), { path: '/' });
-		throw redirect(303, '/');
 	}
-} satisfies Actions;
+};
diff --git a/src/routes/(auth)/auth/+page.svelte b/src/routes/(auth)/auth/+page.svelte
index 944a22f..12c1646 100644
--- a/src/routes/(auth)/auth/+page.svelte
+++ b/src/routes/(auth)/auth/+page.svelte
@@ -4,8 +4,9 @@
 	import * as Tabs from '$lib/components/ui/tabs';
 	import type { PageData } from './$types.js';
 	import { LoginForm, RegisterForm, SSOForm } from './(components)';
-	export let form;
+
 	export let data: PageData;
+
 	const { providers } = data;
 	const providersWithIcons = providers.map((provider) => ({
 		...provider,
@@ -22,7 +23,7 @@
 
 <div class="lg:p-8">
 	<Tabs.Root
-		value={form?.showLogin ? 'login' : tab}
+		value={tab}
 		class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
 	>
 		<Tabs.List class="grid w-full grid-cols-2">
@@ -30,16 +31,16 @@
 			<Tabs.Trigger value="register">Register</Tabs.Trigger>
 		</Tabs.List>
 		<Tabs.Content value="login">
-			<LoginForm {form} />
+			<LoginForm data={data.loginForm} />
 		</Tabs.Content>
 		<Tabs.Content value="register">
-			<RegisterForm />
+			<RegisterForm data={data.registerForm} />
 		</Tabs.Content>
 		<p class="px-8 text-center text-xs text-muted-foreground">
 			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
 		</p>
 		{#if providers.length}
-			<SSOForm providers={providersWithIcons} />
+			<SSOForm data={data.ssoForm} providers={providersWithIcons} />
 		{/if}
 	</Tabs.Root>
 </div>