wip signin

package-lock.json

@@ -25,6 +25,7 @@
 				"@sveltejs/kit": "^1.27.4",
 				"@types/cookie": "^0.5.1",
 				"@types/js-cookie": "^3.0.6",
+				"@types/node": "^20.11.2",
 				"@typescript-eslint/eslint-plugin": "^6.0.0",
 				"@typescript-eslint/parser": "^6.0.0",
 				"autoprefixer": "^10.4.16",
@@ -1434,6 +1435,15 @@
 			"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
 			"dev": true
 		},
+		"node_modules/@types/node": {
+			"version": "20.11.2",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.2.tgz",
+			"integrity": "sha512-cZShBaVa+UO1LjWWBPmWRR4+/eY/JR/UIEcDlVsw3okjWEu+rB7/mH6X3B/L+qJVHDLjk9QW/y2upp9wp1yDXA==",
+			"devOptional": true,
+			"dependencies": {
+				"undici-types": "~5.26.4"
+			}
+		},
 		"node_modules/@types/pug": {
 			"version": "2.0.10",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
@@ -4429,6 +4439,12 @@
 				"node": ">=14.0"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "5.26.5",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+			"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+			"devOptional": true
+		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.0.13",
 			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",

package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/kit": "^1.27.4",
 		"@types/cookie": "^0.5.1",
 		"@types/js-cookie": "^3.0.6",
+		"@types/node": "^20.11.2",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"autoprefixer": "^10.4.16",

src/lib/components/sidebar/Sidebar.svelte

@@ -2,6 +2,7 @@
   import cookies from 'js-cookie';
   import Icon from "@iconify/svelte"
   import { get } from 'svelte/store';
+
   import { userStore, openWindowLogin } from "$lib/stores/use-user";
 	import { SIDEBAR_MENUS } from "$lib/utils";
   import HFLogo from "$lib/assets/hf-logo.svg";
@@ -23,6 +24,11 @@
     cookies.remove("hf_access_token");
     window.location.href = "/";
   }
+  // if (!e.data.code) return;
+  //   if (e.data.type === "user-oauth" && e?.data?.code && !events.code) {
+  //     events.code = e.data.code;
+  //     loginFromCode(e.data.code);
+  //   }
 </script>
 
 <button class="bg-transparent absolute top-10 right-8 cursor-pointer xl:hidden" on:click="{handleClick}">

src/lib/stores/use-user.ts

@@ -1,17 +1,22 @@
 import { writable } from "svelte/store";
+import cookies from "js-cookie";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const userStore = writable<any>(null);
 
-
 export const openWindowLogin = async () => {
   return window.open(
     "/api/auth/login",
     "Login to LoRAs Studio",
     "menubar=no,width=500,height=777,location=no,resizable=no,scrollbars=yes,status=no"
   );
-  // const response = await fetch(`/api/auth/login`);
-  // const { redirect } = await response.json();
-  // if (redirect) {
-  // }
+};
+
+export const loginFromCode = async (code: string) => {
+  const request = await fetch(`/api/auth?code=${code}`);
+  const { ok, token } = await request.json();
+  if (ok) {
+    cookies.set("hf_access_token", token, { expires: 1 });
+    window.location.reload();
+  }
 };

src/routes/+layout.svelte

@@ -1,11 +1,13 @@
 <script>
 	import { get } from "svelte/store";
+	import { browser } from '$app/environment';
+	import Icon from "@iconify/svelte";
+
 	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
 	import "$lib/styles/tailwind.css"
-	import { userStore } from "$lib/stores/use-user";
+	import { userStore, loginFromCode } from "$lib/stores/use-user";
 	import Dialog from "$lib/components/dialog/Dialog.svelte";
 	import { loginModalStore } from "$lib/stores/use-login-modal";
-	import Icon from "@iconify/svelte";
 
 	export let data;
 	userStore.set(data?.user?.user);
@@ -15,6 +17,14 @@
 	loginModalStore.subscribe((v) => {
 		open = v;
   });
+
+	if (browser) {
+    window.addEventListener("message", async (event) => {
+      if (event.data?.type === "user-oauth") {
+      	await loginFromCode(event.data.code);
+      }
+    });
+  }
 </script>
 
 <div class="flex items-start">

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

@@ -0,0 +1,48 @@
+/** @type {import('./$types').RequestHandler} */
+
+import { json } from '@sveltejs/kit';
+
+export async function POST(request) {
+  const code = request.url.searchParams.get('code')
+
+  if (!code) {
+    return json({
+      message: `No code provided`,
+    }, {
+      status: 400
+    })
+  }
+
+  const REDIRECT_URI = `https://${process.env.SPACE_HOST}/login/callback`;
+  const Authorization = `Basic ${Buffer.from(
+    `${process.env.OAUTH_CLIENT_ID}:${process.env.OAUTH_CLIENT_SECRET}`
+  ).toString("base64")}`;
+
+  const request_auth = await fetch("https://huggingface.co/oauth/token", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+      Authorization,
+    },
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code: code,
+      redirect_uri: REDIRECT_URI,
+    }),
+  });
+
+  const { access_token } = await request_auth.json();
+
+  if (!access_token) {
+    return json({
+      message: `No access token provided`,
+    }, {
+      status: 400
+    })
+  }
+
+  return json({
+    ok: true,
+    token: access_token
+  })
+}

src/routes/login/callback/+page.svelte

@@ -1,4 +1,29 @@
-<div>
-  <h1>Callback</h1>
-  <p>Callback page</p>
+<script lang="ts">
+  import { browser } from '$app/environment';
+export let data;
+
+if (browser && data?.code) {
+  if (window.opener) {
+    window.opener.postMessage(
+      {
+        code: data?.code,
+        type: "user-oauth",
+      },
+      window.location.origin
+    );
+    setTimeout(() => window.close(), 200);
+  } else {
+    window.postMessage(
+      {
+        code: data?.code,
+        type: "user-oauth",
+      },
+      window.location.origin
+    );
+  }
+}
+</script>
+
+<div class="p-10">
+  <h1 class="text-white text-2xl font-bold">Login in progress..</h1>
 </div>

src/routes/login/callback/+page.ts

@@ -0,0 +1,7 @@
+export async function load({ url }) {
+  const code = url.searchParams.get("code")
+
+  return {
+    code
+  }
+}