disabled login

app/api/auth/route.ts

@@ -24,6 +24,7 @@ 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(

assets/globals.css

@@ -12,6 +12,9 @@ body {
 .loading-dots span{
   @apply inline-block w-2 h-2 bg-white rounded-full
 }
+.loading-dots.grey span{
+  @apply inline-block w-2 h-2 bg-gray-400 rounded-full
+}
 .loading-dots span:nth-child(1) {
   animation: move 1s infinite;
 }

components/login/index.tsx

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

utils/useUser.ts

@@ -36,8 +36,6 @@ export const useUser = () => {
     }
   );
   
-  const setCookieToken = async (token: string) => setValue(token, { expires: 7 });
-
   useUpdateEffect(() => {
     if (value) {
       refetch()
@@ -54,6 +52,7 @@ export const useUser = () => {
   };
 
   const getAuthorization = async (code: string) => {
+    console.log(code)
     const request = await fetch("/api/auth", {
       method: "POST",
       body: JSON.stringify({
@@ -65,6 +64,7 @@ export const useUser = () => {
     setValue(res.access_token, {
       expires: res.experes_in,
     });
+    window.location.href = "/";
   }
 
   return {
@@ -72,7 +72,6 @@ export const useUser = () => {
     user,
     refetch,
     loading,
-    setCookieToken,
     getAuthorization
   }
 }