hf sign in

app/login/callback/page.tsx

@@ -1,3 +1,5 @@
+import { cookies } from "next/headers";
+
 async function getAuth(code: string) {
   try {
     const REDIRECT_URI = `https://${process.env.SPACE_HOST}/login/callback`;
@@ -23,18 +25,15 @@ async function getAuth(code: string) {
       .clone()
       .json()
       .catch(() => ({}));
-    const userRequest = await fetch("https://huggingface.co/oauth/userinfo", {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${response.access_token}`,
-      },
+
+    if (!response.access_token) {
+      return null;
+    }
+    cookies.set("access_token", response.access_token, {
+      expires: response.expires_in,
     });
-    const user = await userRequest
-      .clone()
-      .json()
-      .catch(() => ({}));
-    console.log(user);
-    return user;
+
+    return response;
   } catch (error) {
     console.log("error", error);
     return null;
@@ -47,7 +46,6 @@ export default async function LoginCallback({
   searchParams: { [key: string]: string | string[] | undefined };
 }) {
   const profile = await getAuth(searchParams?.code as string);
-  console.log(profile);
   return (
     <div className="pb-32 text-white">
       <p className="font-bold text-4xl text-white">LOGIN CALLBACK</p>

components/button/index.tsx

@@ -15,7 +15,7 @@ export const Button: React.FC<Props> = ({
   return (
     <button
       className={classNames(
-        "rounded-full px-6 py-3 font-semibold flex items-center justify-center gap-2.5 border-[2px] transition-all duration-200 max-w-max",
+        "rounded-full px-6 py-2.5 font-semibold flex items-center justify-center gap-2.5 border-[2px] transition-all duration-200 max-w-max",
         {
           "bg-primary text-white border-primary": theme === "primary",
           "bg-white text-gray-900 border-white": theme === "white",

components/main/index.tsx

@@ -40,9 +40,13 @@ 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={openWindowLogin}>
-                  Sign in with Hugging Face
-                </Button>
+                // <Button key={key} theme="white" onClick={openWindowLogin}>
+                //   Sign in with Hugging Face
+                // </Button>
+                <img
+                  src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl.svg"
+                  onClick={openWindowLogin}
+                />
               ) : (
                 <Button
                   key={key}