sophie/chat.sad.ovh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
references
This commit is contained in:
Soph :3 2026-01-02 16:18:08 +02:00
parent 7d0b833cb1
commit 70da1db833
19 changed files with 357 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
database.db
View file

Binary file not shown.

2
drizzle/0001_melted_goliath.sql Normal file
View file

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

123
drizzle/meta/0001_snapshot.json Normal file
View file

@ -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": {}
}
}

7
drizzle/meta/_journal.json
View file

@ -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
}
]
}

5
references/demo/+page.svelte
View file

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

31
references/demo/lucia/+page.server.ts
View file

@ -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;
}

12
references/demo/lucia/+page.svelte
View file

@ -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>

107
references/demo/lucia/login/+page.server.ts
View file

@ -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;
}

34
references/demo/lucia/login/+page.svelte
View file

@ -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>

1
references/hooks.server.ts → src/hooks.server.ts
View file

@ -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 {

33
src/lib/server/auth.ts
View file

@ -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)
);
}

1
src/lib/server/db/schema.ts
View file

@ -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()
});

18
src/routes/+page.server.ts Normal file
View file

@ -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 };
};

8
src/routes/+page.svelte
View file

@ -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>

1
src/routes/app/+page.svelte Normal file
View file

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

62
src/routes/login/+page.server.ts Normal file
View file

@ -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');
}
};

26
src/routes/login/+page.svelte Normal file
View file

@ -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>

66
src/routes/register/+page.server.ts Normal file
View file

@ -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');
}
};

15
src/routes/register/+page.svelte
View file

@ -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>
<Input class="mb-2" type="email" placeholder="E-mail"></Input>
<Button type="submit" formaction="?/register" class="w-full">Register</Button>
</form>
<Input class="mb-2" type="password" placeholder="Password"></Input>
<Button class="w-full">Register</Button>
<p style="color: red">{form?.message ?? ''}</p>
</div>
</div>