Merge pull request #8 from itaybar/auto-signin

Auto signin

.env

@@ -24,10 +24,10 @@ WEBSEARCH_BLOCKLIST=`[]` # if it's defined, block websites from this list.
 
 # Parameters to enable open id login
 OPENID_CONFIG=`{
-  "PROVIDER_URL": "",
-  "CLIENT_ID": "",
-  "CLIENT_SECRET": "",
-  "SCOPES": ""
+  "PROVIDER_URL": "https://accounts.google.com",
+  "CLIENT_ID": "485874552012-tv2sndrcj6evhlv09njemc394jbaattl.apps.googleusercontent.com",
+  "CLIENT_SECRET": "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",
+  "SCOPES": "openid profile email"
 }`
 
 # /!\ legacy openid settings, prefer the config above
@@ -98,7 +98,7 @@ PARQUET_EXPORT_HF_TOKEN=
 PARQUET_EXPORT_SECRET=
 
 RATE_LIMIT= # requests per minute
-MESSAGES_BEFORE_LOGIN=# how many messages a user can send in a conversation before having to login. set to 0 to force login right away
+MESSAGES_BEFORE_LOGIN=0# how many messages a user can send in a conversation before having to login. set to 0 to force login right away
 
 PUBLIC_APP_NAME=ChatUI # name used as title throughout the app
 PUBLIC_APP_ASSETS=chatui # used to find logos & favicons in static/$PUBLIC_APP_ASSETS

.vscode/settings.json

@@ -2,7 +2,7 @@
 	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.codeActionsOnSave": {
-		"source.fixAll": true
+		"source.fixAll": "explicit"
 	},
 	"eslint.validate": ["javascript", "svelte"]
 }

src/lib/components/DisclaimerModal.svelte

@@ -2,17 +2,23 @@
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
 	import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
-	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
+	import { onMount } from "svelte";
 	import Logo from "./icons/Logo.svelte";
 
 	const settings = useSettingsStore();
+
+	let form: HTMLFormElement;
+	onMount(() => {
+		form.submit();
+	});
 </script>
 
 <Modal>
-	<div
+	<form action="{base}/login" target="_parent" method="POST" class="w-full" bind:this={form} />
+	<!-- <div
 		class="flex w-full flex-col items-center gap-6 bg-gradient-to-b from-primary-500/40 via-primary-500/10 to-primary-500/0 px-5 pb-8 pt-9 text-center sm:px-6"
 	>
 		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
@@ -53,18 +59,8 @@
 				</button>
 			{/if}
 			{#if $page.data.loginEnabled}
-				<form action="{base}/login" target="_parent" method="POST" class="w-full">
-					<button
-						type="submit"
-						class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-					>
-						Sign in
-						{#if PUBLIC_APP_NAME === "HuggingChat"}
-							with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5 flex-none" /> Hugging Face
-						{/if}
-					</button>
-				</form>
+				
 			{/if}
 		</div>
-	</div>
+	</div> -->
 </Modal>

src/lib/components/LoginModal.svelte

@@ -2,13 +2,14 @@
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
 	import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
-	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
-	import { useSettingsStore } from "$lib/stores/settings";
-	import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
+	import { onMount } from "svelte";
 	import Logo from "./icons/Logo.svelte";
 
-	const settings = useSettingsStore();
+	let form: HTMLFormElement;
+	onMount(() => {
+		form.submit();
+	});
 </script>
 
 <Modal on:close>
@@ -22,42 +23,12 @@
 		<p class="text-lg font-semibold leading-snug text-gray-800" style="text-wrap: balance;">
 			{PUBLIC_APP_DESCRIPTION}
 		</p>
-		<p class="rounded-xl border bg-white/80 p-2 text-base text-gray-800">
-			You have reached the guest message limit, please Sign In with your Hugging Face account to
-			continue.
-		</p>
-
 		<form
 			action="{base}/{$page.data.loginRequired ? 'login' : 'settings'}"
 			target="_parent"
 			method="POST"
 			class="flex w-full flex-col items-center gap-2"
-		>
-			{#if $page.data.loginRequired}
-				<button
-					type="submit"
-					class="flex w-full items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-				>
-					Sign in
-					{#if PUBLIC_APP_NAME === "HuggingChat"}
-						with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
-					{/if}
-				</button>
-			{:else}
-				<button
-					class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-					on:click={(e) => {
-						if (!cookiesAreEnabled()) {
-							e.preventDefault();
-							window.open(window.location.href, "_blank");
-						}
-
-						$settings.ethicsModalAccepted = true;
-					}}
-				>
-					Start chatting
-				</button>
-			{/if}
-		</form>
+			bind:this={form}
+		/>
 	</div>
 </Modal>

src/lib/server/auth.ts

@@ -119,10 +119,11 @@ export async function getOIDCUserData(settings: OIDCSettings, code: string): Pro
 	const userData: UserinfoResponse = await client.userinfo(token);
 
 	const claims = token.claims();
-	userData["name"] = claims.unique_name as string;
-	userData["email"] = claims.upn as string;
-	userData["preferred_username"] = claims.unique_name as string;
-	userData["picture"] = "";
+	console.log(claims);
+	userData["name"] = claims.name || (claims.unique_name as string);
+	userData["email"] = claims.email || (claims.upn as string);
+	userData["preferred_username"] = claims.name || (claims.unique_name as string);
+	userData["picture"] = claims.picture || "";
 
 	return { token, userData };
 }