Sync widgets demo

packages/widgets/README.md

@@ -19,7 +19,7 @@ pnpm install
 pnpm dev
 ```
 
-If you want to try the "Sign-in with HF" feature locally, you will need to https://huggingface.co/settings/applications/new an OAuth application with `"openid"` and `"inference-api"` scopes and `http://localhost:5173/auth/callback/huggingface` as the redirect URL.
+If you want to try the "Sign-in with HF" feature locally, you will need to https://huggingface.co/settings/applications/new an OAuth application with `"openid"`, `"profile"` and `"inference-api"` scopes and `http://localhost:5173/auth/callback/huggingface` as the redirect URL.
 
 Then you can create a `.env.local` file with the following content:
 

packages/widgets/src/app.d.ts

@@ -17,6 +17,10 @@ declare module "@auth/core/types" {
 	export interface Session {
 		access_token?: string;
 	}
+
+	export interface User {
+		username: string;
+	}
 }
 
 export {};

packages/widgets/src/hooks.server.ts

@@ -13,6 +13,18 @@ const handleSSO =
 				 * SvelteKit has built-in CSRF protection, so we can skip the check
 				 */
 				skipCSRFCheck: skipCSRFCheck,
+				cookies: {
+					sessionToken: {
+						name: "session_token",
+						options: {
+							httpOnly: true,
+							sameSite: "lax",
+							secure: true,
+							path: "/",
+							maxAge: 3600, // The OAuth token's lifetime is 3600 seconds
+						},
+					},
+				},
 				providers: [
 					{
 						name: "Hugging Face",
@@ -32,19 +44,24 @@ const handleSSO =
 				 * Get the access_token without an account in DB, to make calls to the inference API
 				 */
 				callbacks: {
-					async jwt({ token, account }) {
-						if (account) {
-							return {
-								...token,
-								access_token: account.access_token,
-							};
-						}
-						return token;
+					jwt({ token, account, profile }) {
+						return {
+							...token,
+							/**
+							 * account & profile are undefined beyond the first login, in those
+							 * cases `token.access_token` and `token.username` are defined
+							 */
+							...(account && { access_token: account.access_token }),
+							...(profile && { username: profile.preferred_username }),
+						};
 					},
-					async session({ session, token }) {
+					session({ session, token }) {
 						return {
 							...session,
 							access_token: token.access_token,
+							user: Object.assign({}, session.user, {
+								username: token.username,
+							}),
 						};
 					},
 				},

packages/widgets/src/routes/+layout.server.ts

@@ -1,11 +1,11 @@
 import { env } from "$env/dynamic/private";
 import type { LayoutServerLoad } from "./$types.js";
 
-export const load: LayoutServerLoad = async ({ locals }) => {
-	const session = await locals.getSession();
+const supportsOAuth = !!env.OAUTH_CLIENT_ID && !!env.OAUTH_CLIENT_SECRET;
 
+export const load: LayoutServerLoad = async ({ locals }) => {
 	return {
-		access_token: session?.access_token,
-		supportsOAuth: !!env.OAUTH_CLIENT_ID && !!env.OAUTH_CLIENT_SECRET,
+		session: supportsOAuth ? locals.getSession() : undefined,
+		supportsOAuth,
 	};
 };

packages/widgets/src/routes/+page.svelte

@@ -8,7 +8,7 @@
 	import { browser } from "$app/environment";
 
 	export let data;
-	let apiToken = data.access_token || "";
+	let apiToken = data.session?.access_token || "";
 
 	function storeHFToken() {
 		window.localStorage.setItem("hf_token", apiToken);
@@ -537,7 +537,7 @@
 	<ModeSwitcher />
 
 	{#if data.supportsOAuth}
-		{#if !data.access_token}
+		{#if !data.session}
 			<form class="contents" method="post" action="/auth/signin/huggingface" target={isIframe ? "_blank" : ""}>
 				<button type="submit" title="Sign in with Hugging Face">
 					<img
@@ -547,6 +547,14 @@
 					/>
 				</button>
 			</form>
+		{:else}
+			<div class="flex items-center gap-2">
+				logged in as {data.session.user?.username}
+				<img src={data.session?.user?.image} alt="" class="w-6 h-6 rounded-full" />
+				<form method="post" action="/auth/signout">
+					<button type="submit" class="underline">Sign out</button>
+				</form>
+			</div>
 		{/if}
 	{:else}
 		<label>