@hanzo/ui 8.27.35 → 8.27.39

package/dist/auth/SignIn.cjs

@@ -1,9 +1,44 @@
 'use client';"use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.inOrder = void 0;
 exports.SignIn = SignIn;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Iam = __importStar(require("@hanzo/iam"));
 const iam_1 = require("@hanzo/iam");
 const react_2 = require("@hanzo/iam/react");
 const shell_1 = require("@hanzogui/shell");
@@ -14,6 +49,8 @@ const card_1 = require("../backends/gui/card.cjs");
 const field_1 = require("../backends/gui/field.cjs");
 const input_1 = require("../backends/gui/input.cjs");
 const layout_1 = require("../backends/gui/layout.cjs");
+const account_1 = require("../onboarding/account.cjs");
+const session_1 = require("./session.cjs");
 const FIRST = {
     password: true,
     code: true,
@@ -23,10 +60,83 @@ const FIRST = {
         { name: 'provider-github', type: 'GitHub' },
     ],
 };
+/** IAM's answer to a proven code for an address with no account (the SDK's typed `SignupRequired`). */
+const signupRequired = (err) => {
+    const kind = Iam.SignupRequired;
+    return (typeof kind === 'function' && err instanceof kind) || err?.name === 'SignupRequired';
+};
+const creates = (client) => typeof client.createAccountWithCode === 'function';
 const said = (err) => (err instanceof Error && err.message ? err.message : 'Something went wrong. Try again.');
