hf sign in

app/api/auth/route.ts

@@ -1,26 +1,35 @@
 export async function POST(req: Request) {
-  const REDIRECT_URI = `https://${process.env.SPACE_HOST}`
-  const { code } = await req.json()
+  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 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 response = await request.clone().json().catch(() => ({}));
-  console.log(response)
+    const request = 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,
+        redirect_uri: REDIRECT_URI,
+      }),
+    });
+
+    const response = await request
+      .clone()
+      .json()
+      .catch(() => ({}));
+  
+  if (response.error) return Response.json({ status: 401, ok: false, message: response.error_description });
 
   return Response.json(
     {
-      response,
+      access_token: response.access_token,
+      experes_in: response.expires_in,
       status: 200,
       ok: true
     }

app/api/me/route.ts

@@ -0,0 +1,24 @@
+import { cookies } from "next/headers"
+
+export async function GET() {
+  const cookie = cookies().get("auth_hf_token")
+
+  if (!cookie) return Response.json({ status: 401, ok: false, message: "Unauthorized" });
+
+  const request = await fetch("https://huggingface.co/oauth/userinfo", {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${cookie.value}`,
+    },
+  })
+
+  const res = await request.clone().json().catch(() => ({}));
+
+  return Response.json(
+    {
+      user: res,
+      status: 200,
+      ok: true
+    }
+  )
+}

app/login/callback/page.tsx

@@ -1,54 +1,9 @@
-import { cookies } from "next/headers";
-
-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);
-    // if (!response.access_token) {
-    //   return response;
-    // }
-    // @ts-ignore
-    // cookies.set("access_token", response.access_token, {});
-
-    return {};
-  } catch (error) {
-    return error;
-  }
-}
+import { Login } from "@/components/login";
 
 export default async function LoginCallback({
   searchParams,
 }: {
   searchParams: { [key: string]: string | string[] | undefined };
 }) {
-  const profile = await getAuth(searchParams?.code as string);
-  return (
-    <div className="pb-32 text-white">
-      <p className="font-bold text-4xl text-white">LOGIN CALLBACK</p>
-      {/* {profile && JSON.stringify(profile, null, 2)} */}
-    </div>
-  );
+  return <Login code={searchParams.code as string} />;
 }

components/login/index.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { useUser } from "@/utils/useUser";
+import { useMount } from "react-use";
+
+export const Login = ({ code }: { code?: string }) => {
+  const { getAuthorization } = useUser();
+
+  useMount(() => getAuthorization(code as string));
+
+  return (
+    <div className="pb-32 text-white">
+      <p className="font-bold text-4xl text-white">LOGIN</p>
+    </div>
+  );
+};

components/main/index.tsx

@@ -26,8 +26,7 @@ const categories = [
 ];
 
 export const Main = () => {
-  const user = false;
-  const { openWindowLogin } = useUser();
+  const { openWindowLogin, user } = useUser();
   const { list_styles, style, setStyle, loading } = useInputGeneration();
   const [category, setCategory] = useState<string>("community");
   const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);

utils/useUser.ts

@@ -1,4 +1,50 @@
+"use client";
+
+import { useCookie, useUpdateEffect } from "react-use";
+import { useQuery } from "@tanstack/react-query";
+
 export const useUser = () => {
+  const [value, setValue, remove] = useCookie("auth_hf_token");
+
+  const {
+    data: user,
+    refetch,
+    isLoading: loading,
+    remove: clear,
+  }: any = useQuery(
+    ["user.me"],
+    async () => {
+      if (!value) return null;
+      const request = await fetch("/api/me", {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${value}`,
+        },
+      })
+
+      const res = await request.clone().json().catch(() => ({}));
+
+      if (res.status === 401) {
+        remove();
+        clear();
+        return null;
+      }
+      return res;
+    },
+    {
+      refetchOnWindowFocus: false,
+    }
+  );
+  
+  const setCookieToken = async (token: string) => setValue(token, { expires: 7 });
+
+  useUpdateEffect(() => {
+    if (value) {
+      refetch()
+    }
+  }
+  , [value]);
+
   const openWindowLogin = async () => {
     const response = await fetch(`/api/login`);
     const { ok, redirect } = await response.json();
@@ -7,7 +53,26 @@ export const useUser = () => {
     }
   };
 
+  const getAuthorization = async (code: string) => {
+    const request = await fetch("/api/auth", {
+      method: "POST",
+      body: JSON.stringify({
+        code,
+      }),
+    });
+    const res = await request.clone().json().catch(() => ({}));
+    if (!res.ok) return
+    setValue(res.access_token, {
+      expires: res.experes_in,
+    });
+  }
+
   return {
     openWindowLogin,
+    user,
+    refetch,
+    loading,
+    setCookieToken,
+    getAuthorization
   }
 }