@proveanything/smartlinks-auth-ui 0.1.0

package/README.md

@@ -0,0 +1,323 @@
+# @smartlinks/auth-ui
+
+A lightweight, drop-in React authentication UI component library with bearer token support, session management, and multi-tenant account data. Provides a complete authentication solution without exposing backend implementation details to the frontend.
+
+## Features
+
+- 🔐 **Multiple Auth Methods**: Email/Password, Google OAuth, SMS (Phone)
+- 🎨 **Beautiful Pre-built UI**: Professional, responsive authentication flows
+- 🪙 **Bearer Token Based**: Returns JWT tokens for seamless API authentication
+- 🗂️ **Session Management**: Built-in AuthProvider, useAuth hook, and ProtectedRoute
+- 🏢 **Multi-Tenant Support**: Client ID for identifying different systems/tenants
+- 📊 **Account Data**: Store custom metadata per user account
+- 🔗 **URL Flow Handling**: Email verification, password reset links
+- ⚡ **Lightweight**: Minimal dependencies, no backend SDK required in consuming apps
+- 📱 **Fully Responsive**: Works seamlessly on mobile and desktop
+- ♿ **Accessible**: WCAG compliant authentication forms
+
+## Installation
+
+```bash
+npm install @smartlinks/auth-ui
+```
+
+## Quick Start
+
+### Basic Usage with Session Management
+
+```tsx
+import { SmartlinksAuthUI, AuthProvider, useAuth } from '@smartlinks/auth-ui';
+
+function App() {
+  return (
+    <AuthProvider apiEndpoint="https://your-api.smartlinks.com" clientId="your-client-123">
+      <YourApp />
+    </AuthProvider>
+  );
+}
+
+function YourApp() {
+  const { user, token, accountData, isAuthenticated, logout } = useAuth();
+  
+  if (isAuthenticated) {
+    return (
+      <div>
+        <h1>Welcome, {user.displayName}!</h1>
+        <p>Account: {accountData?.companyName}</p>
+        <button onClick={logout}>Logout</button>
+      </div>
+    );
+  }
+  
+  return (
+    <SmartlinksAuthUI
+      apiEndpoint="https://your-api.smartlinks.com"
+      clientId="your-client-123"  // REQUIRED - identifies your application
+      clientName="Acme Corp"
+      accountData={{
+        companyName: "Acme Corp",
+        plan: "pro"
+      }}
+      onAuthSuccess={(token, user, accountData) => {
+        console.log('Authenticated!', { token, user, accountData });
+      }}
+      enabledProviders={['email', 'google', 'phone']}
+    />
+  );
+}
+```
+
+## Props
+
+### SmartlinksAuthUI
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiEndpoint` | string | Yes | Your Smartlinks API endpoint (e.g., `https://api.smartlinks.com`) |
+| `clientId` | string | **Yes** | **REQUIRED** - Client identifier used in all API calls |
+| `clientName` | string | No | Client name for branded emails |
+| `accountData` | Record<string, any> | No | Custom metadata to store on registration |
+| `onAuthSuccess` | (token: string, user: AuthUser, accountData?: Record<string, any>) => void | Yes | Callback when authentication succeeds |
+| `onAuthError` | (error: Error) => void | No | Callback when authentication fails |
+| `enabledProviders` | Array<'email' \| 'google' \| 'phone'> | No | Auth providers to enable (default: all) |
+| `redirectUrl` | string | No | URL to redirect after auth (default: current page) |
+| `theme` | 'light' \| 'dark' | No | UI theme (default: 'light') |
+
+## Session Management
+
+### AuthProvider
+
+Wrap your app with AuthProvider to enable session management:
+
+```tsx
+import { AuthProvider } from '@smartlinks/auth-ui';
+
+<AuthProvider apiEndpoint="https://your-api.smartlinks.com/api/v1/authkit">
+  <App />
+</AuthProvider>
+```
+
+### useAuth Hook
+
+Access authentication state anywhere in your app:
+
+```tsx
+import { useAuth } from '@smartlinks/auth-ui';
+
+function MyComponent() {
+  const { 
+    user,              // Current user object
+    token,             // Bearer token
+    accountData,       // Custom account metadata
+    isAuthenticated,   // Boolean auth status
+    isLoading,         // Loading state
+    login,             // Login function
+    logout,            // Logout function
+    getToken,          // Get current token
+  } = useAuth();
+  
+  // Your component logic
+}
+```
+
+### ProtectedRoute
+
+Protect routes that require authentication:
+
+```tsx
+import { ProtectedRoute } from '@smartlinks/auth-ui';
+
+<ProtectedRoute fallback={<LoginPage />}>
+  <DashboardPage />
+</ProtectedRoute>
+```
+
+## Multi-Tenant & Account Data
+
+### Client ID
+
+Use `clientId` to identify which system/tenant is using the auth:
+
+```tsx
+<SmartlinksAuthUI
+  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
+  clientId="acme-corp-production"
+  onAuthSuccess={(token, user, accountData) => {
+    console.log('Client:', accountData.clientId);
+  }}
+/>
+```
+
+### Account Data
+
+Store custom metadata per user account on registration:
+
+```tsx
+<SmartlinksAuthUI
+  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
+  clientId="your-client-123"
+  clientName="Acme Corporation"
+  accountData={{
+    companyName: "Acme Corporation",
+    plan: "enterprise",
+    seats: 50,
+    customField: "value"
+  }}
+  onAuthSuccess={(token, user, accountData) => {
+    // accountData now includes all custom fields
+    console.log('Company:', accountData.companyName);
+    console.log('Plan:', accountData.plan);
+  }}
+/>
+```
+
+On login, the account data is automatically retrieved and returned.
+
+## Authentication Flows
+
+### Email/Password Login
+```tsx
+<SmartlinksAuthUI
+  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
+  onAuthSuccess={(token) => console.log('Token:', token)}
+  enabledProviders={['email']}
+/>
+```
+
+### Google OAuth
+```tsx
+<SmartlinksAuthUI
+  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
+  onAuthSuccess={(token) => console.log('Token:', token)}
+  enabledProviders={['google']}
+/>
+```
+
+### Phone/SMS Authentication
+```tsx
+<SmartlinksAuthUI
+  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
+  onAuthSuccess={(token) => console.log('Token:', token)}
+  enabledProviders={['phone']}
+/>
+```
+
+## URL-Based Flows
+
+The component automatically handles URL parameters for:
+
+- **Email Verification**: `?mode=verifyEmail&token=xxx`
+- **Password Reset**: `?mode=resetPassword&token=xxx`
+
+## API Integration
+
+Your Smartlinks API should implement these endpoints with clientId in the URL path:
+
+### POST /api/v1/authkit/:clientId/auth/login
+```json
+{
+  "email": "user@example.com",
+  "password": "password123"
+}
+```
+Response: `{ "token": "bearer_token", "user": {...} }`
+
+### POST /api/v1/authkit/:clientId/auth/register
+```json
+{
+  "email": "user@example.com",
+  "password": "password123",
+  "displayName": "John Doe"
+}
+```
+Response: `{ "token": "bearer_token", "user": {...} }`
+
+### POST /api/v1/authkit/:clientId/auth/google
+```json
+{
+  "idToken": "google_id_token"
+}
+```
+Response: `{ "token": "bearer_token", "user": {...} }`
+
+### POST /api/v1/authkit/:clientId/auth/phone/send-code
+```json
+{
+  "phoneNumber": "+1234567890"
+}
+```
+Response: `{ "verificationId": "xxx" }`
+
+### POST /api/v1/authkit/:clientId/auth/phone/verify
+```json
+{
+  "verificationId": "xxx",
+  "code": "123456"
+}
+```
+Response: `{ "token": "bearer_token", "user": {...} }`
+
+### POST /api/v1/authkit/:clientId/auth/reset-password
+```json
+{
+  "email": "user@example.com"
+}
+```
+Response: `{ "success": true }`
+
+### POST /api/v1/authkit/:clientId/auth/verify-reset-token
+```json
+{
+  "oobCode": "reset_code_from_url"
+}
+```
+Response: `{ "valid": true, "email": "user@example.com" }`
+
+### POST /api/v1/authkit/:clientId/auth/complete-reset
+```json
+{
+  "token": "reset_token_from_email",
+  "newPassword": "newpass123"
+}
+```
+Response: `{ "success": true }`
+
+### GET /api/v1/authkit/:clientId/config
+Get UI configuration for the client (public, cached)
+
+Response:
+```json
+{
+  "title": "Welcome to Acme",
+  "subtitle": "Sign in to your account",
+  "primaryColor": "#3B82F6",
+  "buttonStyle": "rounded",
+  "enabledProviders": ["email", "google"]
+}
+```
+
+## Styling
+
+The component uses CSS modules and can be customized:
+
+```tsx
+<SmartlinksAuthUI
+  apiEndpoint="https://api.smartlinks.com"
+  clientId="your-client-123"
+  onAuthSuccess={handleAuth}
+  className="custom-auth-container"
+  theme="dark"
+/>
+```
+
+## TypeScript Support
+
+Full TypeScript definitions included:
+
+```tsx
+import type { AuthUser, AuthToken, AuthProvider } from '@smartlinks/auth-ui';
+```
+
+## License
+
+MIT © Smartlinks

