feat openid login with google (#250)

Co-authored-by: coyotte508 <[email protected]>

.env

@@ -11,7 +11,9 @@ HF_ACCESS_TOKEN=#hf_<token> from from https://huggingface.co/settings/token
 # Parameters to enable "Sign in with HF"
 OPENID_CLIENT_ID=
 OPENID_CLIENT_SECRET=
-OPENID_PROVIDER_URL=https://huggingface.co
+OPENID_SCOPES="openid profile" # Add "email" for some providers like Google that do not provide preferred_username
+OPENID_PROVIDER_URL=https://huggingface.co # for Google, use https://accounts.google.com
+
 
 # 'name', 'userMessageToken', 'assistantMessageToken' are required
 MODELS=`[
@@ -54,8 +56,8 @@ PUBLIC_GOOGLE_ANALYTICS_ID=#G-XXXXXXXX / Leave empty to disable
 PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID=#UA-XXXXXXXX-X / Leave empty to disable
 PUBLIC_ANNOUNCEMENT_BANNERS=`[
   {
-    "title": "Chat UI is now open sourced on GitHub", 
-    "linkTitle": "GitHub repo", 
+    "title": "Chat UI is now open sourced on GitHub",
+    "linkTitle": "GitHub repo",
     "linkHref": "https://github.com/huggingface/chat-ui"
   }
 ]`

src/lib/components/NavMenu.svelte

@@ -6,6 +6,7 @@
 	import { switchTheme } from "$lib/switchTheme";
 	import { PUBLIC_ORIGIN } from "$env/static/public";
 	import NavConversationItem from "./NavConversationItem.svelte";
+	import type { LayoutData } from "../../routes/$types";
 
 	const dispatch = createEventDispatcher<{
 		shareConversation: { id: string; title: string };
@@ -17,7 +18,7 @@
 		id: string;
 		title: string;
 	}> = [];
-	export let user: { username: string } | undefined;
+	export let user: LayoutData["user"];
 </script>
 
 <div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
@@ -42,14 +43,15 @@
 <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}
+	{#if user?.username || user?.email}
 		<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
+			<span
+				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"

src/lib/server/auth.ts

@@ -5,6 +5,7 @@ import {
 	OPENID_CLIENT_ID,
 	OPENID_CLIENT_SECRET,
 	OPENID_PROVIDER_URL,
+	OPENID_SCOPES,
 } from "$env/static/private";
 import { sha256 } from "$lib/utils/sha256";
 import { z } from "zod";
@@ -33,8 +34,6 @@ export function refreshSessionCookie(cookies: Cookies, sessionId: string) {
 	});
 }
 
-export const OIDC_SCOPES = "openid profile";
-
 export const authCondition = (locals: App.Locals) => {
 	return locals.user
 		? { userId: locals.user._id }
@@ -75,7 +74,7 @@ export async function getOIDCAuthorizationUrl(
 	const client = await getOIDCClient(settings);
 	const csrfToken = await generateCsrfToken(params.sessionId, settings.redirectURI);
 	const url = client.authorizationUrl({
-		scope: OIDC_SCOPES,
+		scope: OPENID_SCOPES,
 		state: csrfToken,
 	});
 

src/lib/types/User.ts

@@ -4,8 +4,9 @@ import type { Timestamps } from "./Timestamps";
 export interface User extends Timestamps {
 	_id: ObjectId;
 
-	username: string;
+	username?: string;
 	name: string;
+	email?: string;
 	avatarUrl: string;
 	hfUserId: string;
 

src/lib/utils/sha256.ts

@@ -1,5 +1,3 @@
-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

@@ -72,7 +72,11 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 			parameters: model.parameters,
 		})),
 		oldModels,
-		user: locals.user && { username: locals.user.username, avatarUrl: locals.user.avatarUrl },
+		user: locals.user && {
+			username: locals.user.username,
+			avatarUrl: locals.user.avatarUrl,
+			email: locals.user.email,
+		},
 		requiresLogin: requiresUser,
 	};
 };

src/routes/login/callback/updateUser.ts

@@ -12,10 +12,10 @@ export async function updateUser(params: {
 	cookies: Cookies;
 }) {
 	const { userData, locals, cookies } = params;
-
 	const {
 		preferred_username: username,
 		name,
+		email,
 		picture: avatarUrl,
 		sub: hfUserId,
 	} = z
@@ -24,6 +24,7 @@ export async function updateUser(params: {
 			name: z.string(),
 			picture: z.string(),
 			sub: z.string(),
+			email: z.string().email().optional(),
 		})
 		.parse(userData);
 
@@ -46,6 +47,7 @@ export async function updateUser(params: {
 			updatedAt: new Date(),
 			username,
 			name,
+			email,
 			avatarUrl,
 			hfUserId,
 			sessionId: locals.sessionId,