-function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/callback', providers, via, loginPath = '/login', signupPath = '/signup', termsPath = '/terms', privacyPath = '/privacy', track, authorize = (u) => u, onMethod, onShown, }) {
+/** The providers in the order they are offered: Google, Apple, GitHub, then any others as IAM lists them. */
+const RANK = ['google', 'apple', 'github'];
+const rank = (p) => {
+    const i = RANK.indexOf(p.type.toLowerCase());
+    return i < 0 ? RANK.length : i;
+};
+const inOrder = (providers) => [...providers].sort((a, b) => rank(a) - rank(b));
+exports.inOrder = inOrder;
+async function readMethods(serverUrl, clientId) {
+    const url = new URL(`${serverUrl.replace(/\/+$/, '')}/v1/iam/auth/methods`);
+    url.searchParams.set('clientId', clientId);
+    const res = await fetch(url.toString(), { headers: { Accept: 'application/json' } });
+    const body = (await res.json());
+    if (!res.ok)
+        throw new Error('could not read the sign-in methods');
+    const data = (body.status ? body.data : body) ?? {};
+    const oauth = (Array.isArray(data.oauth) ? data.oauth : []);
+    const named = oauth.filter((p) => typeof p.name === 'string' && typeof p.type === 'string');
+    const google = named.find((p) => p.name === 'provider-google');
+    const id = google?.clientId ?? google?.client_id;
+    return {
+        methods: { password: data.password === true, code: data.code === true, signup: data.signup === true, providers: named.map((p) => ({ name: p.name, type: p.type })) },
+        extras: { phone: data.phone === true || data.sms === true, google: typeof id === 'string' && id ? { clientId: id, nonce: typeof google?.nonce === 'string' ? google.nonce : undefined } : undefined },
+    };
+}
+const taps = (client) => typeof client.loginWithGoogleCredential === 'function';
+const GSI = 'https://accounts.google.com/gsi/client';
+/** Load Google Identity Services once, after the page has painted and is idle. */
+function loadGsi() {
+    const w = window;
+    if (w.google?.accounts?.id)
+        return Promise.resolve(w.google);
+    return new Promise((resolve, reject) => {
+        const tag = document.createElement('script');
+        tag.src = GSI;
+        tag.async = true;
+        tag.onload = () => (w.google?.accounts?.id ? resolve(w.google) : reject(new Error('Google Identity Services did not load')));
+        tag.onerror = () => reject(new Error('Google Identity Services did not load'));
+        document.head.appendChild(tag);
+    });
+}
+const whenIdle = (run) => {
+    let done = false;
+    const go = () => {
+        if (!done)
+            run();
+    };
+    const arm = () => {
+        const ric = window.requestIdleCallback;
+        if (ric)
+            ric(go);
+        else
+            window.setTimeout(go, 1200);
+    };
+    if (document.readyState === 'complete')
+        arm();
+    else
+        window.addEventListener('load', arm, { once: true });
+    return () => {
+        done = true;
+        window.removeEventListener('load', arm);
+    };
+};
+/** A nonce for one One Tap prompt: IAM's when it sends one, else sixteen random bytes. */
+const nonceFor = (given) => given ?? Array.from(crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, '0')).join('');
+const PHONE = /^\+?[\d\s().-]{7,}$/;
+function SignIn({ mode = 'login', frame = true, policy, aupPath = '/aup', oneTap = false, site = 'Hanzo', callbackPath = '/auth/callback', providers, via, loginPath = '/login', signupPath = '/signup', termsPath = '/terms', privacyPath = '/privacy', track, authorize = (u) => u, onMethod, onShown, }) {
     const { config, sdk } = (0, react_2.useIam)();
     const [methods, setMethods] = (0, react_1.useState)(providers ? { ...FIRST, providers } : FIRST);
+    const [extras, setExtras] = (0, react_1.useState)({ phone: false });
     const [step, setStep] = (0, react_1.useState)('email');
     const [email, setEmail] = (0, react_1.useState)('');
     const [password, setPassword] = (0, react_1.useState)('');
@@ -37,20 +147,21 @@ function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/callback
     const origin = via ?? (typeof window === 'undefined' ? '' : window.location.origin);
     const iam = (0, react_1.useMemo)(() => new iam_1.IAM({ ...config, proxyBaseUrl: origin || undefined, redirectUri: origin ? `${origin}${callbackPath}` : config.redirectUri }), [config, origin, callbackPath]);
     (0, react_1.useEffect)(() => {
-        let live = true;
-        iam
-            .methods()
+        let current = true;
+        readMethods(config.serverUrl, config.clientId)
             .then((m) => {
             // A list with no provider in it is IAM saying none; one that failed to
             // arrive keeps the ones Hanzo runs.
-            if (live)
-                setMethods(m);
+            if (!current)
+                return;
+            setMethods(m.methods);
+            setExtras(m.extras);
         })
             .catch(() => { });
         return () => {
-            live = false;
+            current = false;
         };
-    }, [iam]);
+    }, [config.serverUrl, config.clientId]);
     (0, react_1.useEffect)(() => {
         track?.('signup_viewed', { mode });
         onShown?.();
@@ -58,6 +169,39 @@ function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/callback
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const signup = mode === 'signup';
+    // Google One Tap, for a visitor with no session, once IAM has named the client and the SDK can take the credential.
+    const client = extras.google;
+    (0, react_1.useEffect)(() => {
+        if (!oneTap || !client || !taps(iam) || (0, session_1.live)())
+            return;
+        const nonce = nonceFor(client.nonce);
+        const stop = whenIdle(() => {
+            loadGsi()
+                .then((g) => {
+                g.accounts.id.initialize({
+                    client_id: client.clientId,
+                    nonce,
+                    auto_select: false,
+                    cancel_on_tap_outside: true,
+                    callback: (r) => {
+                        if (!r.credential)
+                            return;
+                        onMethod?.('google_one_tap', mode);
+                        track?.('signin_clicked', { method: 'google_one_tap' });
+                        void run(() => iam.loginWithGoogleCredential(r.credential, nonce));
+                    },
+                });
+                g.accounts.id.prompt();
+            })
+                .catch(() => { });
+        });
+        return () => {
+            stop();
+            window.google?.accounts?.id?.cancel();
+        };
+        // One prompt per card and client.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [oneTap, client?.clientId, iam]);
     function commit(method) {
         onMethod?.(method, mode);
         if (signup)
@@ -107,11 +251,13 @@ function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/callback
     function next(e) {
         e.preventDefault();
         const address = email.trim();
-        if (!address.includes('@')) {
-            setWrong('Enter your email address.');
+        // An address gets an emailed code; digits get a texted one, where IAM offers a phone sign-in.
+        if (!address.includes('@') && !(extras.phone && PHONE.test(address))) {
+            setWrong(extras.phone ? 'Enter your email address or phone number.' : 'Enter your email address.');
             return;
         }
-        if (signup) {
+        // A sign-up whose SDK cannot make an account from a code keeps the password form.
+        if (signup && !creates(iam)) {
             void run(async () => {
                 await iam.sendLoginCode(address);
                 setStep('create');
@@ -119,10 +265,10 @@ function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/callback
             return;
         }
         setWrong(null);
-        if (methods.password)
-            setStep('password');
-        else
+        if (methods.code)
             void sendCode();
+        else
+            setStep('password');
     }
     function finish(e) {
         e.preventDefault();
@@ -133,7 +279,17 @@ function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/callback
         }
         else if (step === 'code') {
             commit('code');
-            void run(() => iam.loginWithCode(address, code.trim()));
+            void run(async () => {
+                try {
+                    return await iam.loginWithCode(address, code.trim());
+                }
+                catch (err) {
+                    // The code is good and the address has no account: ask for the terms before making one.
+                    if (!signupRequired(err) || !policy || !creates(iam))
+                        throw err;
+                    setStep('terms');
+                }
+            });
         }
         else if (step === 'create') {
             commit('email');
@@ -147,12 +303,19 @@ function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/callback
         setCode('');
     };
     const query = typeof window === 'undefined' ? '' : window.location.search;
+    if (step === 'terms' && policy && creates(iam)) {
+        return ((0, jsx_runtime_1.jsx)(layout_1.YStack, { position: "fixed", t: 0, l: 0, r: 0, b: 0, z: 1000, bg: "$background", overflow: "scroll", children: (0, jsx_runtime_1.jsx)(account_1.CreateAccount, { site: site, email: email.trim(), busy: busy, wrong: wrong, termsPath: termsPath, aupPath: aupPath, onOther: back, onCreate: () => {
+                    commit('email');
+                    track?.('terms_accepted', { method: 'email-code' });
+                    void run(() => iam.createAccountWithCode(email.trim(), code.trim(), policy));
+                } }) }));
+    }
     const title = signup ? `Create your ${site} account` : `Log in to ${site}`;
     const one = busy ? 'One moment…' : null;
-    return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: "section", "aria-label": signup ? 'Sign up' : 'Log in', items: "center", gap: "$5", minH: 560, pt: 112, pb: 96, px: "$4", children: [(0, jsx_runtime_1.jsx)(card_1.Card, { width: "100%", maxW: 400, children: (0, jsx_runtime_1.jsxs)(card_1.CardContent, { gap: "$5", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$2.5", children: [(0, jsx_runtime_1.jsx)(shell_1.HanzoMark, { size: 20 }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$5", fontWeight: "500", color: "$ink", children: site })] }), (0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, children: title }), step === 'email' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [methods.providers.length ? ((0, jsx_runtime_1.jsx)(layout_1.YStack, { gap: "$2.5", children: methods.providers.map((p) => ((0, jsx_runtime_1.jsxs)(button_1.Button, { type: "button", variant: "secondary", size: "lg", rounded: "$10", width: "100%", disabled: busy, onClick: () => social(p.name, p.type), children: [(0, jsx_runtime_1.jsx)(Brand, { kind: p.type.toLowerCase() }), `Continue with ${p.type}`] }, p.name))) })) : null, methods.providers.length ? (0, jsx_runtime_1.jsx)(field_1.FieldSeparator, { children: "or" }) : null, (0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: (0, jsx_runtime_1.jsx)("form", { onSubmit: next, noValidate: true }), gap: "$4", children: [(0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-email", children: "Email" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-email", type: "email", name: "email", autoComplete: signup ? 'email' : 'username', value: email, onChangeText: setEmail, placeholder: "you@company.com", autoFocus: true })] }), (0, jsx_runtime_1.jsx)(Wrong, { text: wrong }), (0, jsx_runtime_1.jsx)(Go, { busy: busy, children: one ?? 'Continue' })] })] })) : ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: (0, jsx_runtime_1.jsx)("form", { onSubmit: finish, noValidate: true }), gap: "$4", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$2", minW: 0, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Use another email", onClick: back, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowLeft, { size: 16 }) }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, minW: 0, children: email.trim() })] }), step === 'password' ? ((0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-password", children: "Password" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-password", type: "password", name: "password", autoComplete: "current-password", value: password, onChangeText: setPassword, autoFocus: true })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { size: "$2", color: "$quiet", m: 0, children: ["We sent a code to ", email.trim(), ". It is good for a few minutes."] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-code", children: "Code" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-code", name: "code", inputMode: "numeric", autoComplete: "one-time-code", value: code, onChangeText: setCode, autoFocus: true })] })] })), step === 'create' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-name", children: "Your name" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-name", name: "name", autoComplete: "name", value: name, onChangeText: setName })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-new-password", children: "Password" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-new-password", type: "password", name: "password", autoComplete: "new-password", value: password, onChangeText: setPassword })] })] })) : null, (0, jsx_runtime_1.jsx)(Wrong, { text: wrong }), (0, jsx_runtime_1.jsx)(Go, { busy: busy, children: one ?? (step === 'create' ? 'Create account' : 'Continue') }), step === 'password' && methods.code ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => void sendCode(), children: "Email me a code instead" })) : null, step !== 'password' ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => void sendCode(), children: "Send a new code" })) : null] })), signup ? ((0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { size: "$1", color: "$quiet", m: 0, children: ["By creating an account you agree to the ", (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: termsPath, color: "$ink", textDecorationLine: "underline", children: "Terms" }), " and the ", (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: privacyPath, color: "$ink", textDecorationLine: "underline", children: "Privacy Policy" }), "."] })) : null] }) }), (0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { size: "$2", color: "$quiet", m: 0, children: [signup ? 'Have an account? ' : `New to ${site}? `, (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: `${signup ? loginPath : signupPath}${query}`, color: "$ink", textDecorationLine: "underline", children: signup ? 'Log in' : 'Create an account' })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: "section", "aria-label": signup ? 'Sign up' : 'Log in', items: "center", gap: "$5", ...(frame ? { minH: 560, pt: 112, pb: 96, px: '$4' } : {}), children: [(0, jsx_runtime_1.jsx)(card_1.Card, { width: "100%", maxW: 400, children: (0, jsx_runtime_1.jsxs)(card_1.CardContent, { gap: "$5", children: [frame ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$2.5", children: [(0, jsx_runtime_1.jsx)(shell_1.HanzoMark, { size: 20 }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$5", fontWeight: "500", color: "$ink", children: site })] }), (0, jsx_runtime_1.jsx)(layout_1.Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, children: title })] })) : null, step === 'email' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [methods.providers.length ? ((0, jsx_runtime_1.jsx)(layout_1.YStack, { gap: "$2.5", children: (0, exports.inOrder)(methods.providers).map((p) => ((0, jsx_runtime_1.jsxs)(button_1.Button, { type: "button", variant: "secondary", size: "lg", rounded: "$10", width: "100%", disabled: busy, onClick: () => social(p.name, p.type), children: [(0, jsx_runtime_1.jsx)(Brand, { kind: p.type.toLowerCase() }), `Continue with ${p.type}`] }, p.name))) })) : null, methods.providers.length ? (0, jsx_runtime_1.jsx)(field_1.FieldSeparator, { children: "or" }) : null, (0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: (0, jsx_runtime_1.jsx)("form", { onSubmit: next, noValidate: true }), gap: "$4", children: [(0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-email", children: extras.phone ? 'Email or phone' : 'Email' }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-email", type: extras.phone ? 'text' : 'email', name: "email", autoComplete: signup ? 'email' : 'username', value: email, onChangeText: setEmail, placeholder: extras.phone ? 'you@company.com or +1 555 010 0100' : 'you@company.com', autoFocus: true })] }), (0, jsx_runtime_1.jsx)(Wrong, { text: wrong }), (0, jsx_runtime_1.jsx)(Go, { busy: busy, children: one ?? 'Continue' })] })] })) : ((0, jsx_runtime_1.jsxs)(layout_1.YStack, { render: (0, jsx_runtime_1.jsx)("form", { onSubmit: finish, noValidate: true }), gap: "$4", children: [(0, jsx_runtime_1.jsxs)(layout_1.XStack, { items: "center", gap: "$2", minW: 0, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "ghost", size: "icon", "aria-label": extras.phone ? 'Use another email or phone' : 'Use another email', onClick: back, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowLeft, { size: 16 }) }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, minW: 0, children: email.trim() })] }), step === 'password' ? ((0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-password", children: "Password" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-password", type: "password", name: "password", autoComplete: "current-password", value: password, onChangeText: setPassword, autoFocus: true })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { size: "$2", color: "$quiet", m: 0, children: ["We sent a code to ", email.trim(), ". It is good for a few minutes."] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-code", children: "Code" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-code", name: "code", inputMode: "numeric", autoComplete: "one-time-code", value: code, onChangeText: setCode, autoFocus: true })] })] })), step === 'create' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-name", children: "Your name" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-name", name: "name", autoComplete: "name", value: name, onChangeText: setName })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "hanzo-new-password", children: "Password" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "hanzo-new-password", type: "password", name: "password", autoComplete: "new-password", value: password, onChangeText: setPassword })] })] })) : null, (0, jsx_runtime_1.jsx)(Wrong, { text: wrong }), (0, jsx_runtime_1.jsx)(Go, { busy: busy, children: one ?? (step === 'create' ? 'Create account' : 'Continue') }), step === 'password' && methods.code ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => void sendCode(), children: "Email me a code instead" })) : null, step !== 'password' ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => void sendCode(), children: "Send a new code" })) : null, step === 'code' && methods.password && !signup ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => setStep('password'), children: "Use a password instead" })) : null] })), signup ? ((0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { size: "$1", color: "$quiet", m: 0, children: ["By creating an account you agree to the ", (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: termsPath, color: "$ink", textDecorationLine: "underline", children: "Terms" }), " and the ", (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: privacyPath, color: "$ink", textDecorationLine: "underline", children: "Privacy Policy" }), "."] })) : null] }) }), frame ? ((0, jsx_runtime_1.jsxs)(layout_1.Paragraph, { size: "$2", color: "$quiet", m: 0, children: [signup ? 'Have an account? ' : `New to ${site}? `, (0, jsx_runtime_1.jsx)(layout_1.Anchor, { href: `${signup ? loginPath : signupPath}${query}`, color: "$ink", textDecorationLine: "underline", children: signup ? 'Log in' : 'Create an account' })] })) : null] }));
 }
 function Brand({ kind }) {
-    return kind === 'google' ? (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGoogle, { size: 16 }) : kind === 'github' ? (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGithub, { size: 16 }) : null;
+    return kind === 'google' ? (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGoogle, { size: 16 }) : kind === 'apple' ? (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiApple, { size: 16 }) : kind === 'github' ? (0, jsx_runtime_1.jsx)(react_simple_icons_1.SiGithub, { size: 16 }) : null;
 }
 /** The primary action of a step: filled with the ink, full width. */
 function Go({ busy, children }) {

package/dist/auth/SignIn.d.ts

@@ -1,3 +1,4 @@
+import type { Policy } from '../onboarding/state.js';
 /**
  * Signing in and signing up, drawn on the host site's own page.
  *
@@ -29,6 +30,28 @@ export interface Provider {
 }
 export interface SignInProps {
     mode?: Mode;
+    /**
+     * Draw the card alone, for a page that has its own brand, headline and other-mode
+     * line (a hero): no outer padding or minimum height, no brand row, no heading and
+     * no "New to Hanzo?" line. Default true.
+     */
+    frame?: boolean;
+    /**
+     * The versions of the Terms and the Acceptable Use Policy. An address proved by a
+     * code that holds no account is asked to accept them on "Let's create your
+     * account" before IAM makes the account. Without it, that address is refused as
+     * it always was.
+     */
+    policy?: Policy;
+    aupPath?: string;
+    /**
+     * Offer Google One Tap to a visitor with no session who is signed in to Google:
+     * the Google Identity Services script is loaded after first paint, the client id
+     * comes from IAM's auth/methods, and the credential goes to IAM
+     * (`loginWithGoogleCredential`). Drawn only when IAM advertises a Google client id
+     * and the SDK has that call; otherwise nothing is loaded. Default false.
+     */
+    oneTap?: boolean;
     /** The product's name on the card: `Hanzo`. */
     site?: string;
     /** Where IAM sends the browser with the code. Default `/auth/callback`. */
@@ -51,5 +74,6 @@ export interface SignInProps {
     /** The card is drawn (once). */
     onShown?: () => void;
 }
-export declare function SignIn({ mode, site, callbackPath, providers, via, loginPath, signupPath, termsPath, privacyPath, track, authorize, onMethod, onShown, }: SignInProps): import("react").JSX.Element;
+export declare const inOrder: (providers: Provider[]) => Provider[];
+export declare function SignIn({ mode, frame, policy, aupPath, oneTap, site, callbackPath, providers, via, loginPath, signupPath, termsPath, privacyPath, track, authorize, onMethod, onShown, }: SignInProps): import("react").JSX.Element;
 //# sourceMappingURL=SignIn.d.ts.map

package/dist/auth/SignIn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignIn.d.ts","sourceRoot":"","sources":["../../src/auth/SignIn.tsx"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAA;AAIrC,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sFAAsF;IACtF,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;IACtB,mFAAmF;IACnF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wFAAwF;IACxF,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/D,wFAAwF;IACxF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/C,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAcD,wBAAgB,MAAM,CAAC,EACrB,IAAc,EACd,IAAc,EACd,YAA+B,EAC/B,SAAS,EACT,GAAG,EACH,SAAoB,EACpB,UAAsB,EACtB,SAAoB,EACpB,WAAwB,EACxB,KAAK,EACL,SAAoB,EACpB,QAAQ,EACR,OAAO,GACR,EAAE,WAAW,+BA6Ob"}
+{"version":3,"file":"SignIn.d.ts","sourceRoot":"","sources":["../../src/auth/SignIn.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAA;AAIrC,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAA;IACX;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sFAAsF;IACtF,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;IACtB,mFAAmF;IACnF,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wFAAwF;IACxF,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC/D,wFAAwF;IACxF,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/C,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AA8BD,eAAO,MAAM,OAAO,cAAe,QAAQ,EAAE,KAAG,QAAQ,EAAsD,CAAA;AAuE9G,wBAAgB,MAAM,CAAC,EACrB,IAAc,EACd,KAAY,EACZ,MAAM,EACN,OAAgB,EAChB,MAAc,EACd,IAAc,EACd,YAA+B,EAC/B,SAAS,EACT,GAAG,EACH,SAAoB,EACpB,UAAsB,EACtB,SAAoB,EACpB,WAAwB,EACxB,KAAK,EACL,SAAoB,EACpB,QAAQ,EACR,OAAO,GACR,EAAE,WAAW,+BAwTb"}

package/dist/auth/SignIn.js

@@ -1,16 +1,19 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
+import * as Iam from '@hanzo/iam';
 import { IAM, SecondFactor } from '@hanzo/iam';
 import { useIam } from '@hanzo/iam/react';
 import { HanzoMark } from '@hanzogui/shell';
 import { ArrowLeft } from '@hanzogui/lucide-icons-2';
-import { SiGithub, SiGoogle } from '@icons-pack/react-simple-icons';
+import { SiApple, SiGithub, SiGoogle } from '@icons-pack/react-simple-icons';
 import { Button } from '../backends/gui/button.js';
 import { Card, CardContent } from '../backends/gui/card.js';
 import { Field, FieldError, FieldLabel, FieldSeparator } from '../backends/gui/field.js';
 import { Input } from '../backends/gui/input.js';
 import { Anchor, Heading, Paragraph, SizableText, XStack, YStack } from '../backends/gui/layout.js';
+import { CreateAccount } from '../onboarding/account.js';
+import { live } from './session.js';
 const FIRST = {
     password: true,
     code: true,
@@ -20,10 +23,82 @@ const FIRST = {
         { name: 'provider-github', type: 'GitHub' },
     ],
 };
+/** IAM's answer to a proven code for an address with no account (the SDK's typed `SignupRequired`). */
+const signupRequired = (err) => {
+    const kind = Iam.SignupRequired;
+    return (typeof kind === 'function' && err instanceof kind) || err?.name === 'SignupRequired';
+};
+const creates = (client) => typeof client.createAccountWithCode === 'function';
 const said = (err) => (err instanceof Error && err.message ? err.message : 'Something went wrong. Try again.');
-export function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/callback', providers, via, loginPath = '/login', signupPath = '/signup', termsPath = '/terms', privacyPath = '/privacy', track, authorize = (u) => u, onMethod, onShown, }) {
+/** The providers in the order they are offered: Google, Apple, GitHub, then any others as IAM lists them. */
+const RANK = ['google', 'apple', 'github'];
+const rank = (p) => {
+    const i = RANK.indexOf(p.type.toLowerCase());
+    return i < 0 ? RANK.length : i;
+};
+export const inOrder = (providers) => [...providers].sort((a, b) => rank(a) - rank(b));
+async function readMethods(serverUrl, clientId) {
+    const url = new URL(`${serverUrl.replace(/\/+$/, '')}/v1/iam/auth/methods`);
+    url.searchParams.set('clientId', clientId);
+    const res = await fetch(url.toString(), { headers: { Accept: 'application/json' } });
+    const body = (await res.json());
+    if (!res.ok)
+        throw new Error('could not read the sign-in methods');
+    const data = (body.status ? body.data : body) ?? {};
+    const oauth = (Array.isArray(data.oauth) ? data.oauth : []);
+    const named = oauth.filter((p) => typeof p.name === 'string' && typeof p.type === 'string');
+    const google = named.find((p) => p.name === 'provider-google');
+    const id = google?.clientId ?? google?.client_id;
+    return {
+        methods: { password: data.password === true, code: data.code === true, signup: data.signup === true, providers: named.map((p) => ({ name: p.name, type: p.type })) },
+        extras: { phone: data.phone === true || data.sms === true, google: typeof id === 'string' && id ? { clientId: id, nonce: typeof google?.nonce === 'string' ? google.nonce : undefined } : undefined },
+    };
+}
+const taps = (client) => typeof client.loginWithGoogleCredential === 'function';
+const GSI = 'https://accounts.google.com/gsi/client';
+/** Load Google Identity Services once, after the page has painted and is idle. */
+function loadGsi() {
+    const w = window;
+    if (w.google?.accounts?.id)
+        return Promise.resolve(w.google);
+    return new Promise((resolve, reject) => {
+        const tag = document.createElement('script');
+        tag.src = GSI;
+        tag.async = true;
+        tag.onload = () => (w.google?.accounts?.id ? resolve(w.google) : reject(new Error('Google Identity Services did not load')));
+        tag.onerror = () => reject(new Error('Google Identity Services did not load'));
+        document.head.appendChild(tag);
+    });
+}
+const whenIdle = (run) => {
+    let done = false;
+    const go = () => {
+        if (!done)
+            run();
+    };
+    const arm = () => {
+        const ric = window.requestIdleCallback;
+        if (ric)
+            ric(go);
+        else
+            window.setTimeout(go, 1200);
+    };
+    if (document.readyState === 'complete')
+        arm();
+    else
+        window.addEventListener('load', arm, { once: true });
+    return () => {
+        done = true;
+        window.removeEventListener('load', arm);
+    };
+};
+/** A nonce for one One Tap prompt: IAM's when it sends one, else sixteen random bytes. */
+const nonceFor = (given) => given ?? Array.from(crypto.getRandomValues(new Uint8Array(16)), (b) => b.toString(16).padStart(2, '0')).join('');
+const PHONE = /^\+?[\d\s().-]{7,}$/;
+export function SignIn({ mode = 'login', frame = true, policy, aupPath = '/aup', oneTap = false, site = 'Hanzo', callbackPath = '/auth/callback', providers, via, loginPath = '/login', signupPath = '/signup', termsPath = '/terms', privacyPath = '/privacy', track, authorize = (u) => u, onMethod, onShown, }) {
     const { config, sdk } = useIam();
     const [methods, setMethods] = useState(providers ? { ...FIRST, providers } : FIRST);
+    const [extras, setExtras] = useState({ phone: false });
     const [step, setStep] = useState('email');
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
@@ -34,20 +109,21 @@ export function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/c
     const origin = via ?? (typeof window === 'undefined' ? '' : window.location.origin);
     const iam = useMemo(() => new IAM({ ...config, proxyBaseUrl: origin || undefined, redirectUri: origin ? `${origin}${callbackPath}` : config.redirectUri }), [config, origin, callbackPath]);
     useEffect(() => {
-        let live = true;
-        iam
-            .methods()
+        let current = true;
+        readMethods(config.serverUrl, config.clientId)
             .then((m) => {
             // A list with no provider in it is IAM saying none; one that failed to
             // arrive keeps the ones Hanzo runs.
-            if (live)
-                setMethods(m);
+            if (!current)
+                return;
+            setMethods(m.methods);
+            setExtras(m.extras);
         })
             .catch(() => { });
         return () => {
-            live = false;
+            current = false;
         };
-    }, [iam]);
+    }, [config.serverUrl, config.clientId]);
     useEffect(() => {
         track?.('signup_viewed', { mode });
         onShown?.();
@@ -55,6 +131,39 @@ export function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/c
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const signup = mode === 'signup';
+    // Google One Tap, for a visitor with no session, once IAM has named the client and the SDK can take the credential.
+    const client = extras.google;
+    useEffect(() => {
+        if (!oneTap || !client || !taps(iam) || live())
+            return;
+        const nonce = nonceFor(client.nonce);
+        const stop = whenIdle(() => {
+            loadGsi()
+                .then((g) => {
+                g.accounts.id.initialize({
+                    client_id: client.clientId,
+                    nonce,
+                    auto_select: false,
+                    cancel_on_tap_outside: true,
+                    callback: (r) => {
+                        if (!r.credential)
+                            return;
+                        onMethod?.('google_one_tap', mode);
+                        track?.('signin_clicked', { method: 'google_one_tap' });
+                        void run(() => iam.loginWithGoogleCredential(r.credential, nonce));
+                    },
+                });
+                g.accounts.id.prompt();
+            })
+                .catch(() => { });
+        });
+        return () => {
+            stop();
+            window.google?.accounts?.id?.cancel();
+        };
+        // One prompt per card and client.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [oneTap, client?.clientId, iam]);
     function commit(method) {
         onMethod?.(method, mode);
         if (signup)
@@ -104,11 +213,13 @@ export function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/c
     function next(e) {
         e.preventDefault();
         const address = email.trim();
-        if (!address.includes('@')) {
-            setWrong('Enter your email address.');
+        // An address gets an emailed code; digits get a texted one, where IAM offers a phone sign-in.
+        if (!address.includes('@') && !(extras.phone && PHONE.test(address))) {
+            setWrong(extras.phone ? 'Enter your email address or phone number.' : 'Enter your email address.');
             return;
         }
-        if (signup) {
+        // A sign-up whose SDK cannot make an account from a code keeps the password form.
+        if (signup && !creates(iam)) {
             void run(async () => {
                 await iam.sendLoginCode(address);
                 setStep('create');
@@ -116,10 +227,10 @@ export function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/c
             return;
         }
         setWrong(null);
-        if (methods.password)
-            setStep('password');
-        else
+        if (methods.code)
             void sendCode();
+        else
+            setStep('password');
     }
     function finish(e) {
         e.preventDefault();
@@ -130,7 +241,17 @@ export function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/c
         }
         else if (step === 'code') {
             commit('code');
-            void run(() => iam.loginWithCode(address, code.trim()));
+            void run(async () => {
+                try {
+                    return await iam.loginWithCode(address, code.trim());
+                }
+                catch (err) {
+                    // The code is good and the address has no account: ask for the terms before making one.
+                    if (!signupRequired(err) || !policy || !creates(iam))
+                        throw err;
+                    setStep('terms');
+                }
+            });
         }
         else if (step === 'create') {
             commit('email');
@@ -144,12 +265,19 @@ export function SignIn({ mode = 'login', site = 'Hanzo', callbackPath = '/auth/c
         setCode('');
     };
     const query = typeof window === 'undefined' ? '' : window.location.search;
+    if (step === 'terms' && policy && creates(iam)) {
+        return (_jsx(YStack, { position: "fixed", t: 0, l: 0, r: 0, b: 0, z: 1000, bg: "$background", overflow: "scroll", children: _jsx(CreateAccount, { site: site, email: email.trim(), busy: busy, wrong: wrong, termsPath: termsPath, aupPath: aupPath, onOther: back, onCreate: () => {
+                    commit('email');
+                    track?.('terms_accepted', { method: 'email-code' });
+                    void run(() => iam.createAccountWithCode(email.trim(), code.trim(), policy));
+                } }) }));
+    }
     const title = signup ? `Create your ${site} account` : `Log in to ${site}`;
     const one = busy ? 'One moment…' : null;
-    return (_jsxs(YStack, { render: "section", "aria-label": signup ? 'Sign up' : 'Log in', items: "center", gap: "$5", minH: 560, pt: 112, pb: 96, px: "$4", children: [_jsx(Card, { width: "100%", maxW: 400, children: _jsxs(CardContent, { gap: "$5", children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(HanzoMark, { size: 20 }), _jsx(SizableText, { size: "$5", fontWeight: "500", color: "$ink", children: site })] }), _jsx(Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, children: title }), step === 'email' ? (_jsxs(_Fragment, { children: [methods.providers.length ? (_jsx(YStack, { gap: "$2.5", children: methods.providers.map((p) => (_jsxs(Button, { type: "button", variant: "secondary", size: "lg", rounded: "$10", width: "100%", disabled: busy, onClick: () => social(p.name, p.type), children: [_jsx(Brand, { kind: p.type.toLowerCase() }), `Continue with ${p.type}`] }, p.name))) })) : null, methods.providers.length ? _jsx(FieldSeparator, { children: "or" }) : null, _jsxs(YStack, { render: _jsx("form", { onSubmit: next, noValidate: true }), gap: "$4", children: [_jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-email", children: "Email" }), _jsx(Input, { id: "hanzo-email", type: "email", name: "email", autoComplete: signup ? 'email' : 'username', value: email, onChangeText: setEmail, placeholder: "you@company.com", autoFocus: true })] }), _jsx(Wrong, { text: wrong }), _jsx(Go, { busy: busy, children: one ?? 'Continue' })] })] })) : (_jsxs(YStack, { render: _jsx("form", { onSubmit: finish, noValidate: true }), gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": "Use another email", onClick: back, children: _jsx(ArrowLeft, { size: 16 }) }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, minW: 0, children: email.trim() })] }), step === 'password' ? (_jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-password", children: "Password" }), _jsx(Input, { id: "hanzo-password", type: "password", name: "password", autoComplete: "current-password", value: password, onChangeText: setPassword, autoFocus: true })] })) : (_jsxs(_Fragment, { children: [_jsxs(Paragraph, { size: "$2", color: "$quiet", m: 0, children: ["We sent a code to ", email.trim(), ". It is good for a few minutes."] }), _jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-code", children: "Code" }), _jsx(Input, { id: "hanzo-code", name: "code", inputMode: "numeric", autoComplete: "one-time-code", value: code, onChangeText: setCode, autoFocus: true })] })] })), step === 'create' ? (_jsxs(_Fragment, { children: [_jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-name", children: "Your name" }), _jsx(Input, { id: "hanzo-name", name: "name", autoComplete: "name", value: name, onChangeText: setName })] }), _jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-new-password", children: "Password" }), _jsx(Input, { id: "hanzo-new-password", type: "password", name: "password", autoComplete: "new-password", value: password, onChangeText: setPassword })] })] })) : null, _jsx(Wrong, { text: wrong }), _jsx(Go, { busy: busy, children: one ?? (step === 'create' ? 'Create account' : 'Continue') }), step === 'password' && methods.code ? (_jsx(Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => void sendCode(), children: "Email me a code instead" })) : null, step !== 'password' ? (_jsx(Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => void sendCode(), children: "Send a new code" })) : null] })), signup ? (_jsxs(Paragraph, { size: "$1", color: "$quiet", m: 0, children: ["By creating an account you agree to the ", _jsx(Anchor, { href: termsPath, color: "$ink", textDecorationLine: "underline", children: "Terms" }), " and the ", _jsx(Anchor, { href: privacyPath, color: "$ink", textDecorationLine: "underline", children: "Privacy Policy" }), "."] })) : null] }) }), _jsxs(Paragraph, { size: "$2", color: "$quiet", m: 0, children: [signup ? 'Have an account? ' : `New to ${site}? `, _jsx(Anchor, { href: `${signup ? loginPath : signupPath}${query}`, color: "$ink", textDecorationLine: "underline", children: signup ? 'Log in' : 'Create an account' })] })] }));
+    return (_jsxs(YStack, { render: "section", "aria-label": signup ? 'Sign up' : 'Log in', items: "center", gap: "$5", ...(frame ? { minH: 560, pt: 112, pb: 96, px: '$4' } : {}), children: [_jsx(Card, { width: "100%", maxW: 400, children: _jsxs(CardContent, { gap: "$5", children: [frame ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "center", gap: "$2.5", children: [_jsx(HanzoMark, { size: 20 }), _jsx(SizableText, { size: "$5", fontWeight: "500", color: "$ink", children: site })] }), _jsx(Heading, { render: "h1", size: "$8", fontWeight: "500", color: "$ink", m: 0, children: title })] })) : null, step === 'email' ? (_jsxs(_Fragment, { children: [methods.providers.length ? (_jsx(YStack, { gap: "$2.5", children: inOrder(methods.providers).map((p) => (_jsxs(Button, { type: "button", variant: "secondary", size: "lg", rounded: "$10", width: "100%", disabled: busy, onClick: () => social(p.name, p.type), children: [_jsx(Brand, { kind: p.type.toLowerCase() }), `Continue with ${p.type}`] }, p.name))) })) : null, methods.providers.length ? _jsx(FieldSeparator, { children: "or" }) : null, _jsxs(YStack, { render: _jsx("form", { onSubmit: next, noValidate: true }), gap: "$4", children: [_jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-email", children: extras.phone ? 'Email or phone' : 'Email' }), _jsx(Input, { id: "hanzo-email", type: extras.phone ? 'text' : 'email', name: "email", autoComplete: signup ? 'email' : 'username', value: email, onChangeText: setEmail, placeholder: extras.phone ? 'you@company.com or +1 555 010 0100' : 'you@company.com', autoFocus: true })] }), _jsx(Wrong, { text: wrong }), _jsx(Go, { busy: busy, children: one ?? 'Continue' })] })] })) : (_jsxs(YStack, { render: _jsx("form", { onSubmit: finish, noValidate: true }), gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$2", minW: 0, children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": extras.phone ? 'Use another email or phone' : 'Use another email', onClick: back, children: _jsx(ArrowLeft, { size: 16 }) }), _jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, flex: 1, minW: 0, children: email.trim() })] }), step === 'password' ? (_jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-password", children: "Password" }), _jsx(Input, { id: "hanzo-password", type: "password", name: "password", autoComplete: "current-password", value: password, onChangeText: setPassword, autoFocus: true })] })) : (_jsxs(_Fragment, { children: [_jsxs(Paragraph, { size: "$2", color: "$quiet", m: 0, children: ["We sent a code to ", email.trim(), ". It is good for a few minutes."] }), _jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-code", children: "Code" }), _jsx(Input, { id: "hanzo-code", name: "code", inputMode: "numeric", autoComplete: "one-time-code", value: code, onChangeText: setCode, autoFocus: true })] })] })), step === 'create' ? (_jsxs(_Fragment, { children: [_jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-name", children: "Your name" }), _jsx(Input, { id: "hanzo-name", name: "name", autoComplete: "name", value: name, onChangeText: setName })] }), _jsxs(Field, { gap: "$2", children: [_jsx(FieldLabel, { htmlFor: "hanzo-new-password", children: "Password" }), _jsx(Input, { id: "hanzo-new-password", type: "password", name: "password", autoComplete: "new-password", value: password, onChangeText: setPassword })] })] })) : null, _jsx(Wrong, { text: wrong }), _jsx(Go, { busy: busy, children: one ?? (step === 'create' ? 'Create account' : 'Continue') }), step === 'password' && methods.code ? (_jsx(Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => void sendCode(), children: "Email me a code instead" })) : null, step !== 'password' ? (_jsx(Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => void sendCode(), children: "Send a new code" })) : null, step === 'code' && methods.password && !signup ? (_jsx(Button, { type: "button", variant: "linkMuted", size: "lg", disabled: busy, onClick: () => setStep('password'), children: "Use a password instead" })) : null] })), signup ? (_jsxs(Paragraph, { size: "$1", color: "$quiet", m: 0, children: ["By creating an account you agree to the ", _jsx(Anchor, { href: termsPath, color: "$ink", textDecorationLine: "underline", children: "Terms" }), " and the ", _jsx(Anchor, { href: privacyPath, color: "$ink", textDecorationLine: "underline", children: "Privacy Policy" }), "."] })) : null] }) }), frame ? (_jsxs(Paragraph, { size: "$2", color: "$quiet", m: 0, children: [signup ? 'Have an account? ' : `New to ${site}? `, _jsx(Anchor, { href: `${signup ? loginPath : signupPath}${query}`, color: "$ink", textDecorationLine: "underline", children: signup ? 'Log in' : 'Create an account' })] })) : null] }));
 }
 function Brand({ kind }) {
-    return kind === 'google' ? _jsx(SiGoogle, { size: 16 }) : kind === 'github' ? _jsx(SiGithub, { size: 16 }) : null;
+    return kind === 'google' ? _jsx(SiGoogle, { size: 16 }) : kind === 'apple' ? _jsx(SiApple, { size: 16 }) : kind === 'github' ? _jsx(SiGithub, { size: 16 }) : null;
 }
 /** The primary action of a step: filled with the ink, full width. */
 function Go({ busy, children }) {