package/dist/api.d.ts

@@ -0,0 +1,44 @@
+import type { AuthResponse, AuthFormData, AuthUIConfig } from './types';
+/**
+ * AuthAPI - Thin wrapper around Smartlinks SDK authKit namespace
+ * All authentication operations now use the global Smartlinks SDK
+ */
+export declare class AuthAPI {
+    private clientId;
+    private clientName?;
+    constructor(_apiEndpoint: string, clientId: string, clientName?: string);
+    login(email: string, password: string): Promise<AuthResponse>;
+    register(data: AuthFormData): Promise<AuthResponse>;
+    loginWithGoogle(idToken: string): Promise<AuthResponse>;
+    sendPhoneCode(phoneNumber: string): Promise<{
+        verificationId: string;
+    }>;
+    verifyPhoneCode(verificationId: string, code: string): Promise<AuthResponse>;
+    requestPasswordReset(email: string, redirectUrl: string): Promise<{
+        success: boolean;
+        message: string;
+    }>;
+    verifyResetToken(token: string): Promise<{
+        valid: boolean;
+        email?: string;
+        expiresAt?: number;
+        message?: string;
+    }>;
+    completePasswordReset(token: string, newPassword: string): Promise<{
+        success: boolean;
+        message: string;
+    }>;
+    sendEmailVerification(userId: string, email: string, redirectUrl: string): Promise<{
+        success: boolean;
+        message: string;
+    }>;
+    verifyEmailWithToken(token: string): Promise<AuthResponse & {
+        message: string;
+    }>;
+    resendVerification(userId: string, email: string, redirectUrl: string): Promise<{
+        success: boolean;
+        message: string;
+    }>;
+    fetchConfig(): Promise<AuthUIConfig>;
+}
+//# sourceMappingURL=api.d.ts.map

