Support iOS Google auth and notifications

Author: Llewellyn500

app/account/page.tsx

@@ -6,11 +6,13 @@ import { useRouter } from "next/navigation";
 import {
   createUserWithEmailAndPassword,
   deleteUser,
+  getRedirectResult,
   getAdditionalUserInfo,
   GoogleAuthProvider,
   sendPasswordResetEmail,
   signInWithEmailAndPassword,
   signInWithPopup,
+  signInWithRedirect,
   signOut,
   updateProfile,
 } from "firebase/auth";
@@ -48,6 +50,15 @@ const fieldClassName =
 const primaryButtonClassName =
   "group inline-flex min-h-16 w-full items-center justify-between bg-white px-5 font-semibold uppercase text-black transition-colors duration-300 hover:bg-[#8a2ae3] hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#8a2ae3] active:translate-y-px disabled:cursor-not-allowed disabled:opacity-40";
 const CMS_PROFILE_URL = "https://cms.lap.onl/admin/profile";
+const GOOGLE_REDIRECT_MODE_KEY = "lap_google_redirect_mode";
+
+function shouldUseGoogleRedirect() {
+  if (typeof navigator === "undefined") return false;
+  return (
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+  );
+}
 
 async function checkCurrentDevice() {
   const payload = await getDeviceRiskPayload();
@@ -179,6 +190,83 @@ export default function AccountPage() {
     setHandle(profile?.handle || "");
   }, [profile?.handle]);
 
