From 091bcd2e88c8120089c7cf4f71fa7c92990bd26f Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Sun, 14 Jul 2024 20:59:51 -0700
Subject: [PATCH 1/2] Refactor to use recovery code on TOTP as separate form.

---
 src/lib/validations/auth.ts             |   6 +-
 src/routes/(auth)/login/+page.server.ts |   4 +-
 src/routes/(auth)/login/+page.svelte    |  39 +++++----
 src/routes/(auth)/totp/+page.server.ts  |  35 ++++-----
 src/routes/(auth)/totp/+page.svelte     | 100 ++++++++++++++----------
 5 files changed, 104 insertions(+), 80 deletions(-)

diff --git a/src/lib/validations/auth.ts b/src/lib/validations/auth.ts
index d5af946..ba17051 100644
--- a/src/lib/validations/auth.ts
+++ b/src/lib/validations/auth.ts
@@ -25,5 +25,9 @@ export const signInSchema = z.object({
 });
 
 export const totpSchema = z.object({
-	totpToken: z.string().trim().min(6).max(10),
+	totpToken: z.string().trim().min(6).max(6),
+});
+
+export const recoveryCodeSchema = z.object({
+	recoveryCode: z.string().trim().min(10).max(10),
 });
diff --git a/src/routes/(auth)/login/+page.server.ts b/src/routes/(auth)/login/+page.server.ts
index 1bf98a6..6d91a2a 100644
--- a/src/routes/(auth)/login/+page.server.ts
+++ b/src/routes/(auth)/login/+page.server.ts
@@ -1,5 +1,5 @@
 import { fail, error, type Actions } from '@sveltejs/kit';
-import { eq } from 'drizzle-orm';
+import { eq, or } from 'drizzle-orm';
 import { Argon2id } from 'oslo/password';
 import { zod } from 'sveltekit-superforms/adapters';
 import { setError, superValidate } from 'sveltekit-superforms/server';
