authfyio-react 0.3.9

package/dist/ui/PricingTable.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { useCheckout } from '../hooks.js';
+import { ensureStylesInjected } from './styles.js';
+/**
+ * Renders every SubscriptionPlanEntity the instance exposes as a cards grid.
+ * Clicking a card triggers `useCheckout().startCheckout(planId, cycle)` which
+ * redirects the browser to Stripe Checkout.
+ */
+export function PricingTable({ includePlans, defaultBillingCycle = 'monthly', ctaLabel = 'Subscribe', }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const [plans, setPlans] = useState(null);
+    const [cycle, setCycle] = useState(defaultBillingCycle);
+    const { startCheckout, isLoading } = useCheckout();
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        fetch(`${baseUrl}/v1/billing/plans`, { credentials: 'include' })
+            .then((r) => (r.ok ? r.json() : null))
+            .then((body) => {
+            const rows = body?.plans ?? [];
+            if (includePlans?.length) {
+                const set = new Set(includePlans.map((p) => p.toLowerCase()));
+                setPlans(rows.filter((p) => set.has(p.name.toLowerCase())));
+            }
+            else {
+                setPlans(rows);
+            }
+        })
+            .catch(() => setPlans([]));
+    }, [baseUrl, includePlans?.join(',')]);
+    async function select(planId) {
+        setError(null);
+        try {
+            await startCheckout(planId, cycle);
+        }
+        catch (err) {
+            setError(err?.message ?? 'Could not start checkout.');
+        }
+    }
+    if (plans === null) {
+        return (_jsx("div", { className: "af-card", style: { maxWidth: 920 }, children: _jsx("div", { className: "af-subtitle", children: "Loading plans\u2026" }) }));
+    }
+    if (plans.length === 0) {
+        return (_jsx("div", { className: "af-card", style: { maxWidth: 920 }, children: _jsx("div", { className: "af-subtitle", children: "No plans configured for this instance." }) }));
+    }
+    return (_jsxs("div", { style: { fontFamily: 'var(--af-font, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif)', maxWidth: 920, margin: '0 auto' }, children: [_jsx("div", { style: { display: 'inline-flex', padding: 3, background: 'rgba(17,24,39,0.04)', borderRadius: 999, marginBottom: 20 }, children: ['monthly', 'annual'].map((c) => (_jsx("button", { type: "button", onClick: () => setCycle(c), style: {
+                        padding: '6px 14px',
+                        fontSize: 12.5,
+                        fontWeight: 500,
+                        border: 0,
+                        borderRadius: 999,
+                        background: cycle === c ? '#fff' : 'transparent',
+                        color: cycle === c ? '#111827' : '#6b7280',
+                        cursor: 'pointer',
+                        boxShadow: cycle === c ? '0 1px 2px rgba(17,24,39,0.06)' : 'none',
+                    }, children: c === 'monthly' ? 'Monthly' : 'Annual (save 20%)' }, c))) }), _jsx("div", { style: { display: 'grid', gap: 16, gridTemplateColumns: `repeat(auto-fit, minmax(240px, 1fr))` }, children: plans.map((plan) => {
+                    const cents = cycle === 'annual' && plan.annualPriceCents ? plan.annualPriceCents : plan.monthlyPriceCents;
+                    const priceLabel = cents === 0 ? 'Free' : `$${(cents / 100).toFixed(cents % 100 === 0 ? 0 : 2)}`;
+                    const perLabel = cents === 0 ? '' : cycle === 'annual' ? '/year' : '/month';
+                    return (_jsxs("div", { style: {
+                            padding: 22,
+                            background: '#fff',
+                            border: '1px solid rgba(17,24,39,0.08)',
+                            borderRadius: 16,
+                            boxShadow: '0 1px 3px rgba(17,24,39,0.04)',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [_jsx("div", { style: { fontSize: 14.5, fontWeight: 600, color: '#111827' }, children: plan.name }), plan.description && (_jsx("p", { style: { margin: '4px 0 16px', fontSize: 12.5, color: '#6b7280', minHeight: 32 }, children: plan.description })), _jsxs("div", { style: { fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', color: '#111827' }, children: [priceLabel, perLabel && _jsxs("span", { style: { fontSize: 13, color: '#6b7280', fontWeight: 400 }, children: [" ", perLabel] })] }), _jsx("button", { type: "button", className: "af-btn af-btn-primary", style: { marginTop: 20 }, disabled: isLoading, onClick: () => select(plan.id), children: isLoading ? 'Opening checkout…' : ctaLabel })] }, plan.id));
+                }) }), error && _jsx("div", { className: "af-error", style: { marginTop: 16 }, children: error })] }));
+}

package/dist/ui/SignIn.d.ts

@@ -0,0 +1,23 @@
+type Method = 'emailPassword' | 'usernamePassword' | 'magicLink' | 'emailCode' | 'phoneOtp' | 'passkey';
+type SocialProvider = 'google' | 'github' | 'facebook' | 'apple' | 'microsoft' | 'linkedin' | 'discord' | 'slack' | 'twitter';
+export type SignInProps = {
+    redirectUrl?: string;
+    signUpUrl?: string;
+    title?: string;
+    subtitle?: string;
+    showBranding?: boolean;
+    brandText?: string;
+    /** Override social providers shown. Default: whatever the dashboard has enabled. */
+    socialProviders?: SocialProvider[];
+    /** Override methods shown. Default: whatever the dashboard has enabled. */
+    methods?: Method[];
+    /** Default selected tab. Default = first available method. */
+    defaultMethod?: Method;
+    onSignIn?: (result: {
+        userId: string;
+        sessionId: string;
+    }) => void;
+};
+export declare function SignIn({ redirectUrl, signUpUrl, title, subtitle, showBranding, brandText, socialProviders: socialOverride, methods: methodsOverride, defaultMethod, onSignIn, }: SignInProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SignIn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignIn.d.ts","sourceRoot":"","sources":["../../src/ui/SignIn.tsx"],"names":[],"mappings":"AAQA,KAAK,MAAM,GACP,eAAe,GACf,kBAAkB,GAClB,WAAW,GACX,WAAW,GACX,UAAU,GACV,SAAS,CAAC;AAEd,KAAK,cAAc,GACf,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,OAAO,GACP,WAAW,GACX,UAAU,GACV,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AA+Bd,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,WAAiB,EACjB,SAAsB,EACtB,KAAiC,EACjC,QAA2D,EAC3D,YAAmB,EACnB,SAAsB,EACtB,eAAe,EAAE,cAAc,EAC/B,OAAO,EAAE,eAAe,EACxB,aAAa,EACb,QAAQ,GACT,EAAE,WAAW,2CA0Mb"}

package/dist/ui/SignIn.js

@@ -0,0 +1,489 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useAuthfyio } from '../provider.js';
+import { ensureStylesInjected } from './styles.js';
+const METHOD_LABEL = {
+    emailPassword: 'Email',
+    usernamePassword: 'Username',
+    magicLink: 'Magic link',
+    emailCode: 'Email code',
+    phoneOtp: 'SMS code',
+    passkey: 'Passkey',
+};
+const SOCIAL_LABELS = {
+    google: 'Google',
+    github: 'GitHub',
+    facebook: 'Facebook',
+    apple: 'Apple',
+    microsoft: 'Microsoft',
+    linkedin: 'LinkedIn',
+    discord: 'Discord',
+    slack: 'Slack',
+    twitter: 'X / Twitter',
+};
+const WALLET_LABELS = {
+    metamask: 'MetaMask',
+    coinbase_wallet: 'Coinbase Wallet',
+    okx_wallet: 'OKX Wallet',
+    solana: 'Solana',
+    base: 'Base',
+};
+export function SignIn({ redirectUrl = '/', signUpUrl = '/sign-up', title = 'Sign in to your account', subtitle = 'Welcome back — choose how you want to sign in.', showBranding = true, brandText = 'Authfyio', socialProviders: socialOverride, methods: methodsOverride, defaultMethod, onSignIn, }) {
+    useEffect(ensureStylesInjected, []);
+    const { client } = useAuthfyio();
+    const baseUrl = client.baseUrl;
+    const [config, setConfig] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        client.fetchAuthConfig().then((c) => {
+            if (cancelled)
+                return;
+            setConfig(c);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    const enabledMethods = (() => {
+        if (methodsOverride)
+            return methodsOverride;
+        if (!config)
+            return [];
+        const m = [];
+        if (config.signIn.emailPassword)
+            m.push('emailPassword');
+        if (config.signIn.usernamePassword)
+            m.push('usernamePassword');
+        if (config.signIn.magicLink)
+            m.push('magicLink');
+        if (config.signIn.emailCode)
+            m.push('emailCode');
+        if (config.signIn.phoneOtp)
+            m.push('phoneOtp');
+        if (config.signIn.passkey)
+            m.push('passkey');
+        return m;
+    })();
+    const enabledSocial = (socialOverride ?? (config?.socialProviders ?? [])).filter((p) => SOCIAL_LABELS[p]);
+    const enabledWallets = (config?.web3Wallets ?? []).filter((w) => WALLET_LABELS[w]);
+    // OAuth /authorize URLs need three things attached to the anchor
+    // (none of which a custom header can carry through a top-level
+    // navigation):
+    //   - publishable_key  → tenant routing
+    //   - return_url       → customer-side bridge that lands cookies on
+    //                        the right origin and finishes the redirect
+    // After Google calls back, the API mints a one-time token and 302s
+    // the browser to ${return_url}?ott=…; the authfyio-nextjs/proxy
+    // 0.2.2+ catches `/api/af/oauth-finish` and exchanges the OTT.
+    const oauthQuery = (() => {
+        if (typeof window === 'undefined')
+            return '';
+        const params = new URLSearchParams();
+        if (client.publishableKey)
+            params.set('publishable_key', client.publishableKey);
+        const finish = new URL('/api/af/oauth-finish', window.location.origin);
+        finish.searchParams.set('to', redirectUrl);
+        params.set('return_url', finish.toString());
+        return '?' + params.toString();
+    })();
+    const showSignUpLink = methodsOverride ? true : (config?.signUp.enabled ?? true);
+    const legal = config?.legal;
+    const brand = config?.branding;
+    const cardStyle = brand?.primaryColor
+        ? { ['--af-primary']: brand.primaryColor }
+        : {};
+    const effectiveBrandText = brand?.appName ?? brandText;
+    const showPoweredBy = brand && !brand.removeBranding;
+    const [method, setMethod] = useState(defaultMethod ?? null);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
+    useEffect(() => {
+        if (enabledMethods.length === 0)
+            return;
+        if (!method || !enabledMethods.includes(method))
+            setMethod(enabledMethods[0]);
+    }, [enabledMethods.join(','), method]);
+    const activeMethod = method && enabledMethods.includes(method) ? method : enabledMethods[0] ?? null;
+    return (_jsxs("div", { className: "af-card", role: "form", "aria-label": "Sign in", style: cardStyle, children: [showBranding && (_jsxs("div", { className: "af-brand", children: [brand?.logoUrl ? (_jsx("img", { src: brand.logoUrl, alt: "", style: { width: 26, height: 26, borderRadius: 8, objectFit: 'cover' } })) : (_jsx("span", { className: "af-brand-mark", "aria-hidden": true })), _jsx("span", { className: "af-brand-text", children: effectiveBrandText })] })), _jsx("h1", { className: "af-title", children: title }), _jsx("p", { className: "af-subtitle", children: subtitle }), (enabledSocial.length > 0 || enabledWallets.length > 0) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "af-social-grid", children: [enabledSocial.map((p) => (_jsxs("a", { className: "af-social-btn", href: `${baseUrl}/v1/auth/oauth/${p}/authorize${oauthQuery}`, "aria-label": `Continue with ${SOCIAL_LABELS[p]}`, children: [_jsx(SocialIcon, { provider: p }), "Continue with ", SOCIAL_LABELS[p]] }, p))), enabledWallets.map((w) => (_jsxs("a", { className: "af-social-btn", href: `${baseUrl}/v1/auth/web3/${w}/authorize${oauthQuery}`, "aria-label": `Continue with ${WALLET_LABELS[w]}`, children: [_jsx(WalletIcon, { wallet: w }), "Continue with ", WALLET_LABELS[w]] }, w)))] }), enabledMethods.length > 0 && _jsx("div", { className: "af-divider", children: "or" })] })), enabledMethods.length > 1 && (_jsx("div", { className: "af-tabs", role: "tablist", children: enabledMethods.map((m) => (_jsx("button", { type: "button", role: "tab", "aria-selected": activeMethod === m, className: `af-tab${activeMethod === m ? ' is-active' : ''}`, onClick: () => {
+                        setError(null);
+                        setNotice(null);
+                        setMethod(m);
+                    }, children: METHOD_LABEL[m] }, m))) })), activeMethod === 'emailPassword' && (_jsx(PasswordForm, { baseUrl: baseUrl, identifier: "email", redirectUrl: redirectUrl, onSignIn: onSignIn, onError: setError })), activeMethod === 'usernamePassword' && (_jsx(PasswordForm, { baseUrl: baseUrl, identifier: "username", redirectUrl: redirectUrl, onSignIn: onSignIn, onError: setError })), activeMethod === 'magicLink' && (_jsx(MagicLinkForm, { baseUrl: baseUrl, onError: setError, onNotice: setNotice })), activeMethod === 'emailCode' && (_jsx(EmailCodeForm, { baseUrl: baseUrl, redirectUrl: redirectUrl, onError: setError, onNotice: setNotice, onSignIn: onSignIn })), activeMethod === 'phoneOtp' && (_jsx(SmsOtpForm, { baseUrl: baseUrl, redirectUrl: redirectUrl, onError: setError, onNotice: setNotice, onSignIn: onSignIn })), activeMethod === 'passkey' && (_jsx(PasskeyForm, { baseUrl: baseUrl, redirectUrl: redirectUrl, onError: setError, onSignIn: onSignIn })), config && enabledMethods.length === 0 && enabledSocial.length === 0 && (_jsx("div", { className: "af-error", children: "No sign-in methods are enabled for this app. Enable at least one method (email/password, username/password, magic link, email code, SMS, passkey, or a social provider) in the Authfyio dashboard." })), error && _jsx("div", { className: "af-error", children: error }), notice && !error && _jsx("div", { className: "af-notice", children: notice }), (legal?.termsOfServiceUrl || legal?.privacyPolicyUrl) && (_jsxs("div", { className: "af-legal", children: ["By continuing you agree to our", ' ', legal?.termsOfServiceUrl && (_jsxs(_Fragment, { children: [_jsx("a", { href: legal.termsOfServiceUrl, target: "_blank", rel: "noreferrer", children: "Terms" }), legal?.privacyPolicyUrl ? ' and ' : '.'] })), legal?.privacyPolicyUrl && (_jsxs(_Fragment, { children: [_jsx("a", { href: legal.privacyPolicyUrl, target: "_blank", rel: "noreferrer", children: "Privacy Policy" }), "."] }))] })), showSignUpLink && (_jsxs("div", { className: "af-footer", children: ["Don't have an account? ", _jsx("a", { href: signUpUrl, children: "Sign up" })] })), showPoweredBy && (_jsxs("div", { className: "af-powered", children: ["Powered by ", _jsx("a", { href: "https://authfyio.com", target: "_blank", rel: "noreferrer", children: "Authfyio" })] }))] }));
+}
+/* ─────────────────── password (email or username) ─────────────────── */
+function PasswordForm({ baseUrl, identifier, redirectUrl, onSignIn, onError, }) {
+    const [id, setId] = useState('');
+    const [password, setPassword] = useState('');
+    const [loading, setLoading] = useState(false);
+    // When the account has a verified second factor, the password step returns
+    // `needs_mfa` + a short-lived token instead of a session; we then show the
+    // code screen below.
+    const [mfaToken, setMfaToken] = useState(null);
+    const [mfaCode, setMfaCode] = useState('');
+    const [forgot, setForgot] = useState(false);
+    function complete(body) {
+        if (onSignIn)
+            onSignIn(body);
+        if (typeof window !== 'undefined')
+            window.location.href = redirectUrl;
+    }
+    async function submit(e) {
+        e.preventDefault();
+        setLoading(true);
+        onError(null);
+        try {
+            const path = identifier === 'username'
+                ? '/v1/auth/sign-in/username-password'
+                : '/v1/auth/sign-in/email-password';
+            const body = identifier === 'username' ? { username: id, password } : { email: id, password };
+            const res = await fetch(`${baseUrl}${path}`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            if (!res.ok) {
+                const b = await res.json().catch(() => ({}));
+                throw new Error(b?.message ?? 'Invalid credentials.');
+            }
+            const data = (await res.json());
+            if (data?.status === 'needs_mfa') {
+                setMfaToken(data.mfaToken);
+                return;
+            }
+            complete(data);
+        }
+        catch (err) {
+            onError(err?.message ?? 'Sign-in failed.');
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    async function submitMfa(e) {
+        e.preventDefault();
+        setLoading(true);
+        onError(null);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/sign-in/mfa/verify`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ mfaToken, code: mfaCode.trim() }),
+            });
+            if (!res.ok) {
+                const b = await res.json().catch(() => ({}));
+                throw new Error(b?.message ?? 'Invalid code.');
+            }
+            complete((await res.json()));
+        }
+        catch (err) {
+            onError(err?.message ?? 'Verification failed.');
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    if (forgot && identifier === 'email') {
+        return (_jsx(ForgotPasswordForm, { baseUrl: baseUrl, redirectUrl: redirectUrl, initialEmail: id, onError: onError, onBack: () => {
+                onError(null);
+                setForgot(false);
+            } }));
+    }
+    if (mfaToken) {
+        return (_jsxs("form", { onSubmit: submitMfa, children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Authentication code" }), _jsx("input", { className: "af-input", inputMode: "numeric", autoComplete: "one-time-code", required: true, value: mfaCode, onChange: (e) => setMfaCode(e.target.value), placeholder: "123456" }), _jsx("p", { className: "af-sub", children: "Enter the code from your authenticator app, or a backup code." })] }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: loading, children: loading ? 'Verifying…' : 'Verify' }) })] }));
+    }
+    return (_jsxs("form", { onSubmit: submit, children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: identifier === 'username' ? 'Username' : 'Email' }), _jsx("input", { className: "af-input", type: identifier === 'username' ? 'text' : 'email', autoComplete: identifier === 'username' ? 'username' : 'email', required: true, value: id, onChange: (e) => setId(e.target.value), placeholder: identifier === 'username' ? 'yourname' : 'you@company.com' })] }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Password" }), _jsx("input", { className: "af-input", type: "password", autoComplete: "current-password", required: true, value: password, onChange: (e) => setPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] }), identifier === 'email' && (_jsx("div", { className: "af-row", children: _jsx("button", { type: "button", className: "af-link", onClick: () => {
+                        onError(null);
+                        setForgot(true);
+                    }, children: "Forgot password?" }) })), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: loading, children: loading ? 'Signing in…' : 'Sign in' }) })] }));
+}
+/* ─────────────────── forgot password (code-based reset) ─────────────────── */
+function ForgotPasswordForm({ baseUrl, redirectUrl, initialEmail, onError, onBack, }) {
+    const [email, setEmail] = useState(initialEmail);
+    const [code, setCode] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [step, setStep] = useState('request');
+    const [busy, setBusy] = useState(false);
+    const [notice, setNotice] = useState(null);
+    async function request(e) {
+        e.preventDefault();
+        setBusy(true);
+        onError(null);
+        try {
+            // Always succeeds server-side (no account enumeration); advance to the
+            // code step regardless so we don't leak whether the email is registered.
+            await fetch(`${baseUrl}/v1/auth/password/forgot`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email }),
+            });
+            setStep('reset');
+            setNotice(`If an account exists for ${email}, we sent a 6-digit reset code.`);
+        }
+        catch {
+            onError('Could not start password reset. Try again.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function reset(e) {
+        e.preventDefault();
+        setBusy(true);
+        onError(null);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/password/reset`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email, code: code.trim(), newPassword }),
+            });
+            if (!res.ok) {
+                const b = await res.json().catch(() => ({}));
+                throw new Error(b?.message ?? 'Invalid or expired code.');
+            }
+            // Reset signs the user in — go to the post-sign-in destination.
+            if (typeof window !== 'undefined')
+                window.location.href = redirectUrl;
+        }
+        catch (err) {
+            onError(err?.message ?? 'Could not reset password.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: step === 'request' ? request : reset, children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Email" }), _jsx("input", { className: "af-input", type: "email", autoComplete: "email", required: true, disabled: step === 'reset', value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com" })] }), step === 'reset' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Reset code" }), _jsx("input", { className: "af-input", inputMode: "numeric", autoComplete: "one-time-code", required: true, value: code, onChange: (e) => setCode(e.target.value), placeholder: "123456" })] }), _jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "New password" }), _jsx("input", { className: "af-input", type: "password", autoComplete: "new-password", required: true, minLength: 8, value: newPassword, onChange: (e) => setNewPassword(e.target.value), placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })] })] })), notice && _jsx("p", { className: "af-sub", children: notice }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: busy, children: busy ? 'Please wait…' : step === 'request' ? 'Send reset code' : 'Reset password' }) }), _jsx("div", { className: "af-row", children: _jsx("button", { type: "button", className: "af-link", onClick: onBack, children: "Back to sign in" }) })] }));
+}
+/* ─────────────────── magic link ─────────────────── */
+function MagicLinkForm({ baseUrl, onError, onNotice, }) {
+    const [email, setEmail] = useState('');
+    const [sending, setSending] = useState(false);
+    async function submit(e) {
+        e.preventDefault();
+        setSending(true);
+        onError(null);
+        onNotice(null);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/sign-in/magic-link`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email }),
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                throw new Error(body?.message ?? 'Could not send link.');
+            }
+            onNotice(`We sent a sign-in link to ${email}. It expires in 15 minutes.`);
+        }
+        catch (err) {
+            onError(err?.message ?? 'Could not send link.');
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: submit, children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Email" }), _jsx("input", { className: "af-input", type: "email", autoComplete: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com" })] }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: sending, children: sending ? 'Sending link…' : 'Email me a sign-in link' }) })] }));
+}
+/* ─────────────────── email code ─────────────────── */
+function EmailCodeForm({ baseUrl, redirectUrl, onError, onNotice, onSignIn, }) {
+    const [email, setEmail] = useState('');
+    const [code, setCode] = useState('');
+    const [step, setStep] = useState('send');
+    const [busy, setBusy] = useState(false);
+    async function send(e) {
+        e.preventDefault();
+        onError(null);
+        onNotice(null);
+        setBusy(true);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/sign-in/email-code`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email }),
+            });
+            if (!res.ok)
+                throw new Error('Could not send code.');
+            setStep('verify');
+            onNotice(`We sent a 6-digit code to ${email}.`);
+        }
+        catch (err) {
+            onError(err?.message ?? 'Could not send code.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function verify(e) {
+        e.preventDefault();
+        onError(null);
+        onNotice(null);
+        setBusy(true);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/email-code/verify`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email, code }),
+            });
+            if (!res.ok)
+                throw new Error('Invalid code.');
+            const body = (await res.json());
+            if (onSignIn)
+                onSignIn(body);
+            if (typeof window !== 'undefined')
+                window.location.href = redirectUrl;
+        }
+        catch (err) {
+            onError(err?.message ?? 'Verification failed.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: step === 'send' ? send : verify, children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Email" }), _jsx("input", { className: "af-input", type: "email", autoComplete: "email", required: true, disabled: step === 'verify', value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com" })] }), step === 'verify' && (_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "6-digit code" }), _jsx("input", { className: "af-input", inputMode: "numeric", pattern: "[0-9]*", maxLength: 6, required: true, value: code, onChange: (e) => setCode(e.target.value.replace(/\D/g, '')), placeholder: "000000" })] })), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: busy, children: busy ? 'Working…' : step === 'send' ? 'Email me a code' : 'Verify & sign in' }) })] }));
+}
+/* ─────────────────── SMS OTP ─────────────────── */
+function SmsOtpForm({ baseUrl, redirectUrl, onError, onNotice, onSignIn, }) {
+    const [phone, setPhone] = useState('');
+    const [code, setCode] = useState('');
+    const [step, setStep] = useState('send');
+    const [busy, setBusy] = useState(false);
+    async function send(e) {
+        e.preventDefault();
+        onError(null);
+        onNotice(null);
+        setBusy(true);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/sign-in/sms-otp`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ phone }),
+            });
+            if (!res.ok)
+                throw new Error('Could not send code.');
+            setStep('verify');
+            onNotice(`We sent a 6-digit code to ${phone}. It expires in 5 minutes.`);
+        }
+        catch (err) {
+            onError(err?.message ?? 'Could not send code.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function verify(e) {
+        e.preventDefault();
+        onError(null);
+        onNotice(null);
+        setBusy(true);
+        try {
+            const res = await fetch(`${baseUrl}/v1/auth/sms/verify`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ phone, code }),
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                throw new Error(body?.message ?? 'Invalid code.');
+            }
+            const body = (await res.json());
+            if (onSignIn)
+                onSignIn(body);
+            if (typeof window !== 'undefined')
+                window.location.href = redirectUrl;
+        }
+        catch (err) {
+            onError(err?.message ?? 'Verification failed.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: step === 'send' ? send : verify, children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Phone number" }), _jsx("input", { className: "af-input", type: "tel", autoComplete: "tel", required: true, disabled: step === 'verify', value: phone, onChange: (e) => setPhone(e.target.value), placeholder: "+14155551234" })] }), step === 'verify' && (_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "6-digit code" }), _jsx("input", { className: "af-input", inputMode: "numeric", pattern: "[0-9]*", maxLength: 6, required: true, value: code, onChange: (e) => setCode(e.target.value.replace(/\D/g, '')), placeholder: "000000" })] })), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: busy, children: busy ? 'Working…' : step === 'send' ? 'Send code' : 'Verify & sign in' }) })] }));
+}
+/* ─────────────────── Passkey ─────────────────── */
+function PasskeyForm({ baseUrl, redirectUrl, onError, onSignIn, }) {
+    const [email, setEmail] = useState('');
+    const [busy, setBusy] = useState(false);
+    async function submit(e) {
+        e.preventDefault();
+        onError(null);
+        setBusy(true);
+        try {
+            const begin = await fetch(`${baseUrl}/v1/auth/passkeys/authenticate/begin`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ email }),
+            });
+            if (!begin.ok)
+                throw new Error('Could not start passkey sign-in.');
+            const options = await begin.json();
+            const mod = await (new Function('return import("@simplewebauthn/browser")')()).catch(() => null);
+            const startAuthentication = mod?.startAuthentication;
+            if (!startAuthentication)
+                throw new Error('Install @simplewebauthn/browser to use passkey sign-in.');
+            const asserted = await startAuthentication(options);
+            const complete = await fetch(`${baseUrl}/v1/auth/passkeys/authenticate/complete`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ response: asserted }),
+            });
+            if (!complete.ok)
+                throw new Error('Passkey sign-in failed.');
+            const body = (await complete.json());
+            if (onSignIn)
+                onSignIn(body);
+            if (typeof window !== 'undefined')
+                window.location.href = redirectUrl;
+        }
+        catch (err) {
+            onError(err?.message ?? 'Passkey sign-in failed.');
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    return (_jsxs("form", { onSubmit: submit, children: [_jsxs("div", { className: "af-field", children: [_jsx("label", { className: "af-label", children: "Email" }), _jsx("input", { className: "af-input", type: "email", autoComplete: "email webauthn", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "you@company.com" })] }), _jsx("div", { className: "af-primary-row", children: _jsx("button", { type: "submit", className: "af-btn af-btn-primary", disabled: busy, children: busy ? 'Checking passkey…' : 'Continue with passkey' }) })] }));
+}
+/* ─────────────────── helpers ─────────────────── */
+function WalletIcon({ wallet }) {
+    // Tiny mark — purely decorative. Lets the buttons line up visually
+    // with the OAuth ones without bundling a wallet icon library.
+    const colors = {
+        metamask: '#F6851B',
+        coinbase_wallet: '#0052FF',
+        okx_wallet: '#000000',
+        solana: '#9945FF',
+        base: '#0052FF',
+    };
+    return (_jsx("span", { className: "af-social-icon", "aria-hidden": true, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: colors[wallet] ?? '#6b7280',
+            color: 'white',
+            borderRadius: 4,
+            fontSize: 9,
+            fontWeight: 700,
+            textTransform: 'uppercase',
+        }, children: (WALLET_LABELS[wallet] ?? wallet).slice(0, 1) }));
+}
+function SocialIcon({ provider }) {
+    if (provider === 'google') {
+        return (_jsxs("svg", { className: "af-social-icon", viewBox: "0 0 48 48", "aria-hidden": true, children: [_jsx("path", { fill: "#EA4335", d: "M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.6 2.4 30.2 0 24 0 14.7 0 6.7 5.4 2.9 13.2l7.9 6.2C12.5 13.4 17.8 9.5 24 9.5z" }), _jsx("path", { fill: "#4285F4", d: "M46.5 24.5c0-1.6-.2-3.1-.5-4.5H24v8.5h12.7c-.6 3-2.3 5.5-4.9 7.2l7.6 5.9c4.4-4 7.1-10 7.1-17.1z" }), _jsx("path", { fill: "#FBBC05", d: "M10.8 28.6c-.5-1.3-.8-2.7-.8-4.1s.3-2.8.8-4.1l-7.9-6.2C1.3 17.5 0 20.6 0 24s1.3 6.5 3 9.8l7.8-6.2z" }), _jsx("path", { fill: "#34A853", d: "M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.6-5.9c-2.1 1.4-4.8 2.3-8.3 2.3-6.2 0-11.5-3.9-13.3-9.5l-7.9 6.2C6.7 42.6 14.7 48 24 48z" })] }));
+    }
+    if (provider === 'github') {
+        return (_jsx("svg", { className: "af-social-icon", viewBox: "0 0 24 24", "aria-hidden": true, children: _jsx("path", { fill: "#111", d: "M12 .5C5.65.5.5 5.66.5 12.02c0 5.1 3.29 9.42 7.86 10.95.57.1.79-.25.79-.55v-2c-3.2.7-3.87-1.37-3.87-1.37-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.35.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.07-.12-.29-.51-1.46.11-3.05 0 0 .96-.31 3.15 1.17.92-.26 1.9-.39 2.88-.4.98 0 1.96.13 2.88.4 2.19-1.48 3.14-1.17 3.14-1.17.63 1.59.23 2.76.12 3.05.73.8 1.18 1.82 1.18 3.07 0 4.4-2.69 5.37-5.25 5.65.41.35.78 1.04.78 2.1v3.12c0 .31.21.66.79.55A11.51 11.51 0 0 0 23.5 12.02C23.5 5.66 18.35.5 12 .5z" }) }));
+    }
+    return null;
+}

