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>
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
"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">
|
|
<MicrosoftButton callbackURL={callbackUrl} />
|
|
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<Separator className="w-full" />
|
|
</div>
|
|
<div className="relative flex justify-center text-xs uppercase">
|
|
<span className="bg-white dark:bg-slate-900 px-2 text-muted-foreground">
|
|
Or continue with email
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<MagicLinkForm />
|
|
</div>
|
|
);
|
|
}
|