package/dist/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAExE;;;GAGG;AACH,qBAAa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAC,CAAS;gBAEhB,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM;IAOjE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;IAI7D,QAAQ,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC;IASnD,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;IAIvD,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IAIvE,eAAe,CACnB,cAAc,EAAE,MAAM,EACtB,IAAI,EAAE,MAAM,GACX,OAAO,CAAC,YAAY,CAAC;IAIlB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAQxG,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAIlH,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAIzG,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IASzH,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,GAAG;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAIhF,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAStH,WAAW,IAAI,OAAO,CAAC,YAAY,CAAC;CAkB3C"}

package/dist/api.js

@@ -0,0 +1,105 @@
+export class AuthAPI {
+    constructor(apiEndpoint, clientId, clientName) {
+        this.baseUrl = apiEndpoint.replace(/\/$/, '');
+        this.clientId = clientId;
+        this.clientName = clientName;
+    }
+    buildUrl(path) {
+        return `${this.baseUrl}/api/v1/authkit/${this.clientId}${path}`;
+    }
+    async request(path, method = 'GET', body) {
+        const url = this.buildUrl(path);
+        const response = await fetch(url, {
+            method,
+            headers: {
+                'Content-Type': 'application/json',
+                'ngrok-skip-browser-warning': 'true',
+            },
+            body: body ? JSON.stringify(body) : undefined,
+        });
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ message: 'Request failed' }));
+            throw new Error(error.message || `HTTP ${response.status}`);
+        }
+        return response.json();
+    }
+    async login(email, password) {
+        return this.request('/auth/login', 'POST', { email, password });
+    }
+    async register(data) {
+        // Include clientId, redirectUrl, and clientName in registration
+        return this.request('/auth/register', 'POST', {
+            ...data,
+            clientId: this.clientId,
+            clientName: this.clientName
+        });
+    }
+    async loginWithGoogle(idToken) {
+        return this.request('/auth/google', 'POST', { idToken });
+    }
+    async sendPhoneCode(phoneNumber) {
+        return this.request('/auth/phone/send-code', 'POST', { phoneNumber });
+    }
+    async verifyPhoneCode(verificationId, code) {
+        return this.request('/auth/phone/verify', 'POST', {
+            verificationId,
+            code,
+        });
+    }
+    // Custom Email Flow Methods (using Resend)
+    async requestPasswordReset(email, redirectUrl) {
+        return this.request('/auth/reset-password', 'POST', {
+            email,
+            redirectUrl,
+            clientName: this.clientName
+        });
+    }
+    async verifyResetToken(token) {
+        return this.request('/auth/verify-reset-token', 'POST', { token });
+    }
+    async completePasswordReset(token, newPassword) {
+        return this.request('/auth/complete-reset', 'POST', {
+            token,
+            newPassword
+        });
+    }
+    async sendEmailVerification(userId, email, redirectUrl) {
+        return this.request('/auth/send-verification', 'POST', {
+            userId,
+            email,
+            redirectUrl,
+            clientName: this.clientName
+        });
+    }
+    async verifyEmailWithToken(token) {
+        return this.request('/auth/verify-email', 'POST', { token });
+    }
+    async resendVerification(userId, email, redirectUrl) {
+        return this.request('/auth/resend-verification', 'POST', {
+            userId,
+            email,
+            redirectUrl,
+            clientName: this.clientName
+        });
+    }
+    // UI Configuration
+    async fetchConfig() {
+        try {
+            return await this.request('/config', 'GET');
+        }
+        catch (error) {
+            console.warn('Failed to fetch UI config, using defaults:', error);
+            return {
+                branding: {
+                    title: 'Smartlinks Auth',
+                    subtitle: 'Sign in to your account',
+                    primaryColor: '#3B82F6',
+                    secondaryColor: '#1D4ED8',
+                    backgroundColor: '#e0f2fe',
+                    buttonStyle: 'rounded',
+                    fontFamily: 'Inter, sans-serif'
+                }
+            };
+        }
+    }
+}

