hf sign in

app/api/auth/route.ts

@@ -0,0 +1,28 @@
+export async function POST(req: Request) {
+  const REDIRECT_URI = `https://${process.env.SPACE_HOST}`
+  const { code } = await req.json()
+
+  const request = await fetch('https://huggingface.co/oauth/token', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    body: JSON.stringify({
+      client_id: process.env.OAUTH_CLIENT_ID,
+      code,
+      grand_type: 'authorization_code',
+      redirect_uri: REDIRECT_URI,
+    }),
+  })
+
+  const response = await request.clone().json().catch(() => ({}));
+  console.log(response)
+
+  return Response.json(
+    {
+      response,
+      status: 200,
+      ok: true
+    }
+  )
+}

app/api/login/route.ts

@@ -1,11 +1,8 @@
-export async function GET(request: Request) {
-  console.log(process.env)
-
+export async function GET() {
   const REDIRECT_URI = `https://${process.env.SPACE_HOST}/login/callback`
-
   return Response.json(
     {
-      redirect: `https://huggingface.co/oauth/authorize?redirect_uri=${REDIRECT_URI}&scope=openid%20profile&client_id=${process.env.OAUTH_CLIENT_ID}`,
+      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`,
       status: 200,
       ok: true
     }

app/login/callback/page.tsx

@@ -1,7 +1,47 @@
-export default function LoginCallback() {
+async function getAuth(code: string) {
+  try {
+    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 = await fetch("https://huggingface.co/oauth/token", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        Authorization,
+      },
+      // send as Form data
+      body: new URLSearchParams({
+        grant_type: "authorization_code",
+        code,
+        redirect_uri: REDIRECT_URI,
+      }),
+    });
+
+    const response = await request
+      .clone()
+      .json()
+      .catch(() => ({}));
+    console.log(response);
+    return response;
+  } catch (error) {
+    console.log("error", error);
+    return null;
+  }
+}
+
+export default async function LoginCallback({
+  searchParams,
+}: {
+  searchParams: { [key: string]: string | string[] | undefined };
+}) {
+  const profile = await getAuth(searchParams?.code as string);
+  console.log(profile);
   return (
     <div className="pb-32">
       <p className="font-bold text-4xl text-white">LOGIN CALLBACK</p>
+      {profile && JSON.stringify(profile, null, 2)}
     </div>
   );
 }

components/main/index.tsx

@@ -9,6 +9,7 @@ import { Button } from "@/components/button";
 import { useInputGeneration } from "./hooks/useInputGeneration";
 import { Collections } from "./collections";
 import { Settings } from "./settings";
+import { useUser } from "@/utils/useUser";
 
 const categories = [
   {
@@ -26,18 +27,11 @@ const categories = [
 
 export const Main = () => {
   const user = false;
+  const { openWindowLogin } = useUser();
   const { list_styles, style, setStyle, loading } = useInputGeneration();
   const [category, setCategory] = useState<string>("community");
   const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
 
-  const openLogin = async () => {
-    const response = await fetch(`/api/login`);
-    const { ok, redirect } = await response.json();
-    if (ok && redirect) {
-      window.open(redirect, "_blank");
-    }
-  };
-
   return (
     <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
       <div className="py-2 pl-2 pr-2 lg:pr-4 bg-black bg-opacity-30 backdrop-blur-sm lg:sticky lg:top-4 z-10 rounded-full">
@@ -46,7 +40,7 @@ export const Main = () => {
           <div className="items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0 hidden lg:flex">
             {categories.map(({ key, label, icon, isLogged }) =>
               isLogged && !user ? (
-                <Button key={key} theme="white" onClick={openLogin}>
+                <Button key={key} theme="white" onClick={openWindowLogin}>
                   Sign in with Hugging Face
                 </Button>
               ) : (

utils/useUser.ts

@@ -0,0 +1,13 @@
+export const useUser = () => {
+  const openWindowLogin = async () => {
+    const response = await fetch(`/api/login`);
+    const { ok, redirect } = await response.json();
+    if (ok && redirect) {
+      window.open(redirect, "_blank");
+    }
+  };
+
+  return {
+    openWindowLogin,
+  }
+}