feat: auth fully implemented

apps/web/src/hooks.server.ts

@@ -1,29 +1,6 @@
-// import { type Handle } from '@sveltejs/kit';
+import { type Handle } from '@sveltejs/kit';
-// import PocketBase from 'pocketbase';
-// import { pb } from '$lib/pocketbase';
-// import { SERVER_PB } from '$env/static/private';
-
-// /** @type {import('@sveltejs/kit').Handle} */
-// export const handle: Handle = async ({ event, resolve }) => {
-// 	event.locals.pocketBase = new PocketBase(SERVER_PB);
-
-// 	pb.set(event.locals.pocketBase);
-
-// 	event.locals.pocketBase.authStore.loadFromCookie(event.request.headers.get('cookie') ?? '');
-
-// 	const response = await resolve(event);
-
-// 	response.headers.set(
-// 		'set-cookie',
-// 		event.locals.pocketBase.authStore.exportToCookie({ secure: false })
-// 	);
-
-// 	return response;
-// };
-
-import { redirect, type Handle } from '@sveltejs/kit';
 import PocketBase from 'pocketbase';
-import { building } from '$app/environment';
+import { building, dev } from '$app/environment';
 import { SERVER_PB } from '$env/static/private';
 
 export const handle: Handle = async ({ event, resolve }) => {
@@ -39,27 +16,21 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 	const pb_auth = event.request.headers.get('cookie') ?? '';
 	event.locals.pocketBase.authStore.loadFromCookie(pb_auth);
-
-	if (!event.locals.pocketBase.authStore.isValid) {
-		console.log('Session expired');
-		throw redirect(303, '/auth');
-	}
 	try {
 		const auth = await event.locals.pocketBase
 			.collection('users')
 			.authRefresh<{ id: string; email: string }>();
 		event.locals.id = auth.record.id;
 		event.locals.email = auth.record.email;
-	} catch (_) {
+	} catch (err) {
-		throw redirect(303, '/auth');
+		console.log('Error: ', err);
-	}
-
-	if (!event.locals.id) {
-		throw redirect(303, '/auth');
 	}
 
 	const response = await resolve(event);
-	const cookie = event.locals.pocketBase.authStore.exportToCookie({ sameSite: 'lax' });
+	const cookie = event.locals.pocketBase.authStore.exportToCookie({
+		secure: !dev,
+		sameSite: 'lax'
+	});
 	response.headers.append('set-cookie', cookie);
 	return response;
 };

apps/web/src/lib/components/ui/tabs/index.ts

@@ -1,7 +1,7 @@
-import { Tabs as TabsPrimitive } from "bits-ui";
+import { Tabs as TabsPrimitive } from 'bits-ui';
-import Content from "./tabs-content.svelte";
+import Content from './tabs-content.svelte';
-import List from "./tabs-list.svelte";
+import List from './tabs-list.svelte';
-import Trigger from "./tabs-trigger.svelte";
+import Trigger from './tabs-trigger.svelte';
 
 const Root = TabsPrimitive.Root;
 
@@ -14,5 +14,5 @@ export {
 	Root as Tabs,
 	Content as TabsContent,
 	List as TabsList,
-	Trigger as TabsTrigger,
+	Trigger as TabsTrigger
 };

apps/web/src/lib/components/ui/tabs/tabs-content.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = TabsPrimitive.ContentProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let value: $$Props["value"];
+	export let value: $$Props['value'];
 	export { className as class };
 </script>
 
 <TabsPrimitive.Content
 	class={cn(
-		"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+		'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
 		className
 	)}
 	{value}

apps/web/src/lib/components/ui/tabs/tabs-list.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = TabsPrimitive.ListProps;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
 	export { className as class };
 </script>
 
 <TabsPrimitive.List
 	class={cn(
-		"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+		'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
 		className
 	)}
 	{...$$restProps}

