feat: add initial skeleton for authentication in sveltekit with pocketbase

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

@@ -0,0 +1,10 @@
+import { redirect } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+
+export const load = (async ({ locals }) => {
+	if (locals.pocketBase.authStore.isValid) {
+		throw redirect(303, '/');
+	}
+
+	return {};
+}) satisfies LayoutServerLoad;

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

@@ -0,0 +1,48 @@
+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 email = formData.get('email');
+		const password = formData.get('password');
+
+		try {
+			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');
+			}
+
+			await locals.pocketBase.collection('users').authWithPassword(email, password);
+		} catch (error) {
+			console.error(error);
+
+			if (!(error instanceof Error)) {
+				return {
+					email,
+					password,
+					error: 'Unknown error occured when signing up user'
+				};
+			}
+
+			return { error: error.message, email, password };
+		}
+
+		throw redirect(303, '/');
+	}
+};

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { ActionData } from './$types';
+
+	export let form: ActionData;
+	export const data = {
+		title: 'Log in'
+	};
+</script>
+
+<h1>Log in</h1>
+
+<form method="POST">
+	<input type="email" name="email" placeholder="E-mail" value={form?.email ?? ''} />
+	<input type="password" name="password" placeholder="Password" value={form?.password ?? ''} />
+
+	<button type="submit">Log in</button>
+</form>
+
+{#if form?.error}
+	<p>{form.error}</p>
+{/if}
+
+<p>Don't have an account?</p>
+
+<a href="/signup">Sign up</a>

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

@@ -0,0 +1,65 @@
+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');
+			}
+
+			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)/signup/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { ActionData } from './$types';
+
+	export let form: ActionData;
+</script>
+
+<h1>Sign up</h1>
+
+<form method="POST">
+	<input type="text" name="name" placeholder="name" value={form?.name ?? ''} />
+	<input type="email" name="email" placeholder="E-mail" value={form?.email ?? ''} />
+	<input type="password" name="password" placeholder="Password" value={form?.password ?? ''} />
+
+	<button type="submit">Sign up</button>
+</form>
+
+{#if form?.error}
+	<p>{form.error}</p>
+{/if}
+
+<p>Already have an account?</p>
+
+<a href="/login">Log in</a>

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

@@ -0,0 +1,10 @@
+import { redirect } from '@sveltejs/kit';
+import type { LayoutServerLoad } from './$types';
+
+export const load = (async ({ locals }) => {
+	if (!locals.pocketBase.authStore.isValid) {
+		throw redirect(303, '/signup');
+	}
+
+	return {};
+}) satisfies LayoutServerLoad;

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<h1>Create a new dashboard</h1>
+
+<form method="POST">
+	<button type="submit">Create dashboard</button>
+</form>

apps/web/src/routes/+layout.svelte

@@ -1 +1,5 @@
-<script>import "../app.pcss";</script><slot></slot>
+<script>
+	import '../app.pcss';
+</script>
+
+<slot />

apps/web/src/routes/+page.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ locals }) => {
+	return {
+		authenticated: locals.pocketBase.authStore.isValid
+	};
+}) satisfies PageServerLoad;

apps/web/src/routes/+page.svelte

@@ -1,2 +1,26 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<h1>Login with SvelteKit and Pocketbase</h1>
+
+{#if data.authenticated}
+	<a href="/board/">Create a new game</a>
+{:else}
+	<div class="links">
+		<a href="/login">Log in</a>
+		<p>or</p>
+		<a href="/signup">Sign up</a>
+	</div>
+{/if}
+
+<style>
+	.links {
+		display: flex;
+		gap: 1rem;
+		align-items: center;
+		font-size: 1.5rem;
+	}
+</style>