fix: use redirect sign-in on mobile to fix Safari login (#4067)

apps/web/src/app/helpers/firebase/auth.ts

@@ -1,9 +1,11 @@
 import {
   getAuth,
+  getRedirectResult,
   GoogleAuthProvider,
   onAuthStateChanged,
   signInWithEmailAndPassword,
   signInWithPopup,
+  signInWithRedirect,
   signOut,
   type User,
 } from 'firebase/auth';
@@ -13,7 +15,16 @@ import firebaseApp from '.';
 const auth = getAuth(firebaseApp);
 const provider = new GoogleAuthProvider();
 
-export const googleSignIn = async () => signInWithPopup(auth, provider);
+// Safari mobile blocks the cross-origin popup flow silently, so redirect there.
+export const googleSignIn = async (isMobile: boolean) => {
+  if (isMobile) {
+    await signInWithRedirect(auth, provider);
+    return null;
+  }
+  return signInWithPopup(auth, provider);
+};
+
+export const getGoogleRedirectResult = async () => getRedirectResult(auth);
 
 export const googleSignOut = async () => signOut(auth);
 

apps/web/src/app/web-ext/page.tsx

@@ -9,6 +9,7 @@ import {
   UserGroupIcon,
 } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/react';
+import { useOs } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
@@ -17,18 +18,36 @@ import {
   googleSignIn,
   googleSignOut,
   emailAndPasswordSignIn,
+  getGoogleRedirectResult,
 } from '@app/helpers/firebase/auth';
 import { useUser } from '@app/provider/AuthProvider';
 
 import useWebPreload from './hooks/useWebPreload';
 
 export default function Web() {
   const router = useRouter();
+  const os = useOs();
   const { isLoggedIn } = useUser();
   const { isLoading, preloadData, clearData } = useWebPreload();
   const [shouldPreloadData, setShouldPreloadData] = useState(false);
   const [isSigningOut, setIsSigningOut] = useState(false);
 
+  const isMobile = os === 'ios' || os === 'android';
+
+  // Mobile sign-in uses a redirect, which reloads the page and loses the
+  // shouldPreloadData state set in handleSignIn — recover it on return.
+  useEffect(() => {
+    getGoogleRedirectResult()
+      .then((result) => {
+        if (result?.user) {
+          setShouldPreloadData(true);
+        }
+      })
+      .catch((error: unknown) => {
+        console.error('Redirect sign-in failed', error);
+      });
+  }, []);
+
   /**
    * Preload data only when:
    * 1. User is logged-in: isLoggedIn
@@ -49,17 +68,21 @@ export default function Web() {
   }, [isLoading, preloadData, shouldPreloadData, isLoggedIn]);
 
   const handleSignIn = async () => {
-    const testCredentialsJson = localStorage.getItem(TEST_CREDENTIALS_KEY);
-    if (testCredentialsJson) {
-      const testCredentials = JSON.parse(testCredentialsJson);
-      await emailAndPasswordSignIn(
-        testCredentials.email,
-        testCredentials.password
-      );
-    } else {
-      await googleSignIn();
+    try {
+      const testCredentialsJson = localStorage.getItem(TEST_CREDENTIALS_KEY);
+      if (testCredentialsJson) {
+        const testCredentials = JSON.parse(testCredentialsJson);
+        await emailAndPasswordSignIn(
+          testCredentials.email,
+          testCredentials.password
+        );
+      } else {
+        await googleSignIn(isMobile);
+      }
+      setShouldPreloadData(true);
+    } catch (error) {
+      console.error('Sign-in failed', error);
     }
-    setShouldPreloadData(true);
   };
 
   const handleSignOut = async () => {