package/dist/components/AuthContainer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './AuthContainer.css';
+import type { AuthUIConfig } from '../types';
+interface AuthContainerProps {
+    children: React.ReactNode;
+    theme?: 'light' | 'dark';
+    className?: string;
+    config?: AuthUIConfig;
+}
+export declare const AuthContainer: React.FC<AuthContainerProps>;
+export {};
+//# sourceMappingURL=AuthContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthContainer.d.ts","sourceRoot":"","sources":["../../src/components/AuthContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4GtD,CAAC"}

package/dist/components/AuthContainer.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import './AuthContainer.css';
+export const AuthContainer = ({ children, theme = 'light', className = '', config, }) => {
+    // Apply CSS variables for customization
+    useEffect(() => {
+        if (!config?.branding)
+            return;
+        const root = document.documentElement;
+        const { branding } = config;
+        if (branding.primaryColor) {
+            root.style.setProperty('--auth-primary-color', branding.primaryColor);
+        }
+        if (branding.secondaryColor) {
+            root.style.setProperty('--auth-secondary-color', branding.secondaryColor);
+        }
+        if (branding.backgroundColor) {
+            root.style.setProperty('--auth-bg-color', branding.backgroundColor);
+        }
+        if (branding.fontFamily) {
+            root.style.setProperty('--auth-font-family', branding.fontFamily);
+        }
+        // Inject custom CSS if provided
+        if (branding.customCss) {
+            const styleId = 'auth-custom-styles';
+            let styleEl = document.getElementById(styleId);
+            if (!styleEl) {
+                styleEl = document.createElement('style');
+                styleEl.id = styleId;
+                document.head.appendChild(styleEl);
+            }
+            styleEl.textContent = branding.customCss;
+        }
+        return () => {
+            // Cleanup on unmount
+            root.style.removeProperty('--auth-primary-color');
+            root.style.removeProperty('--auth-secondary-color');
+            root.style.removeProperty('--auth-bg-color');
+            root.style.removeProperty('--auth-font-family');
+        };
+    }, [config]);
+    const title = config?.branding?.title || 'Smartlinks Auth';
+    const subtitle = config?.branding?.subtitle || 'Sign in to your account';
+    const logoUrl = config?.branding?.logoUrl;
+    return (_jsx("div", { className: `auth-container auth-theme-${theme} ${className}`, children: _jsxs("div", { className: "auth-card", style: { borderRadius: config?.branding?.buttonStyle === 'square' ? '4px' : '12px' }, children: [_jsxs("div", { className: "auth-header", children: [_jsx("div", { className: "auth-logo", children: logoUrl ? (_jsx("img", { src: logoUrl, alt: "Logo", style: { width: 40, height: 40, objectFit: 'contain' } })) : (_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { width: "40", height: "40", rx: "8", fill: "url(#gradient)" }), _jsx("path", { d: "M20 10L12 18L20 26L28 18L20 10Z", fill: "white", fillOpacity: "0.9" }), _jsx("path", { d: "M20 18L16 22L20 26L24 22L20 18Z", fill: "white" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "40", y2: "40", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "var(--auth-primary-color, #3B82F6)" }), _jsx("stop", { offset: "1", stopColor: "var(--auth-secondary-color, #1D4ED8)" })] }) })] })) }), _jsx("h1", { className: "auth-title", children: title }), subtitle && _jsx("p", { className: "auth-subtitle", children: subtitle })] }), _jsx("div", { className: "auth-content", children: children }), (config?.branding?.termsUrl || config?.branding?.privacyUrl) && (_jsxs("div", { className: "auth-footer", children: [config.branding.termsUrl && _jsx("a", { href: config.branding.termsUrl, target: "_blank", rel: "noopener noreferrer", children: "Terms" }), config.branding.termsUrl && config.branding.privacyUrl && _jsx("span", { children: "\u2022" }), config.branding.privacyUrl && _jsx("a", { href: config.branding.privacyUrl, target: "_blank", rel: "noopener noreferrer", children: "Privacy" })] }))] }) }));
+};

