Added auth!

src/app.d.ts

@@ -1,12 +1,9 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
 declare global {
   namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface PageState {}
-    // interface Platform {}
+    interface Locals {
+      user: import("lucia").User | null;
+      session: import("lucia").Session | null;
+    }
   }
 }
 

src/hooks.server.ts

@@ -0,0 +1,32 @@
+import { lucia } from "$lib/server/auth";
+import type { Handle } from "@sveltejs/kit";
+
+export const handle: Handle = async ({ event, resolve }) => {
+  const sessionId = event.cookies.get(lucia.sessionCookieName);
+  if (!sessionId) {
+    event.locals.user = null;
+    event.locals.session = null;
+    return resolve(event);
+  }
+
+  const { session, user } = await lucia.validateSession(sessionId);
+  if (session && session.fresh) {
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    // sveltekit types deviates from the de-facto standard
+    // you can use 'as any' too
+    event.cookies.set(sessionCookie.name, sessionCookie.value, {
+      path: ".",
+      ...sessionCookie.attributes,
+    });
+  }
+  if (!session) {
+    const sessionCookie = lucia.createBlankSessionCookie();
+    event.cookies.set(sessionCookie.name, sessionCookie.value, {
+      path: ".",
+      ...sessionCookie.attributes,
+    });
+  }
+  event.locals.user = user;
+  event.locals.session = session;
+  return resolve(event);
+};

src/lib/db/db.server.ts

@@ -1,8 +1,9 @@
 import { drizzle } from "drizzle-orm/postgres-js";
 import postgres from "postgres";
 import dotenv from "dotenv";
+import * as schema from "$lib/db/schema";
 dotenv.config();
 const { DATABASE_URL } = process.env;
 
-const client = postgres(DATABASE_URL);
-export const db = drizzle(client, {});
+const client = postgres(DATABASE_URL || ""); // Pass DATABASE_URL as a string argument
+export const db = drizzle(client, { schema });

src/lib/db/schema.ts

