@edge-base/auth-ui-react 0.1.1

package/README.md

@@ -0,0 +1,180 @@
+<h1 align="center">@edge-base/auth-ui-react</h1>
+
+<p align="center">
+  <b>Pre-built React authentication UI for EdgeBase</b><br>
+  Drop in a provider, forms, and auth helpers on top of the EdgeBase web client
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@edge-base/auth-ui-react"><img src="https://img.shields.io/npm/v/%40edge-base%2Fauth-ui-react?color=brightgreen" alt="npm"></a>&nbsp;
+  <a href="https://edgebase.fun/docs/authentication"><img src="https://img.shields.io/badge/docs-auth-blue" alt="Docs"></a>&nbsp;
+  <a href="https://github.com/edge-base/edgebase/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"></a>
+</p>
+
+<p align="center">
+  React · Vite · Next.js · SPA auth flows · Email/password · OAuth · MFA
+</p>
+
+<p align="center">
+  <a href="https://edgebase.fun/docs/authentication"><b>Authentication</b></a> ·
+  <a href="https://edgebase.fun/docs/authentication/email-password"><b>Email/Password</b></a> ·
+  <a href="https://edgebase.fun/docs/authentication/magic-link"><b>Magic Link</b></a> ·
+  <a href="https://edgebase.fun/docs/authentication/mfa"><b>MFA</b></a> ·
+  <a href="https://edgebase.fun/docs/sdks/nextjs"><b>Next.js Guide</b></a>
+</p>
+
+---
+
+`@edge-base/auth-ui-react` adds ready-to-use React auth components on top of [`@edge-base/web`](https://www.npmjs.com/package/@edge-base/web).
+
+It is a good fit when you want:
+
+- a working sign-in and sign-up UI quickly
+- OAuth, magic link, OTP, and MFA flows without rebuilding every screen
+- a headless-first component set that still ships a default stylesheet
+- a simple auth context and `useAuth()` hook for the current user
+
+This package is for React in browser-oriented apps. It is not the admin SDK, and it is not a React Native package.
+
+> Beta: the package is already usable, but some APIs and components may still evolve before general availability.
+
+## Documentation Map
+
+- [Authentication Overview](https://edgebase.fun/docs/authentication)
+  Core auth concepts and flow selection
+- [Email/Password](https://edgebase.fun/docs/authentication/email-password)
+  Standard credential sign-in flows
+- [Magic Link](https://edgebase.fun/docs/authentication/magic-link)
+  Passwordless email flows
+- [Email OTP](https://edgebase.fun/docs/authentication/email-otp)
+  One-time code flows
+- [MFA](https://edgebase.fun/docs/authentication/mfa)
+  Multi-factor authentication setup and verification
+- [Next.js Integration](https://edgebase.fun/docs/sdks/nextjs)
+  Example integration in a full React framework
+
+## For AI Coding Assistants
+
+This package ships with an `llms.txt` file for AI-assisted React auth integration.
+
+You can find it:
+
+- after install: `node_modules/@edge-base/auth-ui-react/llms.txt`
+- in the repository: [llms.txt](https://github.com/edge-base/edgebase/blob/main/packages/sdk/js/packages/auth-ui-react/llms.txt)
+
+Use it when you want an agent to:
+
+- wrap the app with `AuthProvider` correctly
+- pair this package with `@edge-base/web` instead of `admin` or `ssr`
+- choose between `AuthForm`, individual components, and `useAuth()`
+- avoid guessing config field names or default views
+
+## Installation
+
+```bash
+npm install @edge-base/web @edge-base/auth-ui-react
+```
+
+Make sure your app already has React and React DOM.
+
+## Quick Start
+
+```tsx
+import { createClient } from '@edge-base/web';
+import { AuthProvider, AuthForm } from '@edge-base/auth-ui-react';
+import '@edge-base/auth-ui-react/styles.css';
+
+const client = createClient('https://your-project.edgebase.fun');
+
+export function LoginScreen() {
+  return (
+    <AuthProvider
+      client={client}
+      config={{
+        providers: ['google', 'github'],
+        magicLinkEnabled: true,
+      }}
+    >
+      <AuthForm onSuccess={() => window.location.assign('/dashboard')} />
+    </AuthProvider>
+  );
+}
+```
+
+## Core Building Blocks
+
+| Export | Use it for |
+| --- | --- |
+| `AuthProvider` | Provide the EdgeBase web client and shared UI config |
+| `AuthForm` | A full auth flow wrapper that switches between common views |
+| `SignIn`, `SignUp` | Individual credential screens |
+| `SocialButtons` | OAuth provider buttons |
+| `MagicLink`, `EmailOTP`, `PhoneOTP` | Alternative sign-in flows |
+| `ForgotPassword`, `MFAChallenge` | Recovery and multi-factor flows |
+| `useAuth()` | Read the current user, loading state, and sign out |
+| `useAuthContext()` | Access the raw provider context when building custom UI |
+
+## Auth Context
+
+If you want your own UI while still using the provided auth state hook:
+
+```tsx
+import { useAuth } from '@edge-base/auth-ui-react';
+
+function HeaderActions() {
+  const { user, loading, signOut } = useAuth();
+
+  if (loading) return <span>Loading...</span>;
+  if (!user) return <a href="/login">Sign in</a>;
+
+  return (
+    <button onClick={() => void signOut()}>
+      Sign out {user.displayName ?? user.email}
+    </button>
+  );
+}
+```
+
+## Configuration
+
+`AuthProvider` accepts a `config` object for common flow choices:
+
+- `providers`
+- `defaultView`
+- `showForgotPassword`
+- `showToggle`
+- `oauthRedirectUrl`
+- `magicLinkEnabled`
+- `emailOtpEnabled`
+- `phoneOtpEnabled`
+- `classPrefix`
+- `localization`
+
+The default `classPrefix` is `eb-auth`.
+
+## Styling
+
+You have two good options:
+
+1. import the default stylesheet:
+
+```tsx
+import '@edge-base/auth-ui-react/styles.css';
+```
+
+2. keep the components headless-first and target the generated CSS classes using your own design system
+
+The generated classes use the configured prefix, so the default form class names look like `eb-auth-form`, `eb-auth-button`, and `eb-auth-error`.
+
+## Choose The Right Package
+
+| Package | Use it for |
+| --- | --- |
+| `@edge-base/web` | The underlying browser SDK and auth client |
+| `@edge-base/auth-ui-react` | Pre-built React auth components on top of the web SDK |
+| `@edge-base/ssr` | Cookie-based server-side auth handling |
+| `@edge-base/admin` | Trusted server-side admin tasks |
+
+## License
+
+MIT

package/dist/components/AuthForm.d.ts

@@ -0,0 +1,11 @@
+import type { AuthView } from '../context.js';
+export interface AuthFormProps {
+    /** Called after successful authentication */
+    onSuccess?: () => void;
+    /** Override initial view (default uses config.defaultView or 'sign_in') */
+    defaultView?: AuthView;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare function AuthForm({ onSuccess, defaultView, className }: AuthFormProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=AuthForm.d.ts.map

package/dist/components/AuthForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthForm.d.ts","sourceRoot":"","sources":["../../src/components/AuthForm.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAW9C,MAAM,WAAW,aAAa;IAC5B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,aAAa,kDA8H5E"}

package/dist/components/AuthForm.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AuthForm — full authentication flow orchestrator.
+ *
+ * Manages view state and renders the appropriate sub-component.
+ * Combines SignIn, SignUp, SocialButtons, MFAChallenge, ForgotPassword,
+ * MagicLink, EmailOTP, and PhoneOTP into a single cohesive flow.
+ *
+ * Usage:
+ * ```tsx
+ * <AuthProvider client={client} config={{ providers: ['google', 'github'] }}>
+ *   <AuthForm onSuccess={() => navigate('/dashboard')} />
+ * </AuthProvider>
+ * ```
+ */
+import { useState, useCallback } from 'react';
+import { useAuthContext } from '../context.js';
+import { useAuth } from '../hooks/useAuth.js';
+import { SignIn } from './SignIn.js';
+import { SignUp } from './SignUp.js';
+import { SocialButtons } from './SocialButtons.js';
+import { MFAChallenge } from './MFAChallenge.js';
+import { ForgotPassword } from './ForgotPassword.js';
+import { MagicLink } from './MagicLink.js';
+import { EmailOTP } from './EmailOTP.js';
+import { PhoneOTP } from './PhoneOTP.js';
+export function AuthForm({ onSuccess, defaultView, className }) {
+    const { config } = useAuthContext();
+    const { user, loading } = useAuth();
+    const cx = config.classPrefix;
+    const [view, setView] = useState(defaultView || config.defaultView || 'sign_in');
+    const [mfaTicket, setMfaTicket] = useState(null);
+    const [mfaFactors, setMfaFactors] = useState([]);
+    const handleViewChange = useCallback((newView) => {
+        setView(newView);
+    }, []);
+    const handleSuccess = useCallback(() => {
+        onSuccess?.();
+    }, [onSuccess]);
+    const handleMfaRequired = useCallback((ticket, factors) => {
+        setMfaTicket(ticket);
+        setMfaFactors(factors);
+        setView('mfa_challenge');
+    }, []);
+    const handleMfaCancel = useCallback(() => {
+        setMfaTicket(null);
+        setMfaFactors([]);
+        setView('sign_in');
+    }, []);
+    // Loading state
+    if (loading) {
+        return (_jsx("div", { className: `${cx}-container ${cx}-loading ${className || ''}`.trim(), children: _jsx("p", { children: config.localization?.loading || 'Loading...' }) }));
+    }
+    // Already authenticated
+    if (user) {
+        return null;
+    }
+    // Build alternative sign-in methods links
+    const altMethods = [];
+    if (config.magicLinkEnabled && view !== 'magic_link') {
+        altMethods.push({ view: 'magic_link', label: 'Sign in with Magic Link' });
+    }
+    if (config.emailOtpEnabled && view !== 'email_otp') {
+        altMethods.push({ view: 'email_otp', label: 'Sign in with Email Code' });
+    }
+    if (config.phoneOtpEnabled && view !== 'phone_otp') {
+        altMethods.push({ view: 'phone_otp', label: 'Sign in with Phone' });
+    }
+    return (_jsxs("div", { className: `${cx}-container ${className || ''}`.trim(), children: [view === 'sign_in' && (_jsx(SignIn, { onSuccess: handleSuccess, onMfaRequired: handleMfaRequired, onViewChange: handleViewChange })), view === 'sign_up' && (_jsx(SignUp, { onSuccess: handleSuccess, onViewChange: handleViewChange })), view === 'forgot_password' && (_jsx(ForgotPassword, { onViewChange: handleViewChange })), view === 'magic_link' && (_jsx(MagicLink, { onViewChange: handleViewChange })), view === 'email_otp' && (_jsx(EmailOTP, { onSuccess: handleSuccess, onViewChange: handleViewChange })), view === 'phone_otp' && (_jsx(PhoneOTP, { onSuccess: handleSuccess, onViewChange: handleViewChange })), view === 'mfa_challenge' && mfaTicket && (_jsx(MFAChallenge, { mfaTicket: mfaTicket, factors: mfaFactors, onSuccess: handleSuccess, onCancel: handleMfaCancel })), (view === 'sign_in' || view === 'sign_up') && (_jsx(SocialButtons, {})), (view === 'sign_in' || view === 'sign_up') && altMethods.length > 0 && (_jsx("div", { className: `${cx}-alt-methods`, children: altMethods.map(({ view: altView, label }) => (_jsx("button", { type: "button", className: `${cx}-link ${cx}-alt-method`, onClick: () => handleViewChange(altView), children: label }, altView))) }))] }));
+}
+//# sourceMappingURL=AuthForm.js.map

package/dist/components/AuthForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthForm.js","sourceRoot":"","sources":["../../src/components/AuthForm.tsx"],"names":[],"mappings":"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"}

package/dist/components/EmailOTP.d.ts

@@ -0,0 +1,11 @@
+import type { AuthView } from '../context.js';
+export interface EmailOTPProps {
+    /** Called after successful sign-in */
+    onSuccess?: () => void;
+    /** Called to switch to another view */
+    onViewChange?: (view: AuthView) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare function EmailOTP({ onSuccess, onViewChange, className }: EmailOTPProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmailOTP.d.ts.map

package/dist/components/EmailOTP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailOTP.d.ts","sourceRoot":"","sources":["../../src/components/EmailOTP.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,aAAa,2CA4I7E"}

package/dist/components/EmailOTP.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * EmailOTP — email one-time-password sign-in form.
+ *
+ * Two-step flow: 1) Enter email → send code, 2) Enter code → verify.
+ */
+import { useState, useCallback } from 'react';
+import { useAuthContext } from '../context.js';
+export function EmailOTP({ onSuccess, onViewChange, className }) {
+    const { client, config, labels } = useAuthContext();
+    const cx = config.classPrefix;
+    const [email, setEmail] = useState('');
+    const [code, setCode] = useState('');
+    const [step, setStep] = useState('email');
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const handleSendCode = useCallback(async (e) => {
+        e.preventDefault();
+        setError(null);
+        setLoading(true);
+        try {
+            await client.auth.signInWithEmailOtp({ email });
+            setStep('code');
+        }
+        catch (err) {
+            setError(err.message || 'Failed to send code');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, email]);
+    const handleVerify = useCallback(async (e) => {
+        e.preventDefault();
+        setError(null);
+        setLoading(true);
+        try {
+            await client.auth.verifyEmailOtp({ email, code });
+            onSuccess?.();
+        }
+        catch (err) {
+            setError(err.message || 'Verification failed');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, email, code, onSuccess]);
+    if (step === 'code') {
+        return (_jsxs("form", { className: `${cx}-form ${cx}-email-otp ${className || ''}`.trim(), onSubmit: handleVerify, children: [_jsx("h2", { className: `${cx}-title`, children: labels.verifyCode }), _jsxs("p", { className: `${cx}-description`, children: ["Enter the code sent to ", email] }), error && _jsx("div", { className: `${cx}-error`, children: error }), _jsxs("div", { className: `${cx}-field`, children: [_jsx("label", { className: `${cx}-label`, htmlFor: `${cx}-email-otp-code`, children: labels.code }), _jsx("input", { id: `${cx}-email-otp-code`, className: `${cx}-input ${cx}-input-code`, type: "text", inputMode: "numeric", value: code, onChange: (e) => setCode(e.target.value), required: true, autoComplete: "one-time-code", placeholder: "000000", disabled: loading, autoFocus: true })] }), _jsx("button", { type: "submit", className: `${cx}-button ${cx}-button-primary`, disabled: loading, children: loading ? labels.loading : labels.verifyCode }), _jsx("button", { type: "button", className: `${cx}-link`, onClick: () => {
+                        setStep('email');
+                        setCode('');
+                        setError(null);
+                    }, children: "Change email" })] }));
+    }
+    return (_jsxs("form", { className: `${cx}-form ${cx}-email-otp ${className || ''}`.trim(), onSubmit: handleSendCode, children: [_jsx("h2", { className: `${cx}-title`, children: labels.sendOTP }), _jsx("p", { className: `${cx}-description`, children: "Enter your email to receive a one-time sign-in code." }), error && _jsx("div", { className: `${cx}-error`, children: error }), _jsxs("div", { className: `${cx}-field`, children: [_jsx("label", { className: `${cx}-label`, htmlFor: `${cx}-email-otp-email`, children: labels.email }), _jsx("input", { id: `${cx}-email-otp-email`, className: `${cx}-input`, type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: loading })] }), _jsx("button", { type: "submit", className: `${cx}-button ${cx}-button-primary`, disabled: loading, children: loading ? labels.loading : labels.sendOTP }), _jsx("button", { type: "button", className: `${cx}-link`, onClick: () => onViewChange?.('sign_in'), children: labels.backToSignIn })] }));
+}
+//# sourceMappingURL=EmailOTP.js.map

package/dist/components/EmailOTP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailOTP.js","sourceRoot":"","sources":["../../src/components/EmailOTP.tsx"],"names":[],"mappings":"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"}

package/dist/components/ForgotPassword.d.ts

@@ -0,0 +1,9 @@
+import type { AuthView } from '../context.js';
+export interface ForgotPasswordProps {
+    /** Called to switch to another view */
+    onViewChange?: (view: AuthView) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare function ForgotPassword({ onViewChange, className }: ForgotPasswordProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ForgotPassword.d.ts.map

package/dist/components/ForgotPassword.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPassword.d.ts","sourceRoot":"","sources":["../../src/components/ForgotPassword.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,mBAAmB;IAClC,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAuF9E"}

package/dist/components/ForgotPassword.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ForgotPassword — password reset request form.
+ *
+ * Sends a reset email to the user.
+ */
+import { useState, useCallback } from 'react';
+import { useAuthContext } from '../context.js';
+export function ForgotPassword({ onViewChange, className }) {
+    const { client, config, labels } = useAuthContext();
+    const cx = config.classPrefix;
+    const [email, setEmail] = useState('');
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        setError(null);
+        setLoading(true);
+        try {
+            await client.auth.requestPasswordReset(email);
+            setSuccess(true);
+        }
+        catch (err) {
+            setError(err.message || 'Failed to send reset email');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, email]);
+    if (success) {
+        return (_jsxs("div", { className: `${cx}-form ${cx}-forgot-password ${cx}-success ${className || ''}`.trim(), children: [_jsx("h2", { className: `${cx}-title`, children: labels.resetPassword }), _jsx("p", { className: `${cx}-description`, children: "Check your email for a password reset link." }), _jsx("button", { type: "button", className: `${cx}-link`, onClick: () => onViewChange?.('sign_in'), children: labels.backToSignIn })] }));
+    }
+    return (_jsxs("form", { className: `${cx}-form ${cx}-forgot-password ${className || ''}`.trim(), onSubmit: handleSubmit, children: [_jsx("h2", { className: `${cx}-title`, children: labels.resetPassword }), _jsx("p", { className: `${cx}-description`, children: "Enter your email address and we'll send you a link to reset your password." }), error && _jsx("div", { className: `${cx}-error`, children: error }), _jsxs("div", { className: `${cx}-field`, children: [_jsx("label", { className: `${cx}-label`, htmlFor: `${cx}-reset-email`, children: labels.email }), _jsx("input", { id: `${cx}-reset-email`, className: `${cx}-input`, type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: loading })] }), _jsx("button", { type: "submit", className: `${cx}-button ${cx}-button-primary`, disabled: loading, children: loading ? labels.loading : labels.sendResetLink }), _jsx("button", { type: "button", className: `${cx}-link`, onClick: () => onViewChange?.('sign_in'), children: labels.backToSignIn })] }));
+}
+//# sourceMappingURL=ForgotPassword.js.map

package/dist/components/ForgotPassword.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPassword.js","sourceRoot":"","sources":["../../src/components/ForgotPassword.tsx"],"names":[],"mappings":"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"}

package/dist/components/MFAChallenge.d.ts

@@ -0,0 +1,17 @@
+export interface MFAChallengeProps {
+    /** MFA ticket from sign-in result */
+    mfaTicket: string;
+    /** Available MFA factors */
+    factors: Array<{
+        id: string;
+        type: string;
+    }>;
+    /** Called after successful MFA verification */
+    onSuccess?: () => void;
+    /** Called when user wants to go back */
+    onCancel?: () => void;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare function MFAChallenge({ mfaTicket, factors, onSuccess, onCancel, className, }: MFAChallengeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MFAChallenge.d.ts.map

package/dist/components/MFAChallenge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MFAChallenge.d.ts","sourceRoot":"","sources":["../../src/components/MFAChallenge.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,2CA+FnB"}

package/dist/components/MFAChallenge.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MFAChallenge — TOTP verification form shown when MFA is required during sign-in.
+ *
+ * Supports TOTP code entry and recovery code fallback.
+ */
+import { useState, useCallback } from 'react';
+import { useAuthContext } from '../context.js';
+export function MFAChallenge({ mfaTicket, factors, onSuccess, onCancel, className, }) {
+    const { client, config, labels } = useAuthContext();
+    const cx = config.classPrefix;
+    const [code, setCode] = useState('');
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [useRecovery, setUseRecovery] = useState(false);
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        setError(null);
+        setLoading(true);
+        try {
+            if (useRecovery) {
+                await client.auth.mfa.useRecoveryCode(mfaTicket, code);
+            }
+            else {
+                await client.auth.mfa.verifyTotp(mfaTicket, code);
+            }
+            onSuccess?.();
+        }
+        catch (err) {
+            setError(err.message || 'Verification failed');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, mfaTicket, code, useRecovery, onSuccess]);
+    return (_jsxs("form", { className: `${cx}-form ${cx}-mfa-challenge ${className || ''}`.trim(), onSubmit: handleSubmit, children: [_jsx("h2", { className: `${cx}-title`, children: useRecovery ? 'Recovery Code' : 'Two-Factor Authentication' }), _jsx("p", { className: `${cx}-description`, children: useRecovery
+                    ? 'Enter one of your recovery codes to sign in.'
+                    : 'Enter the 6-digit code from your authenticator app.' }), error && _jsx("div", { className: `${cx}-error`, children: error }), _jsxs("div", { className: `${cx}-field`, children: [_jsx("label", { className: `${cx}-label`, htmlFor: `${cx}-mfa-code`, children: useRecovery ? 'Recovery Code' : labels.code }), _jsx("input", { id: `${cx}-mfa-code`, className: `${cx}-input ${cx}-input-code`, type: "text", value: code, onChange: (e) => setCode(e.target.value), required: true, autoComplete: "one-time-code", placeholder: useRecovery ? 'XXXXX-XXXXX' : '000000', disabled: loading, autoFocus: true })] }), _jsx("button", { type: "submit", className: `${cx}-button ${cx}-button-primary`, disabled: loading, children: loading ? labels.loading : labels.verifyCode }), _jsxs("div", { className: `${cx}-mfa-actions`, children: [_jsx("button", { type: "button", className: `${cx}-link`, onClick: () => {
+                            setUseRecovery(!useRecovery);
+                            setCode('');
+                            setError(null);
+                        }, children: useRecovery ? 'Use authenticator code' : 'Use recovery code' }), onCancel && (_jsx("button", { type: "button", className: `${cx}-link`, onClick: onCancel, children: labels.backToSignIn }))] })] }));
+}
+//# sourceMappingURL=MFAChallenge.js.map

package/dist/components/MFAChallenge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MFAChallenge.js","sourceRoot":"","sources":["../../src/components/MFAChallenge.tsx"],"names":[],"mappings":"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"}

package/dist/components/MagicLink.d.ts

@@ -0,0 +1,9 @@
+import type { AuthView } from '../context.js';
+export interface MagicLinkProps {
+    /** Called to switch to another view */
+    onViewChange?: (view: AuthView) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare function MagicLink({ onViewChange, className }: MagicLinkProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MagicLink.d.ts.map

package/dist/components/MagicLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagicLink.d.ts","sourceRoot":"","sources":["../../src/components/MagicLink.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,cAAc,2CA0FpE"}

package/dist/components/MagicLink.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MagicLink — passwordless sign-in via email link.
+ *
+ * Sends a magic link to the user's email.
+ */
+import { useState, useCallback } from 'react';
+import { useAuthContext } from '../context.js';
+export function MagicLink({ onViewChange, className }) {
+    const { client, config, labels } = useAuthContext();
+    const cx = config.classPrefix;
+    const [email, setEmail] = useState('');
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const handleSubmit = useCallback(async (e) => {
+        e.preventDefault();
+        setError(null);
+        setLoading(true);
+        try {
+            await client.auth.signInWithMagicLink({ email });
+            setSuccess(true);
+        }
+        catch (err) {
+            setError(err.message || 'Failed to send magic link');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [client, email]);
+    if (success) {
+        return (_jsxs("div", { className: `${cx}-form ${cx}-magic-link ${cx}-success ${className || ''}`.trim(), children: [_jsx("h2", { className: `${cx}-title`, children: labels.sendMagicLink }), _jsx("p", { className: `${cx}-description`, children: "Check your email for a sign-in link." }), _jsx("button", { type: "button", className: `${cx}-link`, onClick: () => {
+                        setSuccess(false);
+                        setEmail('');
+                    }, children: "Send another link" })] }));
+    }
+    return (_jsxs("form", { className: `${cx}-form ${cx}-magic-link ${className || ''}`.trim(), onSubmit: handleSubmit, children: [_jsx("h2", { className: `${cx}-title`, children: labels.sendMagicLink }), _jsx("p", { className: `${cx}-description`, children: "Enter your email and we'll send you a link to sign in." }), error && _jsx("div", { className: `${cx}-error`, children: error }), _jsxs("div", { className: `${cx}-field`, children: [_jsx("label", { className: `${cx}-label`, htmlFor: `${cx}-magic-email`, children: labels.email }), _jsx("input", { id: `${cx}-magic-email`, className: `${cx}-input`, type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true, autoComplete: "email", disabled: loading })] }), _jsx("button", { type: "submit", className: `${cx}-button ${cx}-button-primary`, disabled: loading, children: loading ? labels.loading : labels.sendMagicLink }), _jsx("button", { type: "button", className: `${cx}-link`, onClick: () => onViewChange?.('sign_in'), children: labels.backToSignIn })] }));
+}
+//# sourceMappingURL=MagicLink.js.map

package/dist/components/MagicLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagicLink.js","sourceRoot":"","sources":["../../src/components/MagicLink.tsx"],"names":[],"mappings":"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"}

package/dist/components/PhoneOTP.d.ts

@@ -0,0 +1,11 @@
+import type { AuthView } from '../context.js';
+export interface PhoneOTPProps {
+    /** Called after successful sign-in */
+    onSuccess?: () => void;
+    /** Called to switch to another view */
+    onViewChange?: (view: AuthView) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+export declare function PhoneOTP({ onSuccess, onViewChange, className }: PhoneOTPProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PhoneOTP.d.ts.map

package/dist/components/PhoneOTP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneOTP.d.ts","sourceRoot":"","sources":["../../src/components/PhoneOTP.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,aAAa,2CA6I7E"}