fix login

app/api/auth/logout/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server";
+import MY_TOKEN_KEY from "@/lib/get-cookie-name";
+
+export async function POST() {
+  const cookieName = MY_TOKEN_KEY();
+  const isProduction = process.env.NODE_ENV === "production";
+  
+  const response = NextResponse.json(
+    { message: "Logged out successfully" },
+    { status: 200 }
+  );
+  
+  // Clear the HTTP-only cookie
+  const cookieOptions = [
+    `${cookieName}=`,
+    "Max-Age=0",
+    "Path=/",
+    "HttpOnly",
+    ...(isProduction ? ["Secure", "SameSite=None"] : ["SameSite=Lax"])
+  ].join("; ");
+  
+  response.headers.set("Set-Cookie", cookieOptions);
+  
+  return response;
+}

app/api/auth/route.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
+import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 
 export async function POST(req: NextRequest) {
   const body = await req.json();
@@ -70,11 +71,17 @@ export async function POST(req: NextRequest) {
   }
   const user = await userResponse.json();
 
-  return NextResponse.json(
+  const cookieName = MY_TOKEN_KEY();
+  const isProduction = process.env.NODE_ENV === "production";
+  
+  // Create response with user data
+  const nextResponse = NextResponse.json(
     {
       access_token: response.access_token,
       expires_in: response.expires_in,
       user,
+      // Include fallback flag for iframe contexts
+      useLocalStorageFallback: true,
     },
     {
       status: 200,
@@ -83,4 +90,17 @@ export async function POST(req: NextRequest) {
       },
     }
   );
+  
+  // Set HTTP-only cookie with proper attributes for iframe support
+  const cookieOptions = [
+    `${cookieName}=${response.access_token}`,
+    `Max-Age=${response.expires_in || 3600}`, // Default 1 hour if not provided
+    "Path=/",
+    "HttpOnly",
+    ...(isProduction ? ["Secure", "SameSite=None"] : ["SameSite=Lax"])
+  ].join("; ");
+  
+  nextResponse.headers.set("Set-Cookie", cookieOptions);
+  
+  return nextResponse;
 }

hooks/useUser.ts

@@ -5,26 +5,36 @@ import { useCookie } from "react-use";
 import { useRouter } from "next/navigation";
 
 import { User } from "@/types";
-import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { api } from "@/lib/api";
 import { toast } from "sonner";
+import { 
+  storeAuthDataFallback, 
+  getAuthDataFallback, 
+  clearAuthDataFallback,
+  isInIframe 
+} from "@/lib/iframe-storage";
 
 
 export const useUser = (initialData?: {
   user: User | null;
   errCode: number | null;
 }) => {
-  const cookie_name = MY_TOKEN_KEY();
   const client = useQueryClient();
   const router = useRouter();
-  const [, setCookie, removeCookie] = useCookie(cookie_name);
   const [currentRoute, setCurrentRoute, removeCurrentRoute] = useCookie("deepsite-currentRoute");
 
   const { data: { user, errCode } = { user: null, errCode: null }, isLoading } =
     useQuery({
       queryKey: ["user.me"],
       queryFn: async () => {
-        return { user: initialData?.user, errCode: initialData?.errCode };
+        // Check for fallback data if no initial data provided and we're in iframe
+        if (!initialData && isInIframe()) {
+          const fallbackData = getAuthDataFallback();
+          if (fallbackData.user && fallbackData.token) {
+            return { user: fallbackData.user, errCode: null };
+          }
+        }
+        return { user: initialData?.user || null, errCode: initialData?.errCode || null };
       },
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
@@ -59,7 +69,12 @@ export const useUser = (initialData?: {
       .post("/auth", { code })
       .then(async (res: any) => {
         if (res.data) {
-          setCookie(res.data.access_token);
+          // Cookie is now set server-side with proper iframe attributes
+          // Also store fallback data for iframe contexts
+          if (res.data.useLocalStorageFallback) {
+            storeAuthDataFallback(res.data.access_token, res.data.user);
+          }
+          
           client.setQueryData(["user.me"], {
             user: res.data.user,
             errCode: null,
@@ -82,12 +97,27 @@ export const useUser = (initialData?: {
   };
 
   const logout = async () => {
-    removeCookie();
-    removeCurrentRoute();
-    router.push("/");
-    toast.success("Logout successful");
-    client.invalidateQueries({ queryKey: ["user.me"] });
-    window.location.reload();
+    try {
+      // Call server endpoint to clear the HTTP-only cookie
+      await api.post("/auth/logout");
+      // Clear fallback storage
+      clearAuthDataFallback();
+      removeCurrentRoute();
+      client.setQueryData(["user.me"], { user: null, errCode: null });
+      router.push("/");
+      toast.success("Logout successful");
+      client.invalidateQueries({ queryKey: ["user.me"] });
+      window.location.reload();
+    } catch (error) {
+      console.error("Logout error:", error);
+      // Even if server call fails, clear client state
+      clearAuthDataFallback();
+      removeCurrentRoute();
+      client.setQueryData(["user.me"], { user: null, errCode: null });
+      router.push("/");
+      toast.success("Logout successful");
+      window.location.reload();
+    }
   };
 
   return {

lib/api.ts

@@ -14,7 +14,6 @@ export const apiServer = axios.create({
     cache: "no-store",
   },
 });
-
 api.interceptors.request.use(
   async (config) => {
     // get the token from cookies
@@ -33,3 +32,4 @@ api.interceptors.request.use(
     return Promise.reject(error);
   }
 );
+

lib/iframe-storage.ts

@@ -0,0 +1,76 @@
+/**
+ * Utility for handling storage in iframe contexts
+ * Falls back to localStorage when cookies are blocked
+ */
+
+export const isInIframe = (): boolean => {
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true; // If we can't access window.top, we're likely in an iframe
+  }
+};
+
+export const STORAGE_KEYS = {
+  ACCESS_TOKEN: "deepsite-auth-token-fallback",
+  USER_DATA: "deepsite-user-data-fallback",
+} as const;
+
+export const iframeStorage = {
+  setItem: (key: string, value: string): void => {
+    try {
+      localStorage.setItem(key, value);
+    } catch (error) {
+      console.warn("Failed to set localStorage item:", error);
+    }
+  },
+
+  getItem: (key: string): string | null => {
+    try {
+      return localStorage.getItem(key);
+    } catch (error) {
+      console.warn("Failed to get localStorage item:", error);
+      return null;
+    }
+  },
+
+  removeItem: (key: string): void => {
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      console.warn("Failed to remove localStorage item:", error);
+    }
+  },
+
+  clear: (): void => {
+    try {
+      localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN);
+      localStorage.removeItem(STORAGE_KEYS.USER_DATA);
+    } catch (error) {
+      console.warn("Failed to clear localStorage items:", error);
+    }
+  },
+};
+
+export const storeAuthDataFallback = (accessToken: string, userData: any): void => {
+  if (isInIframe()) {
+    iframeStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, accessToken);
+    iframeStorage.setItem(STORAGE_KEYS.USER_DATA, JSON.stringify(userData));
+  }
+};
+
+export const getAuthDataFallback = (): { token: string | null; user: any | null } => {
+  if (isInIframe()) {
+    const token = iframeStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
+    const userDataStr = iframeStorage.getItem(STORAGE_KEYS.USER_DATA);
+    const user = userDataStr ? JSON.parse(userDataStr) : null;
+    return { token, user };
+  }
+  return { token: null, user: null };
+};
+
+export const clearAuthDataFallback = (): void => {
+  if (isInIframe()) {
+    iframeStorage.clear();
+  }
+};