fix login

src/lib/components/billing/BillingManagementModal.svelte

@@ -13,9 +13,7 @@
 		enterprise: 'bg-green-500/10 text-green-600'
 	};
 	let billingOption = $derived(authState.user?.billingOption || 'personal');
-	let selectedOrg = $derived(
-		authState.user?.orgs?.find((org) => org.preferred_username === billingOption)
-	);
+	let selectedOrg = $derived(authState.user?.orgs?.find((org) => org.name === billingOption));
 	let loading = $state.raw<boolean>(false);
 
 	async function saveSettings() {
@@ -26,7 +24,7 @@
 		if (billingOption === 'personal') {
 			localStorage.removeItem('hf-playground-billing-option');
 		} else {
-			localStorage.setItem('hf-playground-billing-option', selectedOrg?.preferred_username ?? '');
+			localStorage.setItem('hf-playground-billing-option', selectedOrg?.name ?? '');
 		}
 		authState.user!.billingOption = billingOption;
 		open = false;
@@ -71,8 +69,12 @@
 							{authState.user?.name}
 							<span class="text-xs text-muted-foreground">(Personal Account)</span>
 						{:else}
-							<img src={selectedOrg?.picture} alt={selectedOrg?.name} class="size-5 rounded" />
-							{selectedOrg?.name}
+							<img
+								src={selectedOrg?.avatarUrl}
+								alt={selectedOrg?.fullname || selectedOrg?.name}
+								class="size-5 rounded"
+							/>
+							{selectedOrg?.fullname || selectedOrg?.name}
 							{#if selectedOrg?.plan}
 								<span
 									class="rounded px-1 py-0.5 text-[10px] font-semibold {planColors[
@@ -97,10 +99,10 @@
 							</div>
 						</Select.Item>
 						{#each authState.user?.orgs as org}
-							<Select.Item value={org.preferred_username} class="p-2.5!">
+							<Select.Item value={org.name} class="p-2.5!">
 								<div class="flex items-center gap-2 text-sm">
-									<img src={org.picture} alt={org.name} class="size-5 rounded" />
-									{org.name}
+									<img src={org.avatarUrl} alt={org.fullname || org.name} class="size-5 rounded" />
+									{org.fullname || org.name}
 									{#if org.plan}
 										<span
 											class="rounded px-1 py-0.5 text-[10px] font-semibold {planColors[

src/lib/components/flow/actions/PanelLeftMenu.svelte

@@ -5,7 +5,6 @@
 	import { Button, buttonVariants } from '$lib/components/ui/button';
 	import * as Sheet from '$lib/components/ui/sheet/index.js';
 	import HFLogo from '$lib/assets/hf-logo.svg';
-	import { login } from '$lib/state/auth.svelte';
 </script>
 
 <Sheet.Root>

src/lib/helpers/types.ts

@@ -51,11 +51,11 @@ export interface TokenUsage {
 }
 
 export interface HFUser {
-	id: string;
 	name: string;
 	username: string;
+	isPro: boolean;
 	avatarUrl: string;
-	orgs?: { id: string; name: string; picture: string; plan?: string; preferred_username: string }[];
+	orgs?: { name: string; avatarUrl: string; plan?: string; fullname: string }[];
 	billingOption: string;
 }
 

src/lib/state/auth.svelte.ts

@@ -10,7 +10,7 @@ export const authState = $state<{ user: HFUser | null; token: string | null; loa
 
 async function fetchUser(token: string): Promise<HFUser | null> {
 	try {
-		const res = await fetch('https://huggingface.co/oauth/userinfo', {
+		const res = await fetch('https://huggingface.co/api/whoami-v2', {
 			headers: { Authorization: `Bearer ${token}` }
 		});
 		if (!res.ok) return null;
@@ -21,10 +21,10 @@ async function fetchUser(token: string): Promise<HFUser | null> {
 			billingOption = 'personal';
 		}
 		return {
-			id: userInfo.sub,
-			name: userInfo.name || userInfo.preferred_username,
-			username: userInfo.preferred_username,
-			avatarUrl: userInfo.picture,
+			name: userInfo.fullname || userInfo.name,
+			username: userInfo.name,
+			avatarUrl: userInfo.avatarUrl,
+			isPro: userInfo.isPro,
 			orgs: userInfo.orgs,
 			billingOption
 		};