apps/web/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { Tabs as TabsPrimitive } from 'bits-ui';
-	import { cn } from "$lib/utils";
+	import { cn } from '$lib/utils';
 
 	type $$Props = TabsPrimitive.TriggerProps;
 	type $$Events = TabsPrimitive.TriggerEvents;
 
-	let className: $$Props["class"] = undefined;
+	let className: $$Props['class'] = undefined;
-	export let value: $$Props["value"];
+	export let value: $$Props['value'];
 	export { className as class };
 </script>
 
 <TabsPrimitive.Trigger
 	class={cn(
-		"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+		'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
 		className
 	)}
 	{value}

apps/web/src/routes/(auth)/auth/+page.server.ts

@@ -32,6 +32,80 @@ export const actions = {
 
 		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
+			});
+
+			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');

apps/web/src/routes/(auth)/auth/+page.svelte

@@ -44,7 +44,7 @@
 
 <div class="lg:p-8">
 	<Tabs.Root
-		value="login"
+		value={form?.showLogin ? 'login' : undefined}
 		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">
@@ -54,7 +54,7 @@
 		<Tabs.Content value="login">
 			<div class="flex flex-col space-y-2 text-center">
 				<h1 class="text-2xl font-semibold tracking-tight">Log into your account</h1>
-				<p class="text-muted-foreground text-sm pb-4">
+				<p class="pb-6 text-sm text-muted-foreground">
 					Enter your credentials below to log into your account
 				</p>
 			</div>
@@ -64,6 +64,10 @@
 					action="?/login"
 					use:enhance={() => {
 						isLoading = true;
+						return async ({ update }) => {
+							isLoading = false;
+							update();
+						};
 					}}
 				>
 					<div class="grid gap-2">
@@ -91,7 +95,7 @@
 						</Button>
 					</div>
 					{#if form?.notVerified}
-						<Alert.Root>
+						<Alert.Root class="mt-4">
 							<Alert.Title></Alert.Title>
 							<Alert.Description>You must verify your email before you can login.</Alert.Description
 							>
@@ -101,7 +105,65 @@
 			</div>
 		</Tabs.Content>
 		<Tabs.Content value="register">
-			
+			<div class="flex flex-col space-y-2 text-center">
+				<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
+				<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="password">Confirm password</Label>
+							<Input id="password" 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>
+					{#if form?.notVerified}
+						<Alert.Root class="mt-4">
+							<Alert.Title></Alert.Title>
+							<Alert.Description>You must verify your email before you can login.</Alert.Description
+							>
+						</Alert.Root>
+					{/if}
+				</form>
+			</div>
 		</Tabs.Content>
 		{#if providers.length}
 			<form
@@ -110,6 +172,10 @@
 				bind:this={oauth2Form}
 				use:enhance={() => {
 					isLoading = true;
+					return async ({ update }) => {
+						isLoading = false;
+						update();
+					};
 				}}
 			>
 				<div class="relative">
@@ -117,11 +183,11 @@
 						<span class="w-full border-t" />
 					</div>
 					<div class="relative flex justify-center text-xs uppercase">
-						<span class="bg-background text-muted-foreground px-2 py-6"> Or continue with </span>
+						<span class="bg-background px-2 py-4 text-muted-foreground"> Or continue with </span>
 					</div>
 				</div>
 				<div
-					class="border-input hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring flex items-center justify-between whitespace-nowrap rounded-md border bg-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50"
+					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"
 				>
 					<input type="hidden" name="provider" bind:value={currentProvider.name} />
 					<div class="flex w-full items-center justify-center space-x-2">
@@ -148,7 +214,7 @@
 					</div>
 					{#if providers.length > 1}
 						<div class="flex items-center space-x-2">
-							<Separator orientation="vertical" class="bg-secondary h-[20px]" />
+							<Separator orientation="vertical" class="h-[20px] bg-secondary" />
 							<div class="flex items-center space-x-2">
 								<DropdownMenu.Root>
 									<DropdownMenu.Trigger asChild let:builder>
@@ -187,7 +253,7 @@
 		{/if}
 	</Tabs.Root>
 
-	<p class="text-muted-foreground px-8 py-2 text-center text-xs">
+	<p class="px-8 py-2 text-center text-xs text-muted-foreground">
 		Don't have an account? <a class="text-primary underline" href="/register">Sign up.</a> <br />
 		Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
 	</p>

apps/web/src/routes/(auth)/logout/+server.ts

@@ -2,5 +2,5 @@ import { redirect } from '@sveltejs/kit';
 
 export const GET = ({ locals }: { locals: App.Locals }) => {
 	locals.pocketBase.authStore.clear();
-	throw redirect(303, '/login');
+	throw redirect(303, '/auth');
 };

apps/web/src/routes/(auth)/register/+page.server.ts

@@ -1,69 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export const actions = {
-	default: 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');
-
-		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 !== formData.get('passwordConfirm')) {
-				throw new Error('Passwords do not match');
-			}
-
-			await locals.pocketBase.collection('users').create({
-				email,
-				password,
-				name,
-				passwordConfirm: password
-			});
-
-			await locals.pocketBase.collection('users').authWithPassword(email, password);
-		} 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, '/');
-	}
-};

