feat: add Clerk Auth (#43)

src/app.d.ts

@@ -5,8 +5,11 @@ declare global {
 	namespace App {
 		// interface Error {}
 		interface Locals {
-			user: import('lucia').User | null;
-			session: import('lucia').Session | null;
+			auth: {
+				userId?: string;
+				orgId?: string | null;
+				sessionId?: string;
+			};
 		}
 		// interface PageData {}
 		// interface PageState {}

src/hooks.server.ts

@@ -0,0 +1,3 @@
+import { withClerkHandler } from 'clerk-sveltekit/server';
+
+export const handle = withClerkHandler();

src/lib/components/Navigation/Navbar/Navbar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { messages } from '$lib/i18n';
+	import SignOutButton from 'clerk-sveltekit/client/SignOutButton.svelte';
 
 	let { title, username }: { title: string; username: string } = $props();
 
@@ -10,6 +11,7 @@
 	<h2 class="prose prose-xl">Hestia</h2>
 	<h1 class="prose prose-2xl">{title}</h1>
 	<p class="prose prose-lg">{message}</p>
+	<SignOutButton />
 </header>
 
 <style>

src/lib/server/auth/index.ts

@@ -1,22 +1,55 @@
 import { redirect, type ServerLoadEvent } from '@sveltejs/kit';
-import dayjs from 'dayjs';
 import { prisma } from '../prisma';
+import { createClerkClient } from '@clerk/backend';
+import { CLERK_SECRET_KEY } from '$env/static/private';
+import { clerkClient } from 'clerk-sveltekit/server';
+import { logger } from '$lib/server/logger';
 
-export async function validateSession(event: ServerLoadEvent) {
-	const sessionId = event.cookies.get('auth_session');
-	if (!sessionId) {
-		redirect(302, '/login');
+const clerkSessionClient = createClerkClient({
+	secretKey: CLERK_SECRET_KEY,
+});
+
+export async function validateSession({ locals }: ServerLoadEvent) {
+	if (!locals.auth.userId || !locals.auth.sessionId) {
+		return redirect(307, '/login');
 	}
-	const session = await prisma.session.findUnique({
-		where: { id: sessionId },
-		include: { user: true },
+
+	if (!locals.auth.orgId && locals.auth.sessionId) {
+		// Sign out the user if they are not associated with an organization
+		await clerkSessionClient.sessions.revokeSession(locals.auth.sessionId);
+		return redirect(307, '/login');
+	}
+
+	const clerkUser = await clerkClient.users.getUser(locals.auth.userId);
+
+	let user = await prisma.user.findFirst({
+		where: {
+			clerkId: clerkUser.id,
+		},
 	});
-	if (!session || !session.user) {
-		redirect(302, '/login');
+
+	if (!user) {
+		if (clerkUser.emailAddresses.length === 0) {
+			logger.error('User has no email address');
+			await clerkSessionClient.sessions.revokeSession(locals.auth.sessionId);
+
+			return redirect(307, '/login');
+		}
+
+		user = await prisma.user.create({
+			data: {
+				clerkId: clerkUser.id,
+				email: clerkUser.emailAddresses[0].emailAddress,
+				name: clerkUser.fullName ?? '',
+			},
+		});
+
+		if (clerkUser.fullName === null) {
+			logger.error('User has no name');
+		}
 	}
-	const expiry = session.expiresAt;
-	if (dayjs(expiry).isBefore(dayjs())) {
-		redirect(302, '/login');
-	}
-	return session;
+
+	return {
+		user: { name: user.name },
+	};
 }

src/lib/server/lucia.ts

@@ -1,31 +0,0 @@
-import { Lucia } from 'lucia';
-import { PrismaAdapter } from '@lucia-auth/adapter-prisma';
-import { prisma } from '$lib/server/prisma';
-
-const adapter = new PrismaAdapter(prisma.session, prisma.user);
-// expect error (see next section)
-export const auth = new Lucia(adapter, {
-	sessionCookie: {
-		attributes: {
-			secure: process.env.NODE_ENV === 'production',
-		},
-	},
-	getUserAttributes: (attributes) => {
-		return {
-			email: attributes.email,
-		};
-	},
-});
-
-declare module 'lucia' {
-	interface Register {
-		Lucia: typeof Lucia;
-		DatabaseUserAttributes: DatabaseUserAttributes;
-	}
-}
-
-interface DatabaseUserAttributes {
-	email: string;
-}
-
-export type Auth = typeof auth;

src/routes/+layout.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
+	import ClerkProvider from 'clerk-sveltekit/client/ClerkProvider.svelte';
 	import { i18n } from '$lib/i18n';
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
 	import '../app.css';
+	import { PUBLIC_CLERK_PUBLISHABLE_KEY } from '$env/static/public';
+
 	let { children } = $props();
 </script>
 
 <div class="layout">
-	{@render children()}
+	<ClerkProvider publishableKey={PUBLIC_CLERK_PUBLISHABLE_KEY}>
+		{@render children()}
+	</ClerkProvider>
 </div>
 
 <ParaglideJS {i18n}>

src/routes/+page.server.ts

@@ -1,5 +1,3 @@
 import { validateSession } from '$lib/server/auth';
 
-export async function load(event) {
-	await validateSession(event);
-}
+export const load = async (event) => validateSession(event);

src/routes/app/+layout.server.ts

@@ -1,10 +1,3 @@
 import { validateSession } from '$lib/server/auth';
 
-export async function load(event) {
-	const {
-		user: { password: _, ...rest },
-	} = await validateSession(event);
-	return {
-		user: rest,
-	};
-}
+export const load = async (event) => validateSession(event);

src/routes/app/+layout.svelte

@@ -2,6 +2,8 @@
 	import { Navbar } from '$lib/components/Navigation';
 	import type { User } from '@prisma/client';
 	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+	import 'clerk-sveltekit/client';
 
 	type Props = {
 		children: Snippet;
@@ -11,6 +13,35 @@
 	};
 
 	let { children, data }: Props = $props();
+
+	let clerk;
+
+	onMount(async () => {
+		clerk = window.Clerk;
+
+		if (clerk) {
+			if (!clerk.user || clerk.user?.organizationMemberships.length === 0) {
+				console.debug('No organizations found');
+				await clerk.signOut();
+				return;
+			}
+
+			/**
+			 * Set the active organization to the first one in the list, this is temporary until we let the user choose the organization
+			 */
+			try {
+				// Set the active organization to the first one in the list
+				await clerk.setActive({
+					organization: clerk.user?.organizationMemberships[0].organization.id,
+				});
+				console.debug(
+					`Active organization set to ${clerk.user?.organizationMemberships[0].organization.id}`
+				);
+			} catch (error) {
+				console.error('Error setting active organization:', error);
+			}
+		}
+	});
 </script>
 
 <Navbar title="Svelte" username={data.user.name} />

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

@@ -1,96 +0,0 @@
-import { messages } from '$lib/i18n';
-import { logger } from '$lib/server/logger';
-import { auth } from '$lib/server/lucia.js';
-import { prisma } from '$lib/server/prisma';
-import { fail, redirect, type Actions } from '@sveltejs/kit';
-import { Argon2id } from 'oslo/password';
-import { string } from 'zod';
-
-export const actions = {
-	login: async (event) => {
-		const form = await event.request.formData();
-		const email = form.get('email');
-		if (typeof email !== 'string') {
-			return fail(400, { email: { error: messages.login_error_email_required() } });
-		}
-
-		const password = form.get('password') as string;
-		if (!password) {
-			return fail(400, { password: { error: messages.login_error_password_required() } });
-		}
-
-		const user = await prisma.user.findUnique({
-			where: {
-				email: email,
-			},
-		});
-		if (!user) {
-			logger.error(`User not found! ${email}`);
-			return fail(404, {
-				email: { value: email, error: messages.login_error_user_not_found() },
-			});
-		}
-
-		const validPassword = await new Argon2id().verify(user.password, password);
-		if (!validPassword) {
-			return fail(400, {
-				password: { error: messages.login_error_password_incorrect() },
-			});
-		}
-		const session = await auth.createSession(user.id, []);
-		const sessionCookie = auth.createSessionCookie(session.id);
-		event.cookies.set(sessionCookie.name, sessionCookie.value, {
-			path: '/',
-			maxAge: 120,
-		});
-		redirect(302, '/');
-	},
-
-	register: async (event) => {
-		const form = await event.request.formData();
-		if (!form.has('email')) {
-			return fail(400, { email: { error: messages.login_error_email_required() } });
-		}
-		const { success, data: email, error } = string().email().safeParse(form.get('email'));
-		if (!success) {
-			logger.error(error);
-			return fail(400, {
-				email: { value: email, error: messages.login_error_email_incorrect() },
-			});
-		}
-
-		const password = form.get('password');
-		if (typeof password !== 'string') {
-			return fail(400, { password: { error: messages.login_error_password_required() } });
-		}
-		const name = form.get('name');
-		if (typeof name !== 'string') {
-			return fail(400, { name: { error: messages.login_error_name_required() } });
-		}
-
-		const usersWithEmail = await prisma.user.count({ where: { email: email } });
-		if (usersWithEmail !== 0) {
-			return fail(409, {
-				email: { value: email, error: messages.login_error_email_inuse() },
-			});
-		}
-
-		const hashedPassword = await new Argon2id().hash(password);
-		const user = await prisma.user.create({
-			data: {
-				email: form.get('email') as string,
-				name: form.get('name') as string,
-				password: hashedPassword,
-			},
-		});
-
-		const session = await auth.createSession(user.id.toString(), {});
-		const sessionCookie = auth.createSessionCookie(session.id);
-		event.cookies.set(sessionCookie.name, sessionCookie.value, {
-			path: '/',
-			maxAge: 120,
-		});
-
-		redirect(303, '/');
-	},
-} satisfies Actions;

src/routes/login/+page.svelte

@@ -1,77 +1,23 @@
 <script lang="ts">
-	import { TextInput } from '$lib/components/DataInput';
-	import { Button } from '$lib/components/Actions';
-	import Tabs from '$lib/components/Navigation/Tabs';
-	import { messages } from '$lib/i18n/index.js';
 	import { fade } from 'svelte/transition';
-
-	let { form } = $props();
-
-	let tab: 0 | 1 = $state(0);
+	import SignIn from 'clerk-sveltekit/client/SignIn.svelte';
+	import { dark } from '@clerk/themes';
 </script>
 
-{#snippet userIcon()}
-	<i class="fi fi-br-envelope"></i>
-{/snippet}
-
-{#snippet passwordIcon()}
-	<i class="fi fi-br-key"></i>
-{/snippet}
-
-{#snippet nameIcon()}
-	<i class="fi fi-rr-user"></i>
-{/snippet}
-
-{#snippet alert(message: string)}
-	<div role="alert" class="alert alert-error absolute -top-20" transition:fade>
-		<i class="fi fi-bs-octagon-xmark h-6 w-6 shrink-0"></i>
-		<span>{message}</span>
-	</div>
-{/snippet}
-
-{#snippet Form(variant: 'login' | 'register')}
-	<form method="POST" action={`?/${variant}`}>
-		<div class="card-body gap-4">
-			<TextInput
-				start={userIcon}
-				placeholder={messages.login_label_email()}
-				name="email"
-				type="email"
-			/>
-			<TextInput
-				start={passwordIcon}
-				placeholder={messages.login_label_password()}
-				name="password"
-				type="password"
-			/>
-			{#if variant === 'register'}
-				<TextInput
-					start={nameIcon}
-					placeholder={messages.login_label_name()}
-					name="name"
-					fade
-				/>
-			{/if}
-		</div>
-		<div class="card-actions px-4">
-			<Button block type="submit" outline>{messages.login_button_submit()}</Button>
-		</div>
-	</form>
-{/snippet}
-
 <div class="page" transition:fade>
-	<div class="card bg-base-200 py-4 shadow-xl">
-		<div class="card-title">
-			{#if form}
-				{@render alert(Object.values(form)[0].error)}
-			{/if}
-			<Tabs
-				variant="bordered"
-				bind:selected={tab}
-				tabs={[messages.login_tab_login(), messages.login_tab_register()]}
-			/>
-		</div>
-		{@render Form(tab === 0 ? 'login' : 'register')}
+	<div>
+		<SignIn
+			appearance={{
+				baseTheme: dark,
+				variables: {
+					colorPrimary: '#FFF',
+				},
+				elements: {
+					// Remove the sign-up link
+					footerAction: { display: 'none' },
+				},
+			}}
+		/>
 	</div>
 </div>