final stuffs

app/api/auth/route.ts

@@ -1,8 +1,4 @@
 import { NextRequest, NextResponse } from "next/server";
-// import { cookies } from "next/headers";
-// import MY_TOKEN_KEY from "@/lib/get-cookie-name";
-
-// TODO refacto to do not use the window.postMessage, doesn't work with iFrame
 
 export async function GET() {
   const redirect_uri = process.env.REDIRECT_URI;
@@ -81,13 +77,6 @@ export async function POST(req: NextRequest) {
     );
   }
   const user = await userResponse.json();
-  // const cookieStore = await cookies();
-  // cookieStore.set(MY_TOKEN_KEY(), response.access_token, {
-  //   maxAge: response.expires_in,
-  //   httpOnly: false,
-  //   secure: true,
-  //   sameSite: "lax",
-  // });
 
   return NextResponse.json(
     {

app/auth/callback/page.tsx

@@ -1,28 +1,60 @@
 "use client";
-
+import { useUser } from "@/hooks/useUser";
 import { use } from "react";
-import { useBroadcastChannel } from "@/lib/useBroadcastChannel";
 import { useMount } from "react-use";
 
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 export default function AuthCallback({
   searchParams,
 }: {
   searchParams: Promise<{ code: string }>;
 }) {
   const { code } = use(searchParams);
+  const { loginFromCode } = useUser();
 
-  const { postMessage } = useBroadcastChannel("auth", () => {});
-  useMount(() => {
-    console.log("AuthCallback mounted", code);
+  useMount(async () => {
     if (code) {
-      postMessage({
-        code: code,
-        type: "user-oauth",
-      });
-      // window.close();
-      return;
+      await loginFromCode(code);
     }
   });
 
-  return <div>Login in progress ...</div>;
+  return (
+    <div className="h-screen flex flex-col justify-center items-center">
+      <div className="!rounded-2xl !p-0 !bg-white !border-neutral-100 min-w-xs text-center overflow-hidden ring-[8px] ring-white/20">
+        <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+          <div className="flex items-center justify-center -space-x-4 mb-3">
+            <div className="size-9 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+              🚀
+            </div>
+            <div className="size-11 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-2xl z-2">
+              👋
+            </div>
+            <div className="size-9 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-xl opacity-50">
+              🙌
+            </div>
+          </div>
+          <p className="text-xl font-semibold text-neutral-950">
+            Login In Progress...
+          </p>
+          <p className="text-sm text-neutral-500 mt-1.5">
+            Wait a moment while we log you in with your code.
+          </p>
+        </header>
+        <main className="space-y-4 p-6">
+          <div>
+            <p className="text-sm text-neutral-700 mb-4 max-w-xs">
+              If you are not redirected automatically, please click the button
+              below:
+            </p>
+            <Link href="/">
+              <Button variant="black" className="relative">
+                Go to Home
+              </Button>
+            </Link>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
 }

hooks/useUser.ts

@@ -17,6 +17,7 @@ export const useUser = (initialData?: {
   const client = useQueryClient();
   const router = useRouter();
   const [, setCookie, removeCookie] = useCookie(cookie_name);
+  const [currentRoute, setCurrentRoute] = useCookie("deepsite-currentRoute");
 
   const { data: { user, errCode } = { user: null, errCode: null }, isLoading } =
     useQuery({
@@ -46,11 +47,8 @@ export const useUser = (initialData?: {
   };
 
   const openLoginWindow = async () => {
-    return window.open(
-      "/auth",
-      "Login to DeepSite",
-      "menubar=no,width=500,height=777,location=no,resizable=no,scrollbars=yes,status=no"
-    );
+    setCurrentRoute(window.location.pathname);
+    return router.push("/auth");
   };
 
   const loginFromCode = async (code: string) => {
@@ -60,7 +58,6 @@ export const useUser = (initialData?: {
       .post("/auth", { code })
       .then(async (res: any) => {
         if (res.data) {
-          // fix to be able to set the cookie through the space (Hugging Face)
           setCookie(res.data.access_token, {
             expires: res.data.expires_in
               ? new Date(Date.now() + res.data.expires_in * 1000)
@@ -72,6 +69,12 @@ export const useUser = (initialData?: {
             user: res.data.user,
             errCode: null,
           });
+          if (currentRoute) {
+            router.push(currentRoute);
+            setCurrentRoute("");
+          } else {
+            router.push("/projects");
+          }
           toast.success("Login successful");
         }
       })