make login/register pages work, get rid of database.db, and remove

references

drizzle/0001_melted_goliath.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `user` ADD `email` text NOT NULL;--> statement-breakpoint
+CREATE UNIQUE INDEX `user_email_unique` ON `user` (`email`);

drizzle/meta/0001_snapshot.json

@@ -0,0 +1,123 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "8eb771ed-36ad-43c2-a76a-3c704801326a",
+  "prevId": "053c418c-34da-4776-88a4-2e048c6a4637",
+  "tables": {
+    "session": {
+      "name": "session",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "session_user_id_user_id_fk": {
+          "name": "session_user_id_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "age": {
+          "name": "age",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_username_unique": {
+          "name": "user_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        },
+        "user_email_unique": {
+          "name": "user_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/_journal.json

@@ -8,6 +8,13 @@
       "when": 1767358712855,
       "tag": "0000_hard_thaddeus_ross",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1767361487418,
+      "tag": "0001_melted_goliath",
+      "breakpoints": true
     }
   ]
 }

references/demo/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { resolve } from '$app/paths';
-</script>
-
-<a href={resolve('/demo/lucia')}>lucia</a>

references/demo/lucia/+page.server.ts

@@ -1,31 +0,0 @@
-import * as auth from '$lib/server/auth';
-import { fail, redirect } from '@sveltejs/kit';
-import { getRequestEvent } from '$app/server';
-import type { Actions, PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async () => {
-	const user = requireLogin();
-	return { user };
-};
-
-export const actions: Actions = {
-	logout: async (event) => {
-		if (!event.locals.session) {
-			return fail(401);
-		}
-		await auth.invalidateSession(event.locals.session.id);
-		auth.deleteSessionTokenCookie(event);
-
-		return redirect(302, '/demo/lucia/login');
-	}
-};
-
-function requireLogin() {
-	const { locals } = getRequestEvent();
-
-	if (!locals.user) {
-		return redirect(302, '/demo/lucia/login');
-	}
-
-	return locals.user;
-}

references/demo/lucia/+page.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import type { PageServerData } from './$types';
-
-	let { data }: { data: PageServerData } = $props();
-</script>
-
-<h1>Hi, {data.user.username}!</h1>
-<p>Your user ID is {data.user.id}.</p>
-<form method="post" action="?/logout" use:enhance>
-	<button>Sign out</button>
-</form>

references/demo/lucia/login/+page.server.ts

@@ -1,107 +0,0 @@
-import { hash, verify } from '@node-rs/argon2';
-import { encodeBase32LowerCase } from '@oslojs/encoding';
-import { fail, redirect } from '@sveltejs/kit';
-import { eq } from 'drizzle-orm';
-import * as auth from '$lib/server/auth';
-import { db } from '$lib/server/db';
-import * as table from '$lib/server/db/schema';
-import type { Actions, PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async (event) => {
-	if (event.locals.user) {
-		return redirect(302, '/demo/lucia');
-	}
-	return {};
-};
-
-export const actions: Actions = {
-	login: async (event) => {
-		const formData = await event.request.formData();
-		const username = formData.get('username');
-		const password = formData.get('password');
-
-		if (!validateUsername(username)) {
-			return fail(400, {
-				message: 'Invalid username (min 3, max 31 characters, alphanumeric only)'
-			});
-		}
-		if (!validatePassword(password)) {
-			return fail(400, { message: 'Invalid password (min 6, max 255 characters)' });
-		}
-
-		const results = await db.select().from(table.user).where(eq(table.user.username, username));
-
-		const existingUser = results.at(0);
-		if (!existingUser) {
-			return fail(400, { message: 'Incorrect username or password' });
-		}
-
-		const validPassword = await verify(existingUser.passwordHash, password, {
-			memoryCost: 19456,
-			timeCost: 2,
-			outputLen: 32,
-			parallelism: 1
-		});
-		if (!validPassword) {
-			return fail(400, { message: 'Incorrect username or password' });
-		}
-
-		const sessionToken = auth.generateSessionToken();
-		const session = await auth.createSession(sessionToken, existingUser.id);
-		auth.setSessionTokenCookie(event, sessionToken, session.expiresAt);
-
-		return redirect(302, '/demo/lucia');
-	},
-	register: async (event) => {
-		const formData = await event.request.formData();
-		const username = formData.get('username');
-		const password = formData.get('password');
-
-		if (!validateUsername(username)) {
-			return fail(400, { message: 'Invalid username' });
-		}
-		if (!validatePassword(password)) {
-			return fail(400, { message: 'Invalid password' });
-		}
-
-		const userId = generateUserId();
-		const passwordHash = await hash(password, {
-			// recommended minimum parameters
-			memoryCost: 19456,
-			timeCost: 2,
-			outputLen: 32,
-			parallelism: 1
-		});
-
-		try {
-			await db.insert(table.user).values({ id: userId, username, passwordHash });
-
-			const sessionToken = auth.generateSessionToken();
-			const session = await auth.createSession(sessionToken, userId);
-			auth.setSessionTokenCookie(event, sessionToken, session.expiresAt);
-		} catch {
-			return fail(500, { message: 'An error has occurred' });
-		}
-		return redirect(302, '/demo/lucia');
-	}
-};
-
-function generateUserId() {
-	// ID with 120 bits of entropy, or about the same as UUID v4.
-	const bytes = crypto.getRandomValues(new Uint8Array(15));
-	const id = encodeBase32LowerCase(bytes);
-	return id;
-}
-
-function validateUsername(username: unknown): username is string {
-	return (
-		typeof username === 'string' &&
-		username.length >= 3 &&
-		username.length <= 31 &&
-		/^[a-z0-9_-]+$/.test(username)
-	);
-}
-
-function validatePassword(password: unknown): password is string {
-	return typeof password === 'string' && password.length >= 6 && password.length <= 255;
-}

references/demo/lucia/login/+page.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-	import type { ActionData } from './$types';
-
-	let { form }: { form: ActionData } = $props();
-</script>
-
-<h1>Login/Register</h1>
-<form method="post" action="?/login" use:enhance>
-	<label>
-		Username
-		<input
-			name="username"
-			class="mt-1 rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-		/>
-	</label>
-	<label>
-		Password
-		<input
-			type="password"
-			name="password"
-			class="mt-1 rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-		/>
-	</label>
-	<button class="rounded-md bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700"
-		>Login</button
-	>
-	<button
-		formaction="?/register"
-		class="rounded-md bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700"
-		>Register</button
-	>
-</form>
-<p style="color: red">{form?.message ?? ''}</p>

src/hooks.server.ts

@@ -12,7 +12,6 @@ const handleAuth: Handle = async ({ event, resolve }) => {
 	}
 
 	const { session, user } = await auth.validateSessionToken(sessionToken);
-
 	if (session) {
 		auth.setSessionTokenCookie(event, sessionToken, session.expiresAt);
 	} else {

src/lib/server/auth.ts

@@ -1,7 +1,7 @@
 import type { RequestEvent } from '@sveltejs/kit';
 import { eq } from 'drizzle-orm';
 import { sha256 } from '@oslojs/crypto/sha2';
-import { encodeBase64url, encodeHexLowerCase } from '@oslojs/encoding';
+import { encodeBase32LowerCase, encodeBase64url, encodeHexLowerCase } from '@oslojs/encoding';
 import { db } from '$lib/server/db';
 import * as table from '$lib/server/db/schema';
 
@@ -79,3 +79,34 @@ export function deleteSessionTokenCookie(event: RequestEvent) {
 		path: '/'
 	});
 }
+
+
+export function generateUserId() {
+	// ID with 120 bits of entropy, or about the same as UUID v4.
+	const bytes = crypto.getRandomValues(new Uint8Array(15));
+	const id = encodeBase32LowerCase(bytes);
+	return id;
+}
+
+export function validateUsername(username: unknown): username is string {
+	return (
+		typeof username === 'string' &&
+		username.length >= 3 &&
+		username.length <= 31 &&
+		/^[a-z0-9_-]+$/.test(username)
+	);
+}
+
+export function validatePassword(password: unknown): password is string {
+	return typeof password === 'string' && password.length >= 6 && password.length <= 255;
+}
+
+
+export function validateEmail(email: unknown): email is string {
+	return (
+		typeof email === 'string' &&
+		email.length >= 5 &&
+		email.length <= 254 &&
+		/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i.test(email)
+	);
+}

src/lib/server/db/schema.ts

@@ -4,6 +4,7 @@ export const user = sqliteTable('user', {
 	id: text('id').primaryKey(),
 	age: integer('age'),
 	username: text('username').notNull().unique(),
+	email: text('email').notNull().unique(),
 	passwordHash: text('password_hash').notNull()
 });
 

src/routes/+page.server.ts

@@ -0,0 +1,18 @@
+import * as auth from '$lib/server/auth';
+import { fail, redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+  if (event.request.url.endsWith("/?logout")) {
+    if (!event.locals.session) {
+      return fail(401);
+    }
+
+    await auth.invalidateSession(event.locals.session.id);
+    auth.deleteSessionTokenCookie(event);
+
+    return redirect(302, '/login');
+  }
+
+  return { user: event.locals.user };
+};

src/routes/+page.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import Title from "$lib/components/extra/Title.svelte";
 	import Button from "$lib/components/ui/button/button.svelte";
+	import type { PageServerData } from './$types';
+
+	let { data }: { data: PageServerData } = $props();
 </script>
 
 <div class="p-6 md:w-1/2">
@@ -30,6 +33,11 @@
     </div>
 
     <div class="flex flex-col gap-3 w-[calc(80%)]">
+        {#if data.user?.id}
+            <Button href='/app'>Enter</Button>
+            <Button href='/?logout'>Log out</Button>
+        {:else}
             <Button href='/login'>Log in</Button> <Button href='/register'>Register</Button>
+        {/if}
     </div>
 </div>

src/routes/app/+page.svelte

@@ -0,0 +1 @@
+<h1>nothing here, yet!</h1>

src/routes/login/+page.server.ts

@@ -0,0 +1,62 @@
+import { verify } from '@node-rs/argon2';
+import { fail, redirect } from '@sveltejs/kit';
+import { eq } from 'drizzle-orm';
+import * as auth from '$lib/server/auth';
+import { db } from '$lib/server/db';
+import * as table from '$lib/server/db/schema';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	if (event.locals.user) {
+		return redirect(302, '/demo/lucia');
+	}
+	return {};
+};
+
+export const actions: Actions = {
+	login: async (event) => {
+		const formData = await event.request.formData();
+		const username = formData.get('username');
+		const password = formData.get('password');
+
+    let username_is_email = false;
+
+		if (!auth.validateUsername(username)) {
+      if (auth.validateEmail(username)) {
+        username_is_email = true;
+      } else {
+       	return fail(400, {
+  				message: 'Invalid username (min 3, max 31 characters, alphanumeric only)'
+  			});
+      }
+		}
+		if (!auth.validatePassword(password)) {
+			return fail(400, { message: 'Invalid password (min 6, max 255 characters)' });
+		}
+
+		const results = await db.select()
+		  .from(table.user)
+		  .where(username_is_email ? eq(table.user.email, username) : eq(table.user.username, username));
+
+		const existingUser = results.at(0);
+		if (!existingUser) {
+			return fail(400, { message: 'Incorrect username or password' });
+		}
+
+		const validPassword = await verify(existingUser.passwordHash, password, {
+			memoryCost: 19456,
+			timeCost: 2,
+			outputLen: 32,
+			parallelism: 1
+		});
+		if (!validPassword) {
+			return fail(400, { message: 'Incorrect username or password' });
+		}
+
+		const sessionToken = auth.generateSessionToken();
+		const session = await auth.createSession(sessionToken, existingUser.id);
+		auth.setSessionTokenCookie(event, sessionToken, session.expiresAt);
+
+		return redirect(302, '/app');
+	}
+};

src/routes/login/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Title from "$lib/components/extra/Title.svelte";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import Input from "$lib/components/ui/input/input.svelte";
+	import type { ActionData } from './$types';
+
+	let { form }: { form: ActionData } = $props();
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center gap-2">
+    <div class='w-1/2 p-2 bg-secondary rounded-md '>
+        <div class="text-center pb-2">
+            <Title size="2xl"></Title>
+        </div>
+        <form method="post" action="?/login">
+            <Input name="username" class="mb-2" type="text" placeholder="Username or E-mail"></Input>
+            <Input name="password" class="mb-2" type="password" placeholder="Password"></Input>
+
+            <Button type="submit" formaction="?/login" class="w-full">Login</Button>
+        </form>
+
+       	<p style="color: red">{form?.message ?? ''}</p>
+
+
+    </div>
+</div>

src/routes/register/+page.server.ts

@@ -0,0 +1,66 @@
+import { hash } from '@node-rs/argon2';
+import { fail, redirect } from '@sveltejs/kit';
+import * as auth from '$lib/server/auth';
+import { db } from '$lib/server/db';
+import * as table from '$lib/server/db/schema';
+import type { Actions, PageServerLoad } from './$types';
+import { or } from 'drizzle-orm';
+import { eq } from 'drizzle-orm';
+
+export const load: PageServerLoad = async (event) => {
+	if (event.locals.user) {
+		return redirect(302, '/demo/lucia');
+	}
+	return {};
+};
+
+export const actions: Actions = {
+	register: async (event) => {
+		const formData = await event.request.formData();
+		const username = formData.get('username');
+		const email = formData.get('email');
+		const password = formData.get('password');
+
+		if (!auth.validateUsername(username)) {
+			return fail(400, { message: 'Invalid username' });
+		}
+
+		if(!auth.validateEmail(email)) {
+  		return fail(400, { message: 'Invalid email' });
+		}
+
+		if (!auth.validatePassword(password)) {
+			return fail(400, { message: 'Invalid password' });
+		}
+
+		const userId = auth.generateUserId();
+		const passwordHash = await hash(password, {
+			// recommended minimum parameters
+			memoryCost: 19456,
+			timeCost: 2,
+			outputLen: 32,
+			parallelism: 1
+		});
+		const results = await db.select()
+		  .from(table.user)
+		  .where(or(eq(table.user.email, email),
+				eq(table.user.username, username)));
+
+		const existingUser = results.at(0);
+		if (existingUser) {
+			return fail(400, { message: 'Username or email already registered!' });
+		}
+
+		try {
+			await db.insert(table.user)
+			  .values({ id: userId, email, username, passwordHash });
+
+			const sessionToken = auth.generateSessionToken();
+			const session = await auth.createSession(sessionToken, userId);
+			auth.setSessionTokenCookie(event, sessionToken, session.expiresAt);
+		} catch(e) {
+			return fail(500, { message: 'An error has occurred' });
+		}
+		return redirect(302, '/app');
+	}
+};

src/routes/register/+page.svelte

@@ -2,6 +2,9 @@
 	import Title from "$lib/components/extra/Title.svelte";
 	import Button from "$lib/components/ui/button/button.svelte";
 	import Input from "$lib/components/ui/input/input.svelte";
+	import type { ActionData } from './$types';
+
+	let { form }: { form: ActionData } = $props();
 </script>
 
 <div class="flex min-h-screen flex-col items-center justify-center gap-2">
@@ -9,12 +12,14 @@
         <div class="text-center pb-2">
             <Title size="2xl"></Title>
         </div>
+        <form method="post" action="?/register">
+            <Input name="username" class="mb-2" type="text" placeholder="Username"></Input>
+            <Input name="email" class="mb-2" type="email" placeholder="E-mail"></Input>
+            <Input name="password" class="mb-2" type="password" placeholder="Password"></Input>
 
-        <Input class="mb-2" type="text" placeholder="Username"></Input>
+            <Button type="submit" formaction="?/register" class="w-full">Register</Button>
-        <Input class="mb-2" type="email" placeholder="E-mail"></Input>
+        </form>
 
-        <Input class="mb-2" type="password" placeholder="Password"></Input>
+       	<p style="color: red">{form?.message ?? ''}</p>
-
-        <Button class="w-full">Register</Button>
     </div>
 </div>