package/dist/components/AuthUIPreview.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { AuthProvider, AuthUIConfig } from '../types';
+interface AuthUIPreviewProps {
+    customization?: Partial<AuthUIConfig>;
+    enabledProviders?: AuthProvider[];
+    theme?: 'light' | 'dark';
+    className?: string;
+}
+export declare const AuthUIPreview: React.FC<AuthUIPreviewProps>;
+export {};
+//# sourceMappingURL=AuthUIPreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthUIPreview.d.ts","sourceRoot":"","sources":["../../src/components/AuthUIPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE3D,UAAU,kBAAkB;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,YAAY,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8FtD,CAAC"}

package/dist/components/AuthUIPreview.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { AuthContainer } from './AuthContainer';
+export const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', 'phone'], theme = 'light', className, }) => {
+    const showEmail = enabledProviders.includes('email');
+    const showGoogle = enabledProviders.includes('google');
+    const showPhone = enabledProviders.includes('phone');
+    const hasProviders = showGoogle || showPhone;
+    return (_jsxs(AuthContainer, { theme: theme, className: className, config: customization, children: [showEmail && (_jsxs("div", { className: "auth-form", children: [_jsxs("div", { className: "auth-form-group", children: [_jsx("label", { className: "auth-label", children: "Email" }), _jsx("input", { type: "email", className: "auth-input", placeholder: "Enter your email", disabled: true })] }), _jsxs("div", { className: "auth-form-group", children: [_jsx("label", { className: "auth-label", children: "Password" }), _jsx("input", { type: "password", className: "auth-input", placeholder: "Enter your password", disabled: true })] }), _jsx("button", { className: "auth-button auth-button-primary", disabled: true, children: "Sign In" }), _jsx("div", { style: { textAlign: 'center', marginTop: '1rem' }, children: _jsx("button", { className: "auth-link", disabled: true, children: "Forgot password?" }) }), _jsxs("div", { style: { textAlign: 'center', marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--auth-text-muted, #6B7280)' }, children: ["Don't have an account?", ' ', _jsx("button", { className: "auth-link", disabled: true, children: "Sign up" })] })] })), hasProviders && (_jsxs(_Fragment, { children: [showEmail && (_jsx("div", { className: "auth-or-divider", children: _jsx("span", { children: "or continue with" }) })), _jsxs("div", { className: "auth-provider-buttons", children: [showGoogle && (_jsxs("button", { className: "auth-provider-button", disabled: true, children: [_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [_jsx("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }), _jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.183l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }), _jsx("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.548 0 9s.348 2.825.957 4.039l3.007-2.332z", fill: "#FBBC05" }), _jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })] }), _jsx("span", { children: "Google" })] })), showPhone && (_jsxs("button", { className: "auth-provider-button", disabled: true, children: [_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), _jsx("span", { children: "Phone" })] }))] })] }))] }));
+};

package/dist/components/EmailAuthForm.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { AuthFormData } from '../types';
+import './AuthForm.css';
+interface EmailAuthFormProps {
+    mode: 'login' | 'register';
+    onSubmit: (data: AuthFormData) => Promise<void>;
+    onModeSwitch: () => void;
+    onForgotPassword: () => void;
+    loading: boolean;
+    error?: string;
+}
+export declare const EmailAuthForm: React.FC<EmailAuthFormProps>;
+export {};
+//# sourceMappingURL=EmailAuthForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmailAuthForm.d.ts","sourceRoot":"","sources":["../../src/components/EmailAuthForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,gBAAgB,CAAC;AAExB,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4ItD,CAAC"}

package/dist/components/EmailAuthForm.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import './AuthForm.css';
+export const EmailAuthForm = ({ mode, onSubmit, onModeSwitch, onForgotPassword, loading, error, }) => {
+    const [formData, setFormData] = useState({
+        email: '',
+        password: '',
+        displayName: '',
+    });
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        await onSubmit(formData);
+    };
+    const handleChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    };
+    return (_jsxs("form", { className: "auth-form", onSubmit: handleSubmit, children: [_jsxs("div", { className: "auth-form-header", children: [_jsx("h2", { className: "auth-form-title", children: mode === 'login' ? 'Sign in' : 'Create account' }), _jsx("p", { className: "auth-form-subtitle", children: mode === 'login'
+                            ? 'Welcome back! Please enter your credentials.'
+                            : 'Get started by creating your account.' })] }), error && (_jsxs("div", { className: "auth-error", role: "alert", children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm0-3H7V4h2v6z" }) }), error] })), mode === 'register' && (_jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "displayName", className: "auth-label", children: "Full Name" }), _jsx("input", { type: "text", id: "displayName", className: "auth-input", value: formData.displayName || '', onChange: (e) => handleChange('displayName', e.target.value), required: mode === 'register', disabled: loading, placeholder: "John Doe" })] })), _jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "email", className: "auth-label", children: "Email address" }), _jsx("input", { type: "email", id: "email", className: "auth-input", value: formData.email || '', onChange: (e) => handleChange('email', e.target.value), required: true, disabled: loading, placeholder: "you@example.com", autoComplete: "email" })] }), _jsxs("div", { className: "auth-form-group", children: [_jsx("label", { htmlFor: "password", className: "auth-label", children: "Password" }), _jsx("input", { type: "password", id: "password", className: "auth-input", value: formData.password || '', onChange: (e) => handleChange('password', e.target.value), required: true, disabled: loading, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", autoComplete: mode === 'login' ? 'current-password' : 'new-password', minLength: 6 })] }), mode === 'login' && (_jsx("div", { className: "auth-form-footer", children: _jsx("button", { type: "button", className: "auth-link", onClick: onForgotPassword, disabled: loading, children: "Forgot password?" }) })), _jsx("button", { type: "submit", className: "auth-button auth-button-primary", disabled: loading, children: loading ? (_jsx("span", { className: "auth-spinner" })) : mode === 'login' ? ('Sign in') : ('Create account') }), _jsxs("div", { className: "auth-divider", children: [_jsx("span", { children: mode === 'login' ? "Don't have an account?" : 'Already have an account?' }), _jsx("button", { type: "button", className: "auth-link auth-link-bold", onClick: onModeSwitch, disabled: loading, children: mode === 'login' ? 'Sign up' : 'Sign in' })] })] }));
+};

package/dist/components/PasswordResetForm.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './AuthForm.css';
+interface PasswordResetFormProps {
+    onSubmit: (emailOrPassword: string, confirmPassword?: string) => Promise<void>;
+    onBack: () => void;
+    loading: boolean;
+    error?: string;
+    success?: boolean;
+    token?: string;
+}
+export declare const PasswordResetForm: React.FC<PasswordResetFormProps>;
+export {};
+//# sourceMappingURL=PasswordResetForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordResetForm.d.ts","sourceRoot":"","sources":["../../src/components/PasswordResetForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,gBAAgB,CAAC;AAExB,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/E,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAwL9D,CAAC"}