Enable auth using trusted header (#1128)

* Declare jwt-decode as dependency.

* Show email from JWT and hide signout

* Use special value for JWT user ID.

* fix user creation, fix linting

* formatting

* Update implem to use header instead of cookie

* create user id based on email

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

.env

@@ -6,6 +6,8 @@ MONGODB_DB_NAME=chat-ui
 MONGODB_DIRECT_CONNECTION=false
 
 COOKIE_NAME=hf-chat
+TRUSTED_EMAIL_HEADER= # only set this if you understand the implications
+
 HF_TOKEN=#hf_<token> from https://huggingface.co/settings/token
 HF_API_ROOT=https://api-inference.huggingface.co/models
 

README.md

@@ -147,6 +147,19 @@ OPENID_CONFIG=`{
 
 These variables will enable the openID sign-in modal for users.
 
+### Trusted header authentication
+
+You can set the env variable `TRUSTED_EMAIL_HEADER` to point to the header that contains the user's email address. This will allow you to authenticate users from the header. This setup is usually combined with a proxy that will be in front of chat-ui and will handle the auth and set the header.
+
+> [!WARNING]
+> Make sure to only allow requests to chat-ui through your proxy which handles authentication, otherwise users could authenticate as anyone by setting the header manually! Only set this up if you understand the implications and know how to do it correctly.
+
+Here is a list of header names for common auth providers:
+
+- Tailscale Serve: `Tailscale-User-Login`
+- Cloudflare Access: `Cf-Access-Authenticated-User-Email`
+- oauth2-proxy: `X-Forwarded-Email`
+
 ### Theming
 
 You can use a few environment variables to customize the look and feel of chat-ui. These are by default:
@@ -172,7 +185,7 @@ You can enable the web search through an API by adding `YDC_API_KEY` ([docs.you.
 
 You can also simply enable the local google websearch by setting `USE_LOCAL_WEBSEARCH=true` in your `.env.local` or specify a SearXNG instance by adding the query URL to `SEARXNG_QUERY_URL`.
 
-You can enable Javascript when parsing webpages to improve compatibility with `WEBSEARCH_JAVASCRIPT=true` at the cost of increased CPU usage. You'll want at least 4 cores when enabling.
+You can enable javascript when parsing webpages to improve compatibility with `WEBSEARCH_JAVASCRIPT=true` at the cost of increased CPU usage. You'll want at least 4 cores when enabling.
 
 ### Custom models
 
@@ -232,7 +245,7 @@ The following is the default `chatPromptTemplate`, although newlines and indenti
 
 #### Multi modal model
 
-We currently support [IDEFICS](https://huggingface.co/blog/idefics) (hosted on TGI), OpenAI and Claude 3 as multimodal models. You can enable it by setting `multimodal: true` in your `MODELS` configuration. For IDEFICS, you must have a [PRO HF Api token](https://huggingface.co/settings/tokens). For OpenAI, see the [OpenAI section](#OpenAI). For Anthropic, see the [Anthropic section](#Anthropic).
+We currently support [IDEFICS](https://huggingface.co/blog/idefics) (hosted on TGI), OpenAI and Claude 3 as multimodal models. You can enable it by setting `multimodal: true` in your `MODELS` configuration. For IDEFICS, you must have a [PRO HF Api token](https://huggingface.co/settings/tokens). For OpenAI, see the [OpenAI section](#OpenAI). For Anthropic, see the [Anthropic section](#anthropic).
 
 ```env
     {

src/app.d.ts

@@ -10,7 +10,7 @@ declare global {
 		// interface Error {}
 		interface Locals {
 			sessionId: string;
-			user?: User;
+			user?: User & { logoutDisabled?: boolean };
 		}
 
 		interface Error {

src/hooks.server.ts

@@ -13,6 +13,7 @@ import { refreshAssistantsCounts } from "$lib/assistantStats/refresh-assistants-
 import { logger } from "$lib/server/logger";
 import { AbortedGenerations } from "$lib/server/abortedGenerations";
 import { MetricsServer } from "$lib/server/metrics";
+import { ObjectId } from "mongodb";
 
 // TODO: move this code on a started server hook, instead of using a "building" flag
 if (!building) {
@@ -96,10 +97,29 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 	const token = event.cookies.get(env.COOKIE_NAME);
 
+	// if the trusted email header is set we use it to get the user email
+	const email = env.TRUSTED_EMAIL_HEADER
+		? event.request.headers.get(env.TRUSTED_EMAIL_HEADER)
+		: null;
+
 	let secretSessionId: string;
 	let sessionId: string;
 
-	if (token) {
+	if (email) {
+		secretSessionId = sessionId = await sha256(email);
+
+		event.locals.user = {
+			// generate id based on email
+			_id: new ObjectId(sessionId.slice(0, 24)),
+			name: email,
+			email,
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			hfUserId: email,
+			avatarUrl: "",
+			logoutDisabled: true,
+		};
+	} else if (token) {
 		secretSessionId = token;
 		sessionId = await sha256(token);
 

src/lib/components/NavMenu.svelte

@@ -89,12 +89,14 @@
 				class="flex h-9 flex-none shrink items-center gap-1.5 truncate pr-2 text-gray-500 dark:text-gray-400"
 				>{user?.username || user?.email}</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 md:hidden dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
-			>
-				Sign Out
-			</button>
+			{#if !user.logoutDisabled}
+				<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 md:hidden dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+				>
+					Sign Out
+				</button>
+			{/if}
 		</form>
 	{/if}
 	{#if canLogin}

src/routes/+layout.server.ts

@@ -192,6 +192,7 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 			username: locals.user.username,
 			avatarUrl: locals.user.avatarUrl,
 			email: locals.user.email,
+			logoutDisabled: locals.user.logoutDisabled,
 		},
 		assistant,
 		enableAssistants,