@@ -1,4 +1,11 @@
-import { pgTable, json, text, serial } from "drizzle-orm/pg-core";
+import {
+  pgTable,
+  text,
+  timestamp,
+  json,
+  serial,
+  varchar,
+} from "drizzle-orm/pg-core";
 
 export const featuredAdventures = pgTable("featuredAdventures", {
   id: serial("id").primaryKey(),
@@ -10,3 +17,22 @@ export const sharedAdventures = pgTable("sharedAdventures", {
   id: text("id").primaryKey(),
   data: json("data").notNull(),
 });
+
+export const userTable = pgTable("user", {
+  id: text("id").primaryKey(),
+  username: text("username").notNull(),
+  hashed_password: varchar("hashed_password").notNull(),
+});
+
+// export type SelectUser = typeof userTable.$inferSelect;
+
+export const sessionTable = pgTable("session", {
+  id: text("id").primaryKey(),
+  userId: text("user_id")
+    .notNull()
+    .references(() => userTable.id),
+  expiresAt: timestamp("expires_at", {
+    withTimezone: true,
+    mode: "date",
+  }).notNull(),
+});

src/lib/server/auth.ts

@@ -0,0 +1,38 @@
+import { DrizzlePostgreSQLAdapter } from "@lucia-auth/adapter-drizzle";
+import { Lucia } from "lucia";
+import { dev } from "$app/environment";
+import { userTable, sessionTable } from "$lib/db/schema";
+import { db } from "$lib/db/db.server";
+import { Argon2id } from "oslo/password";
+
+const adapter = new DrizzlePostgreSQLAdapter(db, sessionTable, userTable);
+
+export const lucia = new Lucia(adapter, {
+  sessionCookie: {
+    attributes: {
+      secure: !dev,
+    },
+  },
+  getUserAttributes: (attributes) => {
+    return {
+      // attributes has the type of DatabaseUserAttributes
+      username: attributes.username,
+    };
+  },
+});
+
+declare module "lucia" {
+  interface Register {
+    Lucia: typeof lucia;
+    DatabaseUserAttributes: DatabaseUserAttributes;
+  }
+}
+
+interface DatabaseUserAttributes {
+  username: string;
+}
+export interface DatabaseUser {
+  id: string;
+  username: string;
+  hashed_password: string;
+}

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

@@ -0,0 +1,76 @@
+import { lucia } from "$lib/server/auth";
+import { fail, redirect } from "@sveltejs/kit";
+import { Argon2id } from "oslo/password";
+import { db } from "$lib/db/db.server";
+
+import type { Actions, PageServerLoad } from "./$types";
+import type { DatabaseUser } from "$lib/server/auth";
+import { userTable } from "$lib/db/schema";
+import { eq } from "drizzle-orm";
+
+export const load: PageServerLoad = async (event) => {
+  if (event.locals.user) {
+    return redirect(302, "/");
+  }
+  return {};
+};
+
+export const actions: Actions = {
+  default: async (event) => {
+    const formData = await event.request.formData();
+    const username = formData.get("username");
+    const password = formData.get("password");
+
+    if (
+      typeof username !== "string" ||
+      username.length < 3 ||
+      username.length > 31 ||
+      !/^[a-z0-9_-]+$/.test(username)
+    ) {
+      return fail(400, {
+        message: "Invalid username",
+      });
+    }
+    if (
+      typeof password !== "string" ||
+      password.length < 6 ||
+      password.length > 255
+    ) {
+      return fail(400, {
+        message: "Invalid password",
+      });
+    }
+
+    const existingUser = await db
+      .select()
+      .from(userTable)
+      .where(eq(userTable.username, username))
+      .limit(1)
+      .then((results) => results[0] as unknown as DatabaseUser | undefined);
+
+    if (!existingUser) {
+      return fail(400, {
+        message: "Incorrect username or password",
+      });
+    }
+
+    const validPassword = await new Argon2id().verify(
+      existingUser.hashed_password,
+      password
+    );
+    if (!validPassword) {
+      return fail(400, {
+        message: "Incorrect username or password",
+      });
+    }
+
+    const session = await lucia.createSession(existingUser.id, {});
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    event.cookies.set(sessionCookie.name, sessionCookie.value, {
+      path: ".",
+      ...sessionCookie.attributes,
+    });
+
+    return redirect(302, "/");
+  },
+};

src/routes/login/+page.svelte

@@ -0,0 +1,13 @@
+<!-- routes/login/+page.svelte -->
+<script lang="ts">
+  import { enhance } from "$app/forms";
+</script>
+
+<h1>Sign in</h1>
+<form method="post" use:enhance>
+  <label for="username">Username</label>
+  <input name="username" id="username" /><br />
+  <label for="password">Password</label>
+  <input type="password" name="password" id="password" /><br />
+  <button>Continue</button>
+</form>

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

@@ -0,0 +1,60 @@
+// routes/signup/+page.server.ts
+import { lucia } from "$lib/server/auth";
+import { fail, redirect } from "@sveltejs/kit";
+import { generateId } from "lucia";
+import { Argon2id } from "oslo/password";
+import { db } from "$lib/db/db.server";
+
+import type { Actions } from "./$types";
+import { userTable } from "$lib/db/schema";
+
+export const actions: Actions = {
+  default: async (event) => {
+    const formData = await event.request.formData();
+    const username = formData.get("username");
+    const password = formData.get("password");
+    // username must be between 4 ~ 31 characters, and only consists of lowercase letters, 0-9, -, and _
+    // keep in mind some database (e.g. mysql) are case insensitive
+    if (
+      typeof username !== "string" ||
+      username.length < 3 ||
+      username.length > 31 ||
+      !/^[a-z0-9_-]+$/.test(username)
+    ) {
+      return fail(400, {
+        message: "Invalid username",
+      });
+    }
+    if (
+      typeof password !== "string" ||
+      password.length < 6 ||
+      password.length > 255
+    ) {
+      return fail(400, {
+        message: "Invalid password",
+      });
+    }
+
+    const userId = generateId(15);
+    const hashedPassword = await new Argon2id().hash(password);
+
+    // TODO: check if username is already used
+    await db
+      .insert(userTable)
+      .values({
+        id: userId,
+        username: username,
+        hashed_password: hashedPassword,
+      })
+      .execute();
+
+    const session = await lucia.createSession(userId, {});
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    event.cookies.set(sessionCookie.name, sessionCookie.value, {
+      path: ".",
+      ...sessionCookie.attributes,
+    });
+
+    redirect(302, "/");
+  },
+};

src/routes/signup/+page.svelte

@@ -0,0 +1,13 @@
+<!-- routes/signup/+page.svelte -->
+<script lang="ts">
+  import { enhance } from "$app/forms";
+</script>
+
+<h1>Sign up</h1>
+<form method="post" use:enhance>
+  <label for="username">Username</label>
+  <input name="username" id="username" /><br />
+  <label for="password">Password</label>
+  <input type="password" name="password" id="password" /><br />
+  <button>Continue</button>
+</form>