Login flow (#193)

* replace EthicsModal by LoginModal and start binding auth logic

* start implementing login modal + give a try to

@auth

/sveltekit

using Github oauth as a test

* start custom auth implementation instead of auth.js for consistency with moon-landing

* fetch user data from provider

* add migration from anonymous to user + bind frontend

* add missing auth secret + only migrate conversations for pre-existing users

* remove email scope as it's not needed

Co-authored-by: Eliott C. <[email protected]>

* no need to define .well-known path

Co-authored-by: Eliott C. <[email protected]>

* use env var for hf hub website url

* move sessionId to signature on csrf token exchange

* remove ethic modal check and set default settings on new users

* anonymous users can read only + modal on write tries

* refresh session cookie when existing user signin again rather than use the old one

* allow users to keep using the app without loging-in if env var is not present

* typo

* handle denied login

* do not use a form action for login as there is nothing post-ed

* use requiresUser instead of env var to define login modal or not

* move back to a form action for login so user can't be linked to /login directly

* show login modal even for pre-existing users

* fix logic of account creation/updates

* settings insertOne instead of updateOne

* fix missing userId to settings creation

* fix missing updatedAt when updating settings of pre-existing users

* show login modal for everyone + add comments

* fix login modal condition for both required/not required login

* 🔨

* bring back missing form values in login modal

* refactor default settings spread around to a constant

* missing default settings

* typo

* rename a bunch of things to remove SSO references

* always migrate conversations

* remove unneeded sha256 Node specific function, replace with browser crypto API

* fix typings

* Update src/lib/components/LoginModal.svelte

* use authCondition() in callback

* add logout

* 🐛 Fix signout

cc @Grsmto, because "path" of the cookie should be "/"

* fixup! 🐛 Fix signout

* sign out button ui

* add hf logo in the button

---------

Co-authored-by: Eliott C. <[email protected]>
Co-authored-by: Victor Mustar <[email protected]>

.env

@@ -7,8 +7,9 @@ COOKIE_NAME=hf-chat
 HF_ACCESS_TOKEN=#hf_<token> from from https://huggingface.co/settings/token
 
 # Parameters to enable "Sign in with HF"
-HF_CLIENT_ID=
-HF_CLIENT_SECRET=
+OPENID_CLIENT_ID=
+OPENID_CLIENT_SECRET=
+OPENID_PROVIDER_URL=https://huggingface.co
 
 # 'name', 'userMessageToken', 'assistantMessageToken' are required
 MODELS=`[

package-lock.json

@@ -17,6 +17,7 @@
 				"marked": "^4.3.0",
 				"mongodb": "^5.3.0",
 				"nanoid": "^4.0.2",
+				"openid-client": "^5.4.2",
 				"parquetjs": "^0.11.2",
 				"postcss": "^8.4.21",
 				"tailwind-scrollbar": "^3.0.0",
@@ -2485,6 +2486,14 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/jose": {
+			"version": "4.14.4",
+			"resolved": "https://registry.npmjs.org/jose/-/jose-4.14.4.tgz",
+			"integrity": "sha512-j8GhLiKmUAh+dsFXlX1aJCbt5KMibuKb+d7j1JaOJG6s2UjX1PQlW+OKB/sD4a/5ZYF4RcmYmLSndOoU3Lt/3g==",
+			"funding": {
+				"url": "https://github.com/sponsors/panva"
+			}
+		},
 		"node_modules/js-sdsl": {
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz",
@@ -2615,7 +2624,6 @@
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
 			"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-			"dev": true,
 			"dependencies": {
 				"yallist": "^4.0.0"
 			},
@@ -2916,6 +2924,14 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/oidc-token-hash": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz",
+			"integrity": "sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==",
+			"engines": {
+				"node": "^10.13.0 || >=12.0.0"
+			}
+		},
 		"node_modules/once": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2939,6 +2955,28 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/openid-client": {
+			"version": "5.4.2",
+			"resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.4.2.tgz",
+			"integrity": "sha512-lIhsdPvJ2RneBm3nGBBhQchpe3Uka//xf7WPHTIglery8gnckvW7Bd9IaQzekzXJvWthCMyi/xVEyGW0RFPytw==",
+			"dependencies": {
+				"jose": "^4.14.1",
+				"lru-cache": "^6.0.0",
+				"object-hash": "^2.2.0",
+				"oidc-token-hash": "^5.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/panva"
+			}
+		},
+		"node_modules/openid-client/node_modules/object-hash": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+			"integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/optionator": {
 			"version": "0.9.1",
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -4458,8 +4496,7 @@
 		"node_modules/yallist": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-			"dev": true
+			"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
 		},
 		"node_modules/yaml": {
 			"version": "1.10.2",

package.json

@@ -36,8 +36,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@huggingface/inference": "^2.2.0",
 		"@huggingface/hub": "^0.5.1",
+		"@huggingface/inference": "^2.2.0",
 		"autoprefixer": "^10.4.14",
 		"date-fns": "^2.29.3",
 		"dotenv": "^16.0.3",
@@ -45,6 +45,7 @@
 		"marked": "^4.3.0",
 		"mongodb": "^5.3.0",
 		"nanoid": "^4.0.2",
+		"openid-client": "^5.4.2",
 		"parquetjs": "^0.11.2",
 		"postcss": "^8.4.21",
 		"tailwind-scrollbar": "^3.0.0",

src/app.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="@sveltejs/kit" />
 /// <reference types="unplugin-icons/types/svelte" />
 
-import type { ObjectId } from "mongodb";
+import type { User } from "$lib/types/User";
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
@@ -10,7 +10,7 @@ declare global {
 		// interface Error {}
 		interface Locals {
 			sessionId: string;
-			userId?: ObjectId;
+			user?: User;
 		}
 		// interface PageData {}
 		// interface Platform {}

src/hooks.server.ts

@@ -1,14 +1,13 @@
-import { dev } from "$app/environment";
 import { COOKIE_NAME } from "$env/static/private";
 import type { Handle } from "@sveltejs/kit";
 import {
 	PUBLIC_GOOGLE_ANALYTICS_ID,
 	PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID,
 } from "$env/static/public";
-import { addYears } from "date-fns";
 import { collections } from "$lib/server/database";
 import { base } from "$app/paths";
-import { requiresUser } from "$lib/server/auth";
+import { refreshSessionCookie, requiresUser } from "$lib/server/auth";
+import { ERROR_MESSAGES } from "$lib/stores/errors";
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const token = event.cookies.get(COOKIE_NAME);
@@ -18,10 +17,11 @@ export const handle: Handle = async ({ event, resolve }) => {
 	const user = await collections.users.findOne({ sessionId: event.locals.sessionId });
 
 	if (user) {
-		event.locals.userId = user._id;
+		event.locals.user = user;
 	}
 
 	if (
+		!event.url.pathname.startsWith(`${base}/login`) &&
 		!event.url.pathname.startsWith(`${base}/admin`) &&
 		!["GET", "OPTIONS", "HEAD"].includes(event.request.method)
 	) {
@@ -31,9 +31,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 		if (!user && requiresUser) {
 			return new Response(
-				sendJson
-					? JSON.stringify({ error: "You need to be logged in first" })
-					: "You need to be logged in first",
+				sendJson ? JSON.stringify({ error: ERROR_MESSAGES.authOnly }) : ERROR_MESSAGES.authOnly,
 				{
 					status: 401,
 					headers: {
@@ -43,7 +41,9 @@ export const handle: Handle = async ({ event, resolve }) => {
 			);
 		}
 
-		if (!event.url.pathname.startsWith(`${base}/settings`)) {
+		// if login is not required and the call is not from /settings, we check if the user has accepted the ethics modal first.
+		// If login is required, `ethicsModalAcceptedAt` is already true at this point, so do not pass this condition. This saves a DB call.
+		if (!requiresUser && !event.url.pathname.startsWith(`${base}/settings`)) {
 			const hasAcceptedEthicsModal = await collections.settings.countDocuments({
 				sessionId: event.locals.sessionId,
 				ethicsModalAcceptedAt: { $exists: true },
@@ -65,15 +65,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 		}
 	}
 
-	// Refresh cookie expiration date
-	event.cookies.set(COOKIE_NAME, event.locals.sessionId, {
-		path: "/",
-		// So that it works inside the space's iframe
-		sameSite: dev ? "lax" : "none",
-		secure: !dev,
-		httpOnly: true,
-		expires: addYears(new Date(), 1),
-	});
+	refreshSessionCookie(event.cookies, event.locals.sessionId);
 
 	let replaced = false;
 

src/lib/components/{EthicsModal.svelte → LoginModal.svelte}

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { enhance } from "$app/forms";
 	import { base } from "$app/paths";
+	import { page } from "$app/stores";
 	import { PUBLIC_VERSION } from "$env/static/public";
 	import Logo from "$lib/components/icons/Logo.svelte";
+	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
 	import type { LayoutData } from "../../routes/$types";
 
@@ -31,17 +33,31 @@
 		<p class="px-2 text-sm text-gray-500">
 			Your conversations will be shared with model authors unless you disable it from your settings.
 		</p>
-		<form action="{base}/settings" use:enhance method="POST">
-			<input type="hidden" name="ethicsModalAccepted" value={true} />
-			{#each Object.entries(settings) as [key, val]}
-				<input type="hidden" name={key} value={val} />
-			{/each}
-			<button
-				type="submit"
-				class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
-			>
-				Start chatting
-			</button>
+		<form
+			action="{base}/{$page.data.requiresLogin ? 'login' : 'settings'}"
+			use:enhance
+			method="POST"
+		>
+			{#if $page.data.requiresLogin}
+				<button
+					type="submit"
+					class="mt-2 flex items-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
+				>
+					Sign in with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
+				</button>
+				<p class="mt-2 px-2 text-sm text-gray-500">to start chatting right away</p>
+			{:else}
+				<input type="hidden" name="ethicsModalAccepted" value={true} />
+				{#each Object.entries(settings) as [key, val]}
+					<input type="hidden" name={key} value={val} />
+				{/each}
+				<button
+					type="submit"
+					class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
+				>
+					Start chatting
+				</button>
+			{/if}
 		</form>
 	</div>
 </Modal>

src/lib/components/NavMenu.svelte

@@ -10,12 +10,14 @@
 	const dispatch = createEventDispatcher<{
 		shareConversation: { id: string; title: string };
 		clickSettings: void;
+		clickLogout: void;
 	}>();
 
 	export let conversations: Array<{
 		id: string;
 		title: string;
 	}> = [];
+	export let user: { username: string } | undefined;
 </script>
 
 <div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
@@ -40,17 +42,34 @@
 <div
 	class="mt-0.5 flex flex-col gap-1 rounded-r-xl bg-gradient-to-l from-gray-50 p-3 text-sm dark:from-gray-800/30"
 >
+	{#if user?.username}
+		<form
+			action="{base}/logout"
+			method="post"
+			class="group flex items-center gap-1.5 rounded-lg pl-3 pr-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+		>
+			<span class="flex h-9 flex-none items-center gap-1.5 pr-2 text-gray-500 dark:text-gray-400"
+				>{user?.username}</span
+			>
+			<button
+				type="submit"
+				class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
+			>
+				Sign Out
+			</button>
+		</form>
+	{/if}
 	<button
 		on:click={switchTheme}
 		type="button"
-		class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 	>
 		Theme
 	</button>
 	<button
 		on:click={() => dispatch("clickSettings")}
 		type="button"
-		class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 	>
 		Settings
 	</button>
@@ -58,13 +77,13 @@
 		href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
 		target="_blank"
 		rel="noreferrer"
-		class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 	>
 		Feedback
 	</a>
 	<a
 		href="{base}/privacy"
-		class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 	>
 		About & Privacy
 	</a>

src/lib/components/icons/LogoHuggingFaceBorderless.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	fill="none"
+	viewBox="0 0 95 88"
+>
+	<path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" />
+	<path
+		fill="#FF9D0B"
+		d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"
+	/>
+	<path
+		fill="#3A3B45"
+		d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32ZM46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"
+	/>
+	<mask id="a" width="27" height="16" x="33" y="41" maskUnits="userSpaceOnUse">
+		<path
+			fill="#fff"
+			d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"
+		/>
+	</mask>
+	<g mask="url(#a)">
+		<path
+			fill="#F94040"
+			d="M47.21 66.5a8.67 8.67 0 0 0 2.65-16.94c-.84-.26-1.73 2.6-2.65 2.6-.86 0-1.7-2.88-2.48-2.65a8.68 8.68 0 0 0 2.48 16.99Z"
+		/>
+	</g>
+	<path
+		fill="#FF9D0B"
+		d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"
+	/>
+	<path
+		fill="#FF9D0B"
+		d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"
+	/>
+	<path
+		fill="#FFD21E"
+		d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"
+	/>
+</svg>

src/lib/server/auth.ts

@@ -1,9 +1,111 @@
-import { HF_CLIENT_ID, HF_CLIENT_SECRET } from "$env/static/private";
+import { Issuer, BaseClient, type UserinfoResponse, TokenSet } from "openid-client";
+import { addDays, addYears } from "date-fns";
+import {
+	COOKIE_NAME,
+	OPENID_CLIENT_ID,
+	OPENID_CLIENT_SECRET,
+	OPENID_PROVIDER_URL,
+} from "$env/static/private";
+import { PUBLIC_ORIGIN } from "$env/static/public";
+import { sha256 } from "$lib/utils/sha256";
+import { z } from "zod";
+import { base } from "$app/paths";
+import { dev } from "$app/environment";
+import type { Cookies } from "@sveltejs/kit";
 
-export const requiresUser = !!HF_CLIENT_ID && !!HF_CLIENT_SECRET;
+export interface OIDCSettings {
+	redirectURI: string;
+}
+
+export interface OIDCUserInfo {
+	token: TokenSet;
+	userData: UserinfoResponse;
+}
+
+export const requiresUser = !!OPENID_CLIENT_ID && !!OPENID_CLIENT_SECRET;
+
+export function refreshSessionCookie(cookies: Cookies, sessionId: string) {
+	cookies.set(COOKIE_NAME, sessionId, {
+		path: "/",
+		// So that it works inside the space's iframe
+		sameSite: dev ? "lax" : "none",
+		secure: !dev,
+		httpOnly: true,
+		expires: addYears(new Date(), 1),
+	});
+}
+
+export const getRedirectURI = (url: URL) => `${PUBLIC_ORIGIN || url.origin}${base}/login/callback`;
+
+export const OIDC_SCOPES = "openid profile";
 
 export const authCondition = (locals: App.Locals) => {
-	return locals.userId
-		? { userId: locals.userId }
+	return locals.user
+		? { userId: locals.user._id }
 		: { sessionId: locals.sessionId, userId: { $exists: false } };
 };
+
+/**
+ * Generates a CSRF token using the user sessionId. Note that we don't need a secret because sessionId is enough.
+ */
+export async function generateCsrfToken(sessionId: string): Promise<string> {
+	const data = { expiration: addDays(new Date(), 1).getTime() };
+
+	return Buffer.from(
+		JSON.stringify({
+			data,
+			signature: await sha256(JSON.stringify(data) + "##" + sessionId),
+		})
+	).toString("base64");
+}
+
+async function getOIDCClient(settings: OIDCSettings): Promise<BaseClient> {
+	const issuer = await Issuer.discover(OPENID_PROVIDER_URL);
+	return new issuer.Client({
+		client_id: OPENID_CLIENT_ID,
+		client_secret: OPENID_CLIENT_SECRET,
+		redirect_uris: [settings.redirectURI],
+		response_types: ["code"],
+	});
+}
+
+export async function getOIDCAuthorizationUrl(
+	settings: OIDCSettings,
+	params: { sessionId: string }
+): Promise<string> {
+	const client = await getOIDCClient(settings);
+	const csrfToken = await generateCsrfToken(params.sessionId);
+	const url = client.authorizationUrl({
+		scope: OIDC_SCOPES,
+		state: csrfToken,
+	});
+
+	return url;
+}
+
+export async function getOIDCUserData(settings: OIDCSettings, code: string): Promise<OIDCUserInfo> {
+	const client = await getOIDCClient(settings);
+	const token = await client.callback(settings.redirectURI, { code });
+	const userData = await client.userinfo(token);
+
+	return { token, userData };
+}
+
+export async function validateCsrfToken(token: string, sessionId: string) {
+	try {
+		const { data, signature } = z
+			.object({
+				data: z.object({
+					expiration: z.number().int(),
+				}),
+				signature: z.string().length(64),
+			})
+			.parse(JSON.parse(token));
+		const reconstructSign = await sha256(JSON.stringify(data) + "##" + sessionId);
+
+		return data.expiration > Date.now() && signature === reconstructSign;
+	} catch (e) {
+		console.error(e);
+		return false;
+	}
+}

src/lib/stores/errors.ts

@@ -2,6 +2,7 @@ import { writable } from "svelte/store";
 
 export const ERROR_MESSAGES = {
 	default: "Oops, something went wrong.",
+	authOnly: "You have to be logged in.",
 };
 
 export const error = writable<string | null>(null);

src/lib/types/Settings.ts

@@ -1,3 +1,4 @@
+import { defaultModel } from "$lib/server/models";
 import type { Timestamps } from "./Timestamps";
 import type { User } from "./User";
 
@@ -14,3 +15,9 @@ export interface Settings extends Timestamps {
 	ethicsModalAcceptedAt: Date | null;
 	activeModel: string;
 }
+
+// TODO: move this to a constant file along with other constants
+export const DEFAULT_SETTINGS = {
+	shareConversationsWithModelAuthors: true,
+	activeModel: defaultModel.id,
+};

src/lib/types/User.ts

@@ -10,5 +10,5 @@ export interface User extends Timestamps {
 	hfUserId: string;
 
 	// Session identifier, stored in the cookie
-	sessionId?: string;
+	sessionId: string;
 }

src/lib/utils/sha256.ts

@@ -1,3 +1,5 @@
+import * as crypto from "crypto";
+
 export async function sha256(input: string): Promise<string> {
 	const utf8 = new TextEncoder().encode(input);
 	const hashBuffer = await crypto.subtle.digest("SHA-256", utf8);

src/routes/+layout.server.ts

@@ -4,7 +4,8 @@ import { collections } from "$lib/server/database";
 import type { Conversation } from "$lib/types/Conversation";
 import { UrlDependency } from "$lib/types/UrlDependency";
 import { defaultModel, models, oldModels, validateModel } from "$lib/server/models";
-import { authCondition } from "$lib/server/auth";
+import { authCondition, requiresUser } from "$lib/server/auth";
+import { DEFAULT_SETTINGS } from "$lib/types/Settings";
 
 export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 	const { conversations } = collections;
@@ -54,9 +55,11 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 			}))
 			.toArray(),
 		settings: {
-			shareConversationsWithModelAuthors: settings?.shareConversationsWithModelAuthors ?? true,
+			shareConversationsWithModelAuthors:
+				settings?.shareConversationsWithModelAuthors ??
+				DEFAULT_SETTINGS.shareConversationsWithModelAuthors,
 			ethicsModalAcceptedAt: settings?.ethicsModalAcceptedAt ?? null,
-			activeModel: settings?.activeModel ?? defaultModel.id,
+			activeModel: settings?.activeModel ?? DEFAULT_SETTINGS.activeModel,
 		},
 		models: models.map((model) => ({
 			id: model.id,
@@ -69,5 +72,7 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 			parameters: model.parameters,
 		})),
 		oldModels,
+		user: locals.user && { username: locals.user.username, avatarUrl: locals.user.avatarUrl },
+		requiresLogin: requiresUser,
 	};
 };

src/routes/+layout.svelte

@@ -13,8 +13,8 @@
 	import MobileNav from "$lib/components/MobileNav.svelte";
 	import NavMenu from "$lib/components/NavMenu.svelte";
 	import Toast from "$lib/components/Toast.svelte";
-	import EthicsModal from "$lib/components/EthicsModal.svelte";
 	import SettingsModal from "$lib/components/SettingsModal.svelte";
+	import LoginModal from "$lib/components/LoginModal.svelte";
 
 	export let data;
 
@@ -113,6 +113,7 @@
 	>
 		<NavMenu
 			conversations={data.conversations}
+			user={data.user}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 			on:clickSettings={() => (isSettingsOpen = true)}
@@ -122,6 +123,7 @@
 	<nav class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] max-md:hidden">
 		<NavMenu
 			conversations={data.conversations}
+			user={data.user}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 			on:clickSettings={() => (isSettingsOpen = true)}
@@ -134,8 +136,8 @@
 	{#if isSettingsOpen}
 		<SettingsModal on:close={() => (isSettingsOpen = false)} settings={data.settings} />
 	{/if}
-	{#if !data.settings.ethicsModalAcceptedAt}
-		<EthicsModal settings={data.settings} />
+	{#if data.requiresLogin ? !data.user : !data.settings.ethicsModalAcceptedAt}
+		<LoginModal settings={data.settings} />
 	{/if}
 	<slot />
 </div>

src/routes/conversation/+server.ts

@@ -44,7 +44,7 @@ export const POST: RequestHandler = async ({ locals, request }) => {
 		model: values.model,
 		createdAt: new Date(),
 		updatedAt: new Date(),
-		...(locals.userId ? { userId: locals.userId } : { sessionId: locals.sessionId }),
+		...(locals.user ? { userId: locals.user._id } : { sessionId: locals.sessionId }),
 		...(values.fromShare ? { meta: { fromShareId: values.fromShare } } : {}),
 	});
 

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

@@ -0,0 +1,14 @@
+import { redirect } from "@sveltejs/kit";
+import { getOIDCAuthorizationUrl, getRedirectURI } from "$lib/server/auth";
+
+export const actions = {
+	default: async function ({ url, locals }) {
+		// TODO: Handle errors if provider is not responding
+		const authorizationUrl = await getOIDCAuthorizationUrl(
+			{ redirectURI: getRedirectURI(url) },
+			{ sessionId: locals.sessionId }
+		);
+
+		throw redirect(303, authorizationUrl);
+	},
+};

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

@@ -0,0 +1,109 @@
+import { redirect, error } from "@sveltejs/kit";
+import {
+	authCondition,
+	getOIDCUserData,
+	getRedirectURI,
+	refreshSessionCookie,
+	validateCsrfToken,
+} from "$lib/server/auth";
+import { z } from "zod";
+import { collections } from "$lib/server/database";
+import { ObjectId } from "mongodb";
+import { base } from "$app/paths";
+import { DEFAULT_SETTINGS } from "$lib/types/Settings";
+
+export async function GET({ url, locals, cookies }) {
+	const { error: errorName } = z
+		.object({
+			error: z.string().optional(),
+		})
+		.parse(Object.fromEntries(url.searchParams.entries()));
+
+	if (errorName) {
+		// TODO: Display denied error on the UI
+		throw redirect(302, base || "/");
+	}
+
+	const { code, state } = z
+		.object({
+			code: z.string(),
+			state: z.string(),
+		})
+		.parse(Object.fromEntries(url.searchParams.entries()));
+
+	const csrfToken = Buffer.from(state, "base64").toString("utf-8");
+
+	const isValidToken = await validateCsrfToken(csrfToken, locals.sessionId);
+
+	if (!isValidToken) {
+		throw error(403, "Invalid or expired CSRF token");
+	}
+
+	const { userData } = await getOIDCUserData({ redirectURI: getRedirectURI(url) }, code);
+
+	const {
+		preferred_username: username,
+		name,
+		picture: avatarUrl,
+		sub: hfUserId,
+	} = z
+		.object({
+			preferred_username: z.string(),
+			name: z.string(),
+			picture: z.string(),
+			sub: z.string(),
+		})
+		.parse(userData);
+
+	const existingUser = await collections.users.findOne({ hfUserId });
+	let userId = existingUser?._id;
+
+	if (existingUser) {
+		// update existing user if any
+		await collections.users.updateOne(
+			{ _id: existingUser._id },
+			{ $set: { username, name, avatarUrl } }
+		);
+		// refresh session cookie
+		refreshSessionCookie(cookies, existingUser.sessionId);
+	} else {
+		// user doesn't exist yet, create a new one
+		const { insertedId } = await collections.users.insertOne({
+			_id: new ObjectId(),
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			username,
+			name,
+			avatarUrl,
+			hfUserId,
+			sessionId: locals.sessionId,
+		});
+
+		userId = insertedId;
+
+		// update pre-existing settings
+		const { matchedCount } = await collections.settings.updateOne(authCondition(locals), {
+			$set: { userId, updatedAt: new Date() },
+			$unset: { sessionId: "" },
+		});
+
+		if (!matchedCount) {
+			// update settings if existing or create new default ones
+			await collections.settings.insertOne({
+				userId,
+				ethicsModalAcceptedAt: new Date(),
+				updatedAt: new Date(),
+				createdAt: new Date(),
+				...DEFAULT_SETTINGS,
+			});
+		}
+	}
+
+	// migrate pre-existing conversations
+	await collections.conversations.updateMany(authCondition(locals), {
+		$set: { userId },
+		$unset: { sessionId: "" },
+	});
+
+	throw redirect(302, base || "/");
+}

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

@@ -0,0 +1,17 @@
+import { dev } from "$app/environment";
+import { base } from "$app/paths";
+import { COOKIE_NAME } from "$env/static/private";
+import { redirect } from "@sveltejs/kit";
+
+export const actions = {
+	default: async function ({ cookies }) {
+		cookies.delete(COOKIE_NAME, {
+			path: "/",
+			// So that it works inside the space's iframe
+			sameSite: dev ? "lax" : "none",
+			secure: !dev,
+			httpOnly: true,
+		});
+		throw redirect(303, base || "/");
+	},
+};

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

@@ -2,8 +2,9 @@ import { base } from "$app/paths";
 import { collections } from "$lib/server/database";
 import { redirect } from "@sveltejs/kit";
 import { z } from "zod";
-import { defaultModel, models, validateModel } from "$lib/server/models";
+import { models, validateModel } from "$lib/server/models";
 import { authCondition } from "$lib/server/auth";
+import { DEFAULT_SETTINGS } from "$lib/types/Settings";
 
 export const actions = {
 	default: async function ({ request, locals }) {
@@ -11,14 +12,16 @@ export const actions = {
 
 		const { ethicsModalAccepted, ...settings } = z
 			.object({
-				shareConversationsWithModelAuthors: z.boolean({ coerce: true }).default(true),
+				shareConversationsWithModelAuthors: z
+					.boolean({ coerce: true })
+					.default(DEFAULT_SETTINGS.shareConversationsWithModelAuthors),
 				ethicsModalAccepted: z.boolean({ coerce: true }).optional(),
 				activeModel: validateModel(models),
 			})
 			.parse({
 				shareConversationsWithModelAuthors: formData.get("shareConversationsWithModelAuthors"),
 				ethicsModalAccepted: formData.get("ethicsModalAccepted"),
-				activeModel: formData.get("activeModel") ?? defaultModel.id,
+				activeModel: formData.get("activeModel") ?? DEFAULT_SETTINGS.activeModel,
 			});
 
 		await collections.settings.updateOne(