@@ -58,7 +58,7 @@ export const actions: Actions = {
 		let session;
 		let sessionCookie;
 		const user: Users | undefined = await db.query.users.findFirst({
-			where: eq(users.username, form.data.username),
+			where: or(eq(users.username, form.data.username), eq(users.email, form.data.username)),
 		});
 
 		if (!user) {
diff --git a/src/routes/(auth)/login/+page.svelte b/src/routes/(auth)/login/+page.svelte
index a0a9232..92c6f36 100644
--- a/src/routes/(auth)/login/+page.svelte
+++ b/src/routes/(auth)/login/+page.svelte
@@ -41,15 +41,29 @@
 </svelte:head>
 
 <div class="login">
-	<form method="POST" use:enhance>
-		<h2
+	<h2
 			class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-		>
-			Log into your account
-		</h2>
+	>
+		Log into your account
+	</h2>
+	{@render usernamePasswordForm()}
+	<p class="px-8 text-center text-sm text-muted-foreground">
+		By clicking continue, you agree to our
+		<a href="/terms" class="underline underline-offset-4 hover:text-primary">
+			Terms of Use
+		</a>
+		and
+		<a href="/privacy" class="underline underline-offset-4 hover:text-primary">
+			Privacy Policy
+		</a>.
+	</p>
+</div>
+
+{#snippet usernamePasswordForm()}
+	<form method="POST" use:enhance>
 		<Form.Field form={superLoginForm} name="username">
 			<Form.Control let:attrs>
-				<Form.Label for="username">Username</Form.Label>
+				<Form.Label for="username">Username/Email</Form.Label>
 				<Input {...attrs} autocomplete="username" bind:value={$loginForm.username} />
 			</Form.Control>
 			<Form.FieldErrors />
@@ -62,22 +76,13 @@
 			<Form.FieldErrors />
 		</Form.Field>
 		<Form.Button>Login</Form.Button>
-		<p class="px-8 text-center text-sm text-muted-foreground">
-			By clicking continue, you agree to our
-			<a href="/terms" class="underline underline-offset-4 hover:text-primary">
-				Terms of Use
-			</a>
-			and
-			<a href="/privacy" class="underline underline-offset-4 hover:text-primary">
-				Privacy Policy
-			</a>.
-		</p>
 	</form>
-</div>
+{/snippet}
 
 <style lang="postcss">
 	.login {
 		display: flex;
+		gap: 1rem;
 		margin-top: 1.5rem;
 		flex-direction: column;
 		justify-content: center;
diff --git a/src/routes/(auth)/totp/+page.server.ts b/src/routes/(auth)/totp/+page.server.ts
index 8819544..48d79c8 100644
--- a/src/routes/(auth)/totp/+page.server.ts
+++ b/src/routes/(auth)/totp/+page.server.ts
@@ -1,4 +1,4 @@
-import { fail, error, type Actions, type Cookies, type RequestEvent } from '@sveltejs/kit';
+import { fail, error, type Actions } from '@sveltejs/kit';
 import { and, eq } from 'drizzle-orm';
 import { Argon2id } from 'oslo/password';
 import { decodeHex } from 'oslo/encoding';
@@ -9,7 +9,7 @@ import { redirect } from 'sveltekit-flash-message/server';
 import { RateLimiter } from 'sveltekit-rate-limiter/server';
 import db from '../../../db';
 import { lucia } from '$lib/server/auth';
-import { totpSchema } from '$lib/validations/auth';
+import { recoveryCodeSchema, totpSchema } from '$lib/validations/auth';
 import { users, twoFactor, recoveryCodes } from '$db/schema';
 import type { PageServerLoad } from './$types';
 import { notSignedInMessage } from '$lib/flashMessages';
@@ -33,7 +33,10 @@ export const load: PageServerLoad = async (event) => {
 		});
 
 		if (!twoFactorDetails || !twoFactorDetails.enabled) {
-			const message = { type: 'error', message: 'Two factor authentication is not enabled' } as const;
+			const message = {
+				type: 'error',
+				message: 'Two factor authentication is not enabled',
+			} as const;
 			redirect(302, '/login', message, event);
 		}
 
@@ -51,7 +54,11 @@ export const load: PageServerLoad = async (event) => {
 		// Check if two factor started less than TWO_FACTOR_TIMEOUT
 		const totpElapsed = totpTimeElapsed(twoFactorInitiatedTime);
 		if (totpElapsed) {
-			console.log('Time elapsed was more than TWO_FACTOR_TIMEOUT', timeElapsed, env.TWO_FACTOR_TIMEOUT);
+			console.log(
+				'Time elapsed was more than TWO_FACTOR_TIMEOUT',
+				totpElapsed,
+				env.TWO_FACTOR_TIMEOUT,
+			);
 			await lucia.invalidateSession(session!.id!);
 			const sessionCookie = lucia.createBlankSessionCookie();
 			cookies.set(sessionCookie.name, sessionCookie.value, {
@@ -67,20 +74,15 @@ export const load: PageServerLoad = async (event) => {
 		console.log('session', session);
 		console.log('isTwoFactorAuthenticated', isTwoFactorAuthenticated);
 
-		if (
-			isTwoFactorAuthenticated &&
-			twoFactorDetails?.enabled &&
-			twoFactorDetails?.secret !== ''
-		) {
+		if (isTwoFactorAuthenticated && twoFactorDetails?.enabled && twoFactorDetails?.secret !== '') {
 			const message = { type: 'success', message: 'You are already signed in' } as const;
 			throw redirect('/', message, event);
 		}
 	}
 
-	const form = await superValidate(event, zod(totpSchema));
-
 	return {
-		form,
+		totpForm: await superValidate(event, zod(totpSchema)),
+		recoveryCodeForm: await superValidate(event, zod(recoveryCodeSchema)),
 	};
 };
 
@@ -121,11 +123,7 @@ export const actions: Actions = {
 			throw redirect(302, '/login', message, event);
 		}
 
-		if (
-			isTwoFactorAuthenticated &&
-			twoFactorDetails.enabled &&
-			twoFactorDetails.secret !== ''
-		) {
+		if (isTwoFactorAuthenticated && twoFactorDetails.enabled && twoFactorDetails.secret !== '') {
 			const message = { type: 'success', message: 'You are already signed in' } as const;
 			throw redirect('/', message, event);
 		}
@@ -151,7 +149,7 @@ export const actions: Actions = {
 				});
 			} else if (twoFactorSecretPopulated && totpToken) {
 				// Check if two factor started less than TWO_FACTOR_TIMEOUT
-				const totpElapsed = totpTimeElapsed(twoFactorDetails.initiatedTime);
+				const totpElapsed = totpTimeElapsed(twoFactorDetails.initiatedTime ?? new Date());
 				if (totpElapsed) {
 					await lucia.invalidateSession(session!.id!);
 					const sessionCookie = lucia.createBlankSessionCookie();
@@ -178,6 +176,7 @@ export const actions: Actions = {
 					const usedRecoveryCode = await checkRecoveryCode(totpToken, dbUser.id);
 					if (!usedRecoveryCode) {
 						console.log('invalid TOTP code');
+						form.data.totpToken = '';
 						return setError(form, 'totpToken', 'Invalid code.');
 					}
 				}
diff --git a/src/routes/(auth)/totp/+page.svelte b/src/routes/(auth)/totp/+page.svelte
index c222ee0..5c061fe 100644
--- a/src/routes/(auth)/totp/+page.svelte
+++ b/src/routes/(auth)/totp/+page.svelte
@@ -3,20 +3,17 @@
 	import { superForm } from 'sveltekit-superforms/client';
 	import * as flashModule from 'sveltekit-flash-message/client';
 	import { AlertCircle } from "lucide-svelte";
-	import { signInSchema, totpSchema } from '$lib/validations/auth';
+	import { recoveryCodeSchema, totpSchema } from '$lib/validations/auth';
 	import * as Form from '$lib/components/ui/form';
 	import { Label } from '$components/ui/label';
 	import { Input } from '$components/ui/input';
 	import { Button } from '$components/ui/button';
 	import * as Alert from "$components/ui/alert";
-	import { boredState } from '$lib/stores/boredState.js';
 	import PinInput from '$components/pin-input.svelte';
 
 	const { data } = $props();
 
-	const superTotpForm = superForm(data.form, {
-		onSubmit: () => boredState.update((n) => ({ ...n, loading: true })),
-		onResult: () => boredState.update((n) => ({ ...n, loading: false })),
+	const superTotpForm = superForm(data.totpForm, {
 		flashMessage: {
 			module: flashModule,
 			onError: ({ result, flashMessage }) => {
@@ -34,59 +31,78 @@
 		delayMs: 0,
 	});
 
+	const superRecoveryCodeForm = superForm(data.recoveryCodeForm, {
+		validators: zodClient(recoveryCodeSchema),
+		resetForm: false,
+		flashMessage: {
+			module: flashModule,
+			onError: ({ result, flashMessage }) => {
+				// Error handling for the flash message:
+				// - result is the ActionResult
+				// - message is the flash store (not the status message store)
+				const errorMessage = result.error.message
+				flashMessage.set({ type: 'error', message: errorMessage });
+			}
+		},
+		syncFlashMessage: false,
+		taintedMessage: null,
+		validationMethod: 'oninput',
+		delayMs: 0,
+	});
+
 	let showRecoveryCode = $state(false);
 
-	const { form: totpForm, enhance } = superTotpForm;
+	const { form: totpFormData, enhance: totpEnhance } = superTotpForm;
+	const { form: recoveryCodeFormData, enhance: recoveryCodeEnhance } = superRecoveryCodeForm;
 </script>
 
 <svelte:head>
 	<title>Bored Game | Login</title>
 </svelte:head>
 
-<div class="login">
-	<form method="POST" use:enhance>
-		<h2
-				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-		>
-			Please enter your {showRecoveryCode ? 'recovery code' : 'TOTP code'}
-		</h2>
-		<Form.Field form={superTotpForm} name="totpToken">
+<div class="totp">
+	<h2
+			class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+	>
+		Please enter your {showRecoveryCode ? 'recovery code' : 'TOTP code'}
+	</h2>
+	{#if !showRecoveryCode}
+		{@render totpForm()}
+		<Button variant="link" class="text-secondary-foreground" on:click={() => showRecoveryCode = true}>Show Recovery Code</Button>
+	{:else}
+		{@render recoveryCodeForm()}
+		<Button variant="link" class="text-secondary-foreground" on:click={() => showRecoveryCode = false}>Show TOTP Code</Button>
+	{/if}
+</div>
+
+{#snippet totpForm()}
+	<form method="POST" use:totpEnhance>
+		<Form.Field form={totpFormData} name="totpToken">
 			<Form.Control let:attrs>
-				{#if showRecoveryCode}
-					<Form.Label for="totpToken">Recovery Code</Form.Label>
-					<Input {...attrs} autocomplete="one-time-code" bind:value={$totpForm.totpToken} />
-				{:else}
-					<Form.Label for="totpToken">TOTP Code</Form.Label>
-					<PinInput {...attrs} bind:value={$totpForm.totpToken} />
-				{/if}
+				<Form.Label for="totpToken">TOTP Code</Form.Label>
+				<PinInput {...attrs} bind:value={$totpFormData.totpToken} />
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
 		<Form.Button>Submit</Form.Button>
 	</form>
-	{#if !showRecoveryCode}
-		<Button variant="link" class="text-secondary-foreground" on:click={() => showRecoveryCode = true}>Show Recovery Code</Button>
-	{:else}
-		<Button variant="link" class="text-secondary-foreground" on:click={() => showRecoveryCode = false}>Show TOTP Code</Button>
-	{/if}
-</div>
+{/snippet}
+
+{#snippet recoveryCodeForm()}
+	<form method="POST" use:recoveryCodeEnhance>
+		<Form.Field form={recoveryCodeFormData} name="recoveryCode">
+			<Form.Control let:attrs>
+				<Form.Label for="totpToken">Recovery Code</Form.Label>
+				<PinInput {...attrs} bind:value={$recoveryCodeFormData.recoveryCode} inputCount={10} />
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Button>Submit</Form.Button>
+	</form>
+{/snippet}
 
 <style lang="postcss">
-	.loading {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		z-index: 101;
-		display: grid;
-		place-items: center;
-		gap: 1rem;
-
-		h3 {
-			color: white;
-		}
-	}
-	.login {
+	.totp {
 		display: flex;
 		margin-top: 1.5rem;
 		flex-direction: column;

From 8b828d40da4a8e7a677dbe60bc2c80259e8f06cb Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Mon, 15 Jul 2024 10:03:50 -0700
Subject: [PATCH 2/2] Fixing 2fa

---
 src/hooks.server.ts                       |  3 +--
 src/routes/(auth)/sign-up/+page.server.ts | 26 ++++++++++++++---------
 src/routes/(auth)/totp/+page.svelte       |  9 ++++----
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index f4f255d..f07cc18 100644
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -13,8 +13,7 @@ import { lucia } from '$lib/server/auth';
 // });
 
 export const authentication: Handle = async function ({ event, resolve }) {
-	const startTimer = Date.now();
-	event.locals.startTimer = startTimer;
+	event.locals.startTimer = Date.now();
 
 	const ip = event.request.headers.get('x-forwarded-for') as string;
 	const country = event.request.headers.get('x-vercel-ip-country') as string;
diff --git a/src/routes/(auth)/sign-up/+page.server.ts b/src/routes/(auth)/sign-up/+page.server.ts
index 4f84e81..1e5d73a 100644
--- a/src/routes/(auth)/sign-up/+page.server.ts
+++ b/src/routes/(auth)/sign-up/+page.server.ts
@@ -12,6 +12,7 @@ import { add_user_to_role } from '$server/roles';
 import db from '../../../db';
 import { collections, users, wishlists } from '$db/schema';
 import { createId as cuid2 } from '@paralleldrive/cuid2';
+import { userFullyAuthenticated, userNotFullyAuthenticated } from '$lib/server/auth-utils';
 
 const limiter = new RateLimiter({
 	// A rate is defined by [number, unit]
@@ -29,16 +30,23 @@ const signUpDefaults = {
 };
 
 export const load: PageServerLoad = async (event) => {
-	// redirect(
-	// 	302,
-	// 	'/waitlist',
-	// 	{ type: 'error', message: 'Sign-up not yet available. Please add your email to the waitlist!' },
-	// 	event
-	// );
+	const { locals, cookies } = event;
+	const { user, session } = event.locals;
 
-	if (event.locals.user) {
+	if (userFullyAuthenticated(user, session)) {
 		const message = { type: 'success', message: 'You are already signed in' } as const;
 		throw redirect('/', message, event);
+	} else if (userNotFullyAuthenticated(user, session)) {
+		try {
+			await lucia.invalidateSession(locals.session!.id!);
+		} catch (error) {
+			console.log('Session already invalidated');
+		}
+		const sessionCookie = lucia.createBlankSessionCookie();
+		cookies.set(sessionCookie.name, sessionCookie.value, {
+			path: '.',
+			...sessionCookie.attributes,
+		});
 	}
 
 	return {
@@ -91,8 +99,6 @@ export const actions: Actions = {
 				verified: false,
 				receive_email: false,
 				theme: 'system',
-				two_factor_secret: '',
-				two_factor_enabled: false,
 			})
 			.returning();
 		console.log('signup user', user);
@@ -104,7 +110,7 @@ export const actions: Actions = {
 			});
 		}
 
-		add_user_to_role(user[0].id, 'user', true);
+		await add_user_to_role(user[0].id, 'user', true);
 		await db.insert(collections).values({
 			user_id: user[0].id,
 		});
diff --git a/src/routes/(auth)/totp/+page.svelte b/src/routes/(auth)/totp/+page.svelte
index 5c061fe..6777018 100644
--- a/src/routes/(auth)/totp/+page.svelte
+++ b/src/routes/(auth)/totp/+page.svelte
@@ -77,14 +77,14 @@
 
 {#snippet totpForm()}
 	<form method="POST" use:totpEnhance>
-		<Form.Field form={totpFormData} name="totpToken">
+		<Form.Field class="form-field-container" form={totpFormData} name="totpToken">
 			<Form.Control let:attrs>
 				<Form.Label for="totpToken">TOTP Code</Form.Label>
 				<PinInput {...attrs} bind:value={$totpFormData.totpToken} />
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
-		<Form.Button>Submit</Form.Button>
+		<Form.Button class="w-full">Submit</Form.Button>
 	</form>
 {/snippet}
 
@@ -93,11 +93,11 @@
 		<Form.Field form={recoveryCodeFormData} name="recoveryCode">
 			<Form.Control let:attrs>
 				<Form.Label for="totpToken">Recovery Code</Form.Label>
-				<PinInput {...attrs} bind:value={$recoveryCodeFormData.recoveryCode} inputCount={10} />
+				<Input {...attrs} bind:value={$recoveryCodeFormData.recoveryCode} />
 			</Form.Control>
 			<Form.FieldErrors />
 		</Form.Field>
-		<Form.Button>Submit</Form.Button>
+		<Form.Button class="w-full">Submit</Form.Button>
 	</form>
 {/snippet}
 
@@ -106,7 +106,6 @@
 		display: flex;
 		margin-top: 1.5rem;
 		flex-direction: column;
-		justify-content: center;
 		width: 100%;
 		margin-right: auto;
 		margin-left: auto;