test login

app/api/auth/login-url/route.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+  const host = req.headers.get("host") ?? "localhost:3000";
+  const url = host.includes("/spaces/enzostvs")
+    ? "enzostvs-deepsite.hf.space"
+    : host;
+  const redirect_uri =
+    `${host.includes("localhost") ? "http://" : "https://"}` +
+    url +
+    "/auth/callback";
+
+  const loginRedirectUrl = `https://huggingface.co/oauth/authorize?client_id=${process.env.OAUTH_CLIENT_ID}&redirect_uri=${redirect_uri}&response_type=code&scope=openid%20profile%20write-repos%20manage-repos%20inference-api&prompt=consent&state=1234567890`;
+  
+  return NextResponse.json({ loginUrl: loginRedirectUrl });
+}

app/auth/callback/page.tsx

@@ -6,18 +6,42 @@ import { useMount, useTimeoutFn } from "react-use";
 
 import { Button } from "@/components/ui/button";
 import { AnimatedBlobs } from "@/components/animated-blobs";
+import { useBroadcastChannel } from "@/lib/useBroadcastChannel";
 export default function AuthCallback({
   searchParams,
 }: {
   searchParams: Promise<{ code: string }>;
 }) {
   const [showButton, setShowButton] = useState(false);
+  const [isPopupAuth, setIsPopupAuth] = useState(false);
   const { code } = use(searchParams);
   const { loginFromCode } = useUser();
+  const { postMessage } = useBroadcastChannel("auth", () => {});
 
   useMount(async () => {
     if (code) {
-      await loginFromCode(code);
+      // Check if this is a popup window opened for authentication
+      // by checking if window.opener exists or if we can communicate with parent
+      const isPopup = window.opener || window.parent !== window;
+      setIsPopupAuth(isPopup);
+
+      if (isPopup) {
+        // Broadcast the auth code to the parent window/iframe
+        postMessage({
+          type: "user-oauth",
+          code: code,
+        });
+
+        // Close this popup/tab after a short delay
+        setTimeout(() => {
+          if (window.opener) {
+            window.close();
+          }
+        }, 1000);
+      } else {
+        // Normal flow for direct navigation to callback
+        await loginFromCode(code);
+      }
     }
   });
 
@@ -41,10 +65,14 @@ export default function AuthCallback({
               </div>
             </div>
             <p className="text-xl font-semibold text-neutral-950">
-              Login In Progress...
+              {isPopupAuth
+                ? "Authentication Complete!"
+                : "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.
+              {isPopupAuth
+                ? "You can now close this tab and return to the previous page."
+                : "Wait a moment while we log you in with your code."}
             </p>
           </header>
           <main className="space-y-4 p-6">

hooks/useUser.ts

@@ -11,7 +11,8 @@ import {
   storeAuthDataFallback, 
   getAuthDataFallback, 
   clearAuthDataFallback,
-  isInIframe 
+  isInIframe,
+  isMobileDevice 
 } from "@/lib/iframe-storage";
 
 
@@ -59,6 +60,26 @@ export const useUser = (initialData?: {
 
   const openLoginWindow = async () => {
     setCurrentRoute(window.location.pathname);
+    
+    // If we're in an iframe and on mobile, open login in a new tab
+    if (isInIframe() && isMobileDevice()) {
+      try {
+        // Get the login URL from the server
+        const response = await api.get("/auth/login-url");
+        const { loginUrl } = response.data;
+        
+        // Open in new tab for mobile iframe users
+        window.open(loginUrl, "_blank", "noopener,noreferrer");
+        
+        toast.info("Login opened in new tab. Please complete authentication and return to this page.");
+        return;
+      } catch (error) {
+        console.error("Failed to open login in new tab:", error);
+        // Fall back to normal flow if opening new tab fails
+      }
+    }
+    
+    // Normal login flow for non-iframe or non-mobile users
     return router.push("/auth");
   };
 

lib/iframe-storage.ts

@@ -11,6 +11,20 @@ export const isInIframe = (): boolean => {
   }
 };
 
+export const isMobileDevice = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  
+  // Check user agent for mobile patterns
+  const userAgent = window.navigator.userAgent;
+  const mobilePattern = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
+  
+  // Also check for touch capability and screen size
+  const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  const hasSmallScreen = window.innerWidth <= 768; // Common mobile breakpoint
+  
+  return mobilePattern.test(userAgent) || (hasTouchScreen && hasSmallScreen);
+};
+
 export const STORAGE_KEYS = {
   ACCESS_TOKEN: "deepsite-auth-token-fallback",
   USER_DATA: "deepsite-user-data-fallback",