hugging face sign in + save generation with user.sub

app/api/auth/route.ts

@@ -24,7 +24,6 @@ export async function POST(req: Request) {
       .json()
       .catch(() => ({}));
   
-  console.log(response)
   if (response.error) return Response.json({ status: 401, ok: false, message: response.error_description });
 
   return Response.json(

app/api/collections/route.ts

@@ -3,15 +3,15 @@ import { PrismaClient } from '@prisma/client'
 const prisma = new PrismaClient()
 
 export async function POST(request: Request) {
-  const { ids, page } = await request.json()
+  const { userId, page } = await request.json()
 
   const collections = await prisma.collection.findMany({
     orderBy: {
       id: 'desc'
     },
     where: {
-      id: {
-        in: ids,
+      userId: {
+        equals: userId
       }
     },
     take: 15,

app/api/route.ts

@@ -16,7 +16,7 @@ export async function POST(
     ['x-use-cache']: "0"
   }
 
-  const { inputs, style } = await request.json()
+  const { inputs, style, userId } = await request.json()
   const findStyle = list_styles.find((item) => item.name === style)
 
   const textIsNSFW = await isTextNSFW(inputs, global_headers)
@@ -48,6 +48,7 @@ export async function POST(
     data: {
       prompt: inputs,
       file_name: name,
+      userId: userId ?? "",
     },
   })
   

components/input-generation.tsx

@@ -23,7 +23,7 @@ export const InputGeneration: React.FC = () => {
           value={value}
           type="text"
           className="h-full text-lg placeholder:text-gray-400 text-gray-900 font-medium w-full outline-none truncate"
-          placeholder="A thug cat riding his small bike"
+          placeholder="A red car, forest in the background"
           onChange={(e) => setValue(e.target.value)}
           onBlur={() => setPrompt(value)}
           onKeyDown={(e) => {

components/login/index.tsx

@@ -1,30 +1,53 @@
 "use client";
 
-import { useMount } from "react-use";
+import { useMount, useUpdateEffect } from "react-use";
 import Image from "next/image";
 import { FaUserAstronaut } from "react-icons/fa";
 
 import { useUser } from "@/utils/useUser";
 import HFLogo from "@/assets/images/hf-logo.svg";
+import classNames from "classnames";
+import { HiCheckBadge } from "react-icons/hi2";
 
 export const Login = ({ code }: { code?: string }) => {
-  const { getAuthorization } = useUser();
+  const { getAuthorization, user } = useUser();
 
-  // useMount(() => getAuthorization(code as string));
+  useMount(() => getAuthorization(code as string));
+
+  useUpdateEffect(() => {
+    if (user) {
+      setTimeout(() => {
+        window.location.href = "/";
+      }, 2000);
+    }
+  }, [user]);
 
   return (
     <div className="p-6 min-h-screen flex items-center justify-center">
       <div className="mx-auto bg-white w-full max-w-sm rounded-3xl p-6">
-        <p className="text-center text-gray-400 uppercase font-bold text-sm">
-          Retrieving your information...
+        <p
+          className={classNames(
+            "text-center text-gray-400 uppercase font-bold text-sm whitespace-pre-line",
+            {
+              "!text-green-600": user,
+            }
+          )}
+        >
+          {user
+            ? "You have been logged in successfully. \nRedirecting..."
+            : "Retrieving your information..."}
         </p>
         <div className="flex items-center justify-evenly mt-3">
           <Image src={HFLogo} alt="HF Logo" width={100} height={100} />
-          <div className="loading-dots grey translate-y-[5px]">
-            <span />
-            <span />
-            <span />
-          </div>
+          {user ? (
+            <HiCheckBadge className="w-[30px] h-[30px] text-green-500" />
+          ) : (
+            <div className="loading-dots grey translate-y-[5px]">
+              <span />
+              <span />
+              <span />
+            </div>
+          )}
           <div className="w-[80px] h-[80px] rounded-full ring-4 ring-indigo-200 border-2 border-white bg-indigo-50 p-3">
             <FaUserAstronaut className="w-full h-full text-indigo-500" />
           </div>

components/main/hooks/useCollections.ts

@@ -3,8 +3,11 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useLocalStorage, useUpdateEffect } from "react-use";
 import _ from "lodash";
 
+import { useUser } from "@/utils/useUser";
+
 export const useCollections = (category: string) => {
   const [loading, setLoading] = useState(false);
+  const { user } = useUser();
   const [myGenerationsId] = useLocalStorage<any>('my-own-generations', []);
 
   const client = useQueryClient();
@@ -19,7 +22,7 @@ export const useCollections = (category: string) => {
       const response = await fetch("/api/collections", {
         method: "POST",
         body: JSON.stringify({
-          ids: category === 'my-own' ? myGenerationsId : undefined,
+          userId: category === 'my-own' ? user?.sub : undefined,
           page: 0,
         }),
       })

components/main/hooks/useInputGeneration.ts

@@ -5,9 +5,11 @@ import { useLocalStorage } from 'react-use';
 import { Image } from "@/utils/type"
 import list_styles from "@/assets/list_styles.json"
 import { useCollection } from "@/components/modal/useCollection";
+import { useUser } from "@/utils/useUser";
 
 export const useInputGeneration = () => {
   const { setOpen } = useCollection();
+  const { user } = useUser(); 
   const [myGenerationsId, setGenerationsId] = useLocalStorage<any>('my-own-generations', []);
 
   const { data: prompt } = useQuery(["prompt"], () => {
@@ -57,6 +59,7 @@ export const useInputGeneration = () => {
         body: JSON.stringify({
           inputs: prompt,
           style,
+          userId: user?.sub,
         }),
       })
       const data = await response.json()

components/main/index.tsx

@@ -40,6 +40,7 @@ export const Main = () => {
             {categories.map(({ key, label, icon, isLogged }) =>
               isLogged && !user ? (
                 <img
+                  key={key}
                   src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl.svg"
                   className="cursor-pointer hover:-translate-y-1 transition-all duration-200"
                   onClick={openWindowLogin}

prisma/schema.prisma

@@ -4,7 +4,7 @@ generator client {
 
 datasource db {
   provider = "sqlite"
-  url      = "file://data/dev.db"
+  url      = "file:../data/dev.db"
 }
 
 model Collection {
@@ -12,4 +12,5 @@ model Collection {
   prompt    String
   file_name String
   createdAt DateTime @default(now())
+  userId    String?  @default("")
 }

utils/useUser.ts

@@ -29,7 +29,7 @@ export const useUser = () => {
         clear();
         return null;
       }
-      return res;
+      return res?.user;
     },
     {
       refetchOnWindowFocus: false,
@@ -52,7 +52,6 @@ export const useUser = () => {
   };
 
   const getAuthorization = async (code: string) => {
-    console.log(code)
     const request = await fetch("/api/auth", {
       method: "POST",
       body: JSON.stringify({
@@ -64,7 +63,6 @@ export const useUser = () => {
     setValue(res.access_token, {
       expires: res.experes_in,
     });
-    window.location.href = "/";
   }
 
   return {