package/dist/ui/SignUp.d.ts

@@ -0,0 +1,18 @@
+type SocialProvider = 'google' | 'github' | 'facebook' | 'apple' | 'microsoft' | 'linkedin' | 'discord' | 'slack' | 'twitter';
+export type SignUpProps = {
+    redirectUrl?: string;
+    signInUrl?: string;
+    title?: string;
+    subtitle?: string;
+    showBranding?: boolean;
+    brandText?: string;
+    /** Override social providers shown. Default: whatever the dashboard has enabled. */
+    socialProviders?: SocialProvider[];
+    onSignUp?: (result: {
+        userId: string;
+        sessionId: string;
+    }) => void;
+};
+export declare function SignUp({ redirectUrl, signInUrl, title, subtitle, showBranding, brandText, socialProviders: socialOverride, onSignUp, }: SignUpProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SignUp.d.ts.map

package/dist/ui/SignUp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignUp.d.ts","sourceRoot":"","sources":["../../src/ui/SignUp.tsx"],"names":[],"mappings":"AAQA,KAAK,cAAc,GACf,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,OAAO,GACP,WAAW,GACX,UAAU,GACV,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AA8Bd,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,WAAiB,EACjB,SAAsB,EACtB,KAA6B,EAC7B,QAAwC,EACxC,YAAmB,EACnB,SAAsB,EACtB,eAAe,EAAE,cAAc,EAC/B,QAAQ,GACT,EAAE,WAAW,2CAwUb"}