From bee35e02606a343470daa1c77c04e7c9f146909d Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Thu, 7 May 2026 07:05:52 -0400
Subject: [PATCH] fix(auth): reduce mobile sign-in friction (PWA +
 auto-redirect)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three independent changes that together stop the mobile re-auth churn:

- app/layout.tsx: add appleWebApp metadata so iOS "Add to Home Screen"
  launches Pulse in true standalone mode (own cookie jar, persists
  across Safari memory pressure)
- components/auth/sign-in-form.tsx: when /auth/sign-in mounts and
  ?callbackUrl starts with /mobile, auto-call authClient.signIn.social
  for Microsoft. With an active M365 browser session this redirect is
  silent — the user lands on /mobile/* with no tap.
- app/auth/sign-in/page.tsx: wrap SignInForm in <Suspense> (required
  by Next.js 16 because SignInForm now uses useSearchParams)

Pairs with operator-side env bump SESSION_TIMEOUT_SECONDS=2592000
(30 days, .env files are gitignored — applied on the running container
via docker compose up -d --force-recreate app).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/auth/sign-in/page.tsx        |  5 ++++-
 app/layout.tsx                   |  5 +++++
 components/auth/sign-in-form.tsx | 35 ++++++++++++++++++++++++++++----
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/app/auth/sign-in/page.tsx b/app/auth/sign-in/page.tsx
index 475924a..0a65abe 100644
--- a/app/auth/sign-in/page.tsx
+++ b/app/auth/sign-in/page.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { SignInForm } from "@/components/auth/sign-in-form";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
@@ -16,7 +17,9 @@ export default function SignInPage() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <SignInForm />
+        <Suspense fallback={null}>
+          <SignInForm />
+        </Suspense>
       </CardContent>
     </Card>
   );
diff --git a/app/layout.tsx b/app/layout.tsx
index eb9e0ba..f2fdee7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -37,6 +37,11 @@ export const metadata: Metadata = {
     shortcut: "/favicon.png",
     apple: "/wulff-logo.png",
   },
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "Pulse",
+  },
 };
 
 export const viewport: Viewport = {
diff --git a/components/auth/sign-in-form.tsx b/components/auth/sign-in-form.tsx
index c8cbf9e..80e6fe4 100644
--- a/components/auth/sign-in-form.tsx
+++ b/components/auth/sign-in-form.tsx
@@ -1,16 +1,44 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { Loader2 } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
 import { MagicLinkForm } from "./magic-link-form";
 import { MicrosoftButton } from "./microsoft-button";
 import { Separator } from "@/components/ui/separator";
 
 export function SignInForm() {
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") || "/";
+  const isMobileFlow = callbackUrl.startsWith("/mobile");
+  const [autoRedirecting, setAutoRedirecting] = useState(isMobileFlow);
+  const triggered = useRef(false);
+
+  useEffect(() => {
+    if (!isMobileFlow || triggered.current) return;
+    triggered.current = true;
+    authClient.signIn
+      .social({ provider: "microsoft", callbackURL: callbackUrl })
+      .then((result) => {
+        if (result?.error) setAutoRedirecting(false);
+      })
+      .catch(() => setAutoRedirecting(false));
+  }, [isMobileFlow, callbackUrl]);
+
+  if (autoRedirecting) {
+    return (
+      <div className="flex flex-col items-center gap-3 py-8">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">Signing you in with Microsoft 365…</p>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
-      {/* Microsoft OAuth */}
-      <MicrosoftButton />
+      <MicrosoftButton callbackURL={callbackUrl} />
 
-      {/* Divider */}
       <div className="relative">
         <div className="absolute inset-0 flex items-center">
           <Separator className="w-full" />
@@ -22,7 +50,6 @@ export function SignInForm() {
         </div>
       </div>
 
-      {/* Magic Link */}
       <MagicLinkForm />
     </div>
   );