wip signin

README.md

@@ -7,6 +7,7 @@ sdk: docker
 pinned: false
 app_port: 3000
 license: mit
+hf_oauth: true
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

src/lib/components/sidebar/Sidebar.svelte

@@ -2,7 +2,7 @@
   import cookies from 'js-cookie';
   import Icon from "@iconify/svelte"
   import { get } from 'svelte/store';
-  import { userStore } from "$lib/stores/use-user";
+  import { userStore, openWindowLogin } from "$lib/stores/use-user";
 	import { SIDEBAR_MENUS } from "$lib/utils";
   import HFLogo from "$lib/assets/hf-logo.svg";
 
@@ -64,9 +64,12 @@
       </button>
     </footer>
   {:else}
-    <footer class="text-white text-center text-base pb-8 px-8 flex items-center justify-center gap-2 cursor-pointer">
+    <button
+      class="text-white text-center text-base pb-8 px-8 flex items-center justify-center gap-2 cursor-pointer"
+      on:click={openWindowLogin}  
+    >
       <img src={HFLogo} alt="Hugging Face logo" class="w-8 h-8 inline-block" />
       <u>Sign in with Hugging Face</u>
-    </footer>
+    </button>
   {/if}
 </aside>

src/lib/stores/use-user.ts

@@ -2,3 +2,12 @@ import { writable } from "svelte/store";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const userStore = writable<any>(null);
+
+
+export const openWindowLogin = async () => {
+  const response = await fetch(`/api/login`);
+  const { ok, redirect } = await response.json();
+  if (ok && redirect) {
+    window.open(redirect, "_blank");
+  }
+};

src/routes/api/auth/login/+server.ts

@@ -0,0 +1,10 @@
+import { json } from '@sveltejs/kit';
+/** @type {import('./$types').RequestHandler} */
+
+export async function GET() {
+  const REDIRECT_URI = `https://${process.env.SPACE_HOST}/login/callback`
+
+  return json({
+    redirect: `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&scope=openid%20profile&state=STATE&response_type=code`,
+  })
+}