+  useEffect(() => {
+    let cancelled = false;
+
+    const completeGoogleRedirect = async () => {
+      const pendingMode = window.sessionStorage.getItem(GOOGLE_REDIRECT_MODE_KEY);
+
+      try {
+        const credential = await getRedirectResult(auth);
+        if (!credential || cancelled) return;
+
+        window.sessionStorage.removeItem(GOOGLE_REDIRECT_MODE_KEY);
+        setBusy(true);
+        setError("");
+        setMessage("");
+
+        const redirectMode = pendingMode === "register" ? "register" : "signin";
+        const isNewFirebaseUser = getAdditionalUserInfo(credential)?.isNewUser === true;
+
+        if (redirectMode === "signin" && isNewFirebaseUser) {
+          await deleteUser(credential.user);
+          if (!cancelled) {
+            setMode("register");
+            setError("No account was found. Create an account with Google below.");
+          }
+          return;
+        }
+
+        const syncedRisk = await syncCurrentDevice();
+        if (syncedRisk.blocked) {
+          if (isNewFirebaseUser) {
+            await deleteUser(credential.user).catch(() => undefined);
+          }
+          await signOut(auth).catch(() => undefined);
+          if (!cancelled) {
+            setError(
+              syncedRisk.reason ||
+                "This browser installation has been blocked due to Community Guidelines violations.",
+            );
+          }
+          return;
+        }
+
+        const existingProfile = await getExistingPublicProfile(credential.user);
+        if (existingProfile) {
+          await syncPublicUser(credential.user);
+          await refreshProfile();
+        }
+
+        if (!cancelled) {
+          if (redirectMode === "register") {
+            setMessage(
+              existingProfile?.handle
+                ? `Your account already exists as @${existingProfile.handle}.`
+                : "Account created. Add your photo and handle to finish.",
+            );
+          } else {
+            setMessage(
+              existingProfile
+                ? "Signed in."
+                : "Welcome back. Finish your photo and handle to continue.",
+            );
+          }
+        }
+      } catch (nextError) {
+        window.sessionStorage.removeItem(GOOGLE_REDIRECT_MODE_KEY);
+        if (!cancelled) setError(friendlyAuthError(nextError));
+      } finally {
+        if (!cancelled) setBusy(false);
+      }
+    };
+
+    void completeGoogleRedirect();
+    return () => {
+      cancelled = true;
+    };
+  }, [refreshProfile]);
+
   useEffect(() => {
     if (!isStaff || profile?.handle) return;
     setMessage((current) =>
@@ -322,7 +410,14 @@ export default function AccountPage() {
         return;
       }
 
-      const credential = await signInWithPopup(auth, new GoogleAuthProvider());
+      const provider = new GoogleAuthProvider();
+      if (shouldUseGoogleRedirect()) {
+        window.sessionStorage.setItem(GOOGLE_REDIRECT_MODE_KEY, mode);
+        await signInWithRedirect(auth, provider);
+        return;
+      }
+
+      const credential = await signInWithPopup(auth, provider);
       const isNewFirebaseUser = getAdditionalUserInfo(credential)?.isNewUser === true;
 
       if (mode === "signin" && isNewFirebaseUser) {

components/NotificationBell.tsx

@@ -51,6 +51,29 @@ export type NotificationItem = {
   };
 };
 
+type BrowserNotificationSupport =
+  | "checking"
+  | "available"
+  | "ios-browser"
+  | "unsupported";
+
+function isAppleMobileBrowser() {
+  if (typeof navigator === "undefined") return false;
+  return (
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)
+  );
+}
+
+function isStandaloneWebApp() {
+  if (typeof window === "undefined") return false;
+  const standaloneNavigator = navigator as Navigator & { standalone?: boolean };
+  return (
+    window.matchMedia("(display-mode: standalone)").matches ||
+    standaloneNavigator.standalone === true
+  );
+}
+
 function formatTimeAgo(timestamp?: Timestamp): string {
   if (!timestamp) return "Just now";
   const seconds = Math.floor((Date.now() - timestamp.toMillis()) / 1000);
@@ -80,12 +103,19 @@ export default function NotificationBell({
   const [filter, setFilter] = useState<"all" | "unread">("all");
   const popoverRef = useRef<HTMLDivElement>(null);
   const [browserPermission, setBrowserPermission] = useState<NotificationPermission>("default");
+  const [browserSupport, setBrowserSupport] =
+    useState<BrowserNotificationSupport>("checking");
   const isInitialSnapshotRef = useRef(true);
 
   // Check browser notification permission
   useEffect(() => {
     if (typeof window !== "undefined" && "Notification" in window) {
       setBrowserPermission(Notification.permission);
+      setBrowserSupport("available");
+    } else if (isAppleMobileBrowser() && !isStandaloneWebApp()) {
+      setBrowserSupport("ios-browser");
+    } else {
+      setBrowserSupport("unsupported");
     }
   }, []);
 
@@ -141,18 +171,37 @@ export default function NotificationBell({
                 Notification.permission === "granted"
               ) {
                 try {
-                  const popup = new Notification(data.title || "New Notification", {
+                  const options: NotificationOptions = {
                     body: data.message || "You received a new notification on L.A.P Tutorials.",
-                    icon: "/favicon.ico",
+                    icon: "/icons/android-chrome-192x192.png",
                     tag: change.doc.id,
-                  });
-                  popup.onclick = () => {
-                    window.focus();
-                    if (data.link) {
-                      router.push(data.link);
-                    }
-                    popup.close();
+                    data: { url: data.link || "/" },
                   };
+
+                  if ("serviceWorker" in navigator) {
+                    void navigator.serviceWorker.ready
+                      .then((registration) =>
+                        registration.showNotification(
+                          data.title || "New Notification",
+                          options,
+                        ),
+                      )
+                      .catch((popupErr) => {
+                        console.error("Error displaying service worker notification:", popupErr);
+                      });
+                  } else {
+                    const popup = new Notification(
+                      data.title || "New Notification",
+                      options,
+                    );
+                    popup.onclick = () => {
+                      window.focus();
+                      if (data.link) {
+                        router.push(data.link);
+                      }
+                      popup.close();
+                    };
+                  }
                 } catch (popupErr) {
                   console.error("Error displaying native notification:", popupErr);
                 }
@@ -375,20 +424,25 @@ export default function NotificationBell({
           </div>
 
           {/* Browser notification prompt banner */}
-          {browserPermission === "default" && (
+          {browserSupport === "available" && browserPermission === "default" && (
             <button
               type="button"
               onClick={requestBrowserPermission}
               className="flex w-full items-center justify-between border-b border-white/10 bg-[#8a2ae3]/10 px-4 py-2 text-left text-xs text-[#8a2ae3] transition-colors hover:bg-[#8a2ae3]/20"
             >
               <span className="flex items-center gap-1.5 font-medium">
-                <Bell className="h-3.5 w-3.5" /> Enable browser pop-ups
+                <Bell className="h-3.5 w-3.5" /> Enable notifications
               </span>
               <span className="font-mono text-[10px] font-bold uppercase underline">
                 Enable
               </span>
             </button>
           )}
+          {browserSupport === "ios-browser" && (
+            <div className="border-b border-white/10 bg-[#8a2ae3]/10 px-4 py-2 text-xs leading-relaxed text-[#c997ff]">
+              Add L.A.P Docs to your iPad Home Screen, open it there, then enable notifications.
+            </div>
+          )}
 
           {/* Filter Tabs */}
           <div className="flex border-b border-white/10 text-xs font-mono">

public/sw.js

@@ -32,6 +32,25 @@ self.addEventListener('activate', (event) => {
   self.clients.claim();
 });
 
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+
+  const requestedUrl = event.notification.data?.url || '/';
+  const destination = new URL(requestedUrl, self.location.origin);
+  const safeUrl = destination.origin === self.location.origin ? destination.href : self.location.origin;
+
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((windows) => {
+      for (const client of windows) {
+        if ('navigate' in client && 'focus' in client) {
+          return client.navigate(safeUrl).then(() => client.focus());
+        }
+      }
+      return self.clients.openWindow(safeUrl);
+    })
+  );
+});
+
 self.addEventListener('fetch', (event) => {
   if (event.request.method !== 'GET') return;