apps/web/src/routes/(auth)/register/+page.svelte

@@ -1,95 +0,0 @@
-<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 { cn } from '$lib/utils';
-
-	let isLoading = false;
-</script>
-
-<div class="lg:p-8">
-	<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-		<div class="flex flex-col space-y-2 text-center">
-			<h1 class="text-2xl font-semibold tracking-tight">Create your account</h1>
-			<p class="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"
-				use:enhance={() => {
-					isLoading = true;
-				}}
-			>
-				<div class="grid gap-2">
-					<div class="grid gap-1">
-						<Label class="sr-only" for="email">Name</Label>
-						<Input id="name" name="name" placeholder="Name" type="name" disabled={isLoading} />
-					</div>
-					<div class="grid gap-1">
-						<Label class="sr-only" for="email">Email</Label>
-						<Input
-							id="email"
-							name="email"
-							placeholder="name@example.com"
-							type="email"
-							autocapitalize="none"
-							autocomplete="email"
-							autocorrect="off"
-							disabled={isLoading}
-						/>
-					</div>
-					<div class="grid gap-1">
-						<Label class="sr-only" for="password">Password</Label>
-						<Input
-							id="password"
-							name="password"
-							type="password"
-							disabled={isLoading}
-							placeholder="Password"
-						/>
-					</div>
-					<div class="grid gap-1">
-						<Label class="sr-only" for="password">Confirm Password</Label>
-						<Input
-							id="password"
-							name="passwordConfirm"
-							type="password"
-							disabled={isLoading}
-							placeholder="Confirm password"
-						/>
-					</div>
-					<Button type="submit" disabled={isLoading} on:click={() => (isLoading = true)}>
-						{#if isLoading}
-							<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-						{/if}
-						Sign In
-					</Button>
-				</div>
-			</form>
-			<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 text-muted-foreground"> Or continue with </span>
-				</div>
-			</div>
-			<Button variant="outline" type="button" disabled={isLoading}>
-				{#if isLoading}
-					<Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-				{:else}
-					<Icons.microsoft class="mr-2 h-4 w-4" />
-				{/if}
-				{' '}
-				Microsoft
-			</Button>
-		</div>
-		<p class="px-8 text-center text-sm text-muted-foreground">
-			Or <a class="text-primary underline" href="/login">sign in</a> if you already have an account.<br
-			/>
-			Forgot password? <a class="text-primary underline" href="/reset-password">Reset password.</a>
-		</p>
-	</div>
-</div>

apps/web/src/routes/(dashboard)/+layout.server.ts

@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
 
 export const load = async ({ locals }: { locals: App.Locals }) => {
 	if (!locals.pocketBase.authStore.isValid) {
-		throw redirect(303, '/register');
+		throw redirect(303, '/auth');
 	}
 
 	return {};