// Pre-app sign-in: the Magic Auth / SSO screen shown when the backend says // nobody is signed in, plus the provider marks it renders. This is the only UI // that runs before the app has an identity. const GoogleMark = () => ( ); const AuthBootstrap = () => { const params = new URLSearchParams(window.location.search || ""); const initialEmail = params.get("email") || (window.Flow && window.Flow.CURRENT_USER && window.Flow.CURRENT_USER.email) || ""; const [email, setEmail] = React.useState(initialEmail); const [code, setCode] = React.useState(""); const [sent, setSent] = React.useState(params.get("sent") === "1"); const [showCode, setShowCode] = React.useState(false); const [busy, setBusy] = React.useState(false); const [cooldownUntil, setCooldownUntil] = React.useState(0); const [now, setNow] = React.useState(Date.now()); const [error, setError] = React.useState(() => { const e = params.get("error"); if (e === "bad_state") return "That sign-in session expired or opened in a different browser. Start sign-in again from here."; if (e === "expired_magic_link") return "That sign-in link expired or was already used. Send yourself a new one."; if (e === "magic_link_failed") return "That sign-in link could not be verified. Send a new link and try again."; if (e) return "Sign-in could not be completed. Send a new link and try again."; return ""; }); const returnTo = authReturnTo(); const api = window.PreambleAPI || {}; const track = (name, props) => { if (window.PreambleObservability && window.PreambleObservability.track) { window.PreambleObservability.track(name, props || {}); } }; React.useEffect(() => { const t = window.setInterval(() => setNow(Date.now()), 1000); return () => window.clearInterval(t); }, []); const submitEmail = (e) => { e.preventDefault(); if (!api.startMagicAuth || !email.trim()) return; setBusy(true); setError(""); track("auth.magic_start", { type: "auth", metadata: { returnTo } }); api.startMagicAuth(email.trim(), returnTo).then((res) => { setBusy(false); setSent(true); setShowCode(false); setCooldownUntil(Date.now() + 30000); if (res && res.email) setEmail(res.email); }).catch((err) => { setBusy(false); setError((err && err.message) || "Could not send a sign-in code."); }); }; const submitCode = (e) => { e.preventDefault(); if (!api.verifyMagicAuth || !code.trim()) return; setBusy(true); setError(""); track("auth.magic_verify", { type: "auth", metadata: { returnTo } }); api.verifyMagicAuth(email.trim(), code.trim(), returnTo).then((res) => { const next = res && res.needsWorkspace ? "/app/setup" : ((res && res.returnTo) || returnTo || "/app"); window.location.href = next; }).catch((err) => { setBusy(false); setError((err && err.message) || "Could not verify that code."); }); }; const googleHref = "/api/v1/auth/login?provider=GoogleOAuth&returnTo=" + encodeURIComponent(returnTo); const ssoHref = "/api/v1/auth/login?returnTo=" + encodeURIComponent(returnTo); const remaining = Math.max(0, Math.ceil((cooldownUntil - now) / 1000)); return (
Preamble
{error &&
{error}
} {!sent ? (

Start with your work email.

We’ll send a private sign-in link. New customer admins can create their company workspace after email verification.

or
Continue with Google Enterprise SSO
) : (

Check your inbox

We sent a magic link to {email}. Open it in this browser to finish signing in.

{!showCode && ( )} {showCode && (
)}
Open Gmail
)}
); };