@proveanything/smartlinks-auth-ui 0.1.3 → 0.1.4

package/README.md

@@ -1,31 +1,65 @@
 # @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.
+A complete, drop-in React authentication and account management solution built for the Smartlinks platform. Provides beautiful, customizable UI components for authentication flows, session management, and user account operations with seamless Smartlinks SDK integration.
 
 ## Features
 
-- 🔐 **Multiple Auth Methods**: Email/Password, Google OAuth, SMS (Phone)
+### Authentication
+- 🔐 **Multiple Auth Methods**: Email/Password, Google OAuth, Phone/SMS, Magic Links
 - 🎨 **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
+- 🪙 **JWT Bearer Tokens**: Automatic Smartlinks SDK integration with bearer token management
+- 🗂️ **Session Management**: Built-in AuthProvider, useAuth hook, ProtectedRoute, and cross-tab sync
 - 🏢 **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
+- 📊 **Custom Account Data**: Store custom metadata per user account
+- 🔗 **Deep Link Support**: Email verification, password reset, magic link flows
+- 📧 **Passwordless Login**: Magic link authentication via email
+
+### Account Management
+- 👤 **Profile Management**: Update display name and contact information
+- 🔑 **Password Changes**: Secure password update flow for authenticated users
+- 📧 **Email Changes**: Change email with verification flow
+- 📱 **Phone Updates**: Update phone number with SMS verification
+- 🗑️ **Account Deletion**: Self-service account deletion
+- 🎯 **Product Claiming**: Claim physical products/proofs with custom attestations
+
+### Developer Experience
+- ⚡ **Lightweight**: Minimal dependencies, integrates with Smartlinks SDK
 - 📱 **Fully Responsive**: Works seamlessly on mobile and desktop
-- ♿ **Accessible**: WCAG compliant authentication forms
+- ♿ **Accessible**: WCAG compliant forms and interactions
+- 🎨 **Highly Customizable**: Extensive theming and branding options
+- 🔄 **Real-time Sync**: Cross-tab authentication state synchronization
+- 💾 **Smart Caching**: Account info caching with configurable TTL
+- 🎣 **Auth State Callbacks**: Subscribe to login, logout, and token refresh events
+- 📘 **TypeScript First**: Full type definitions included
 
 ## Installation
 
 ```bash
-npm install @smartlinks/auth-ui
+npm install @smartlinks/auth-ui @proveanything/smartlinks
 ```
 
+**Note**: This package requires the Smartlinks SDK (`@proveanything/smartlinks`) as a peer dependency.
+
 ## Quick Start
 
-### 1. Import the CSS (Required!)
+### 1. Initialize Smartlinks SDK
+
+Initialize the Smartlinks SDK at the top level of your application:
+
+```tsx
+// src/App.tsx or src/main.tsx
+import * as smartlinks from '@proveanything/smartlinks';
+
+// Initialize the SDK before your app renders
+smartlinks.initializeApi({
+  baseUrl: 'https://smartlinks.app/api/v1',
+  proxyMode: false, // Set to true if running in iframe
+});
+```
+
+### 2. Import the CSS (Required!)
 
-Add this import to your app's entry point (e.g., `main.tsx`, `index.tsx`, or `App.tsx`):
+Add this import to your app's entry point:
 
 ```tsx
 import '@smartlinks/auth-ui/dist/index.css';
@@ -33,28 +67,36 @@ import '@smartlinks/auth-ui/dist/index.css';
 
 **Important**: Without this CSS import, the authentication UI will not be styled correctly.
 
-### 2. Basic Usage with Session Management
+### 3. Wrap Your App with AuthProvider
 
 ```tsx
-import { SmartlinksAuthUI, AuthProvider, useAuth } from '@smartlinks/auth-ui';
-import '@smartlinks/auth-ui/dist/index.css'; // Don't forget this!
+import { AuthProvider } from '@smartlinks/auth-ui';
+import '@smartlinks/auth-ui/dist/index.css';
 
 function App() {
   return (
-    <AuthProvider apiEndpoint="https://your-api.smartlinks.com" clientId="your-client-123">
+    <AuthProvider 
+      clientId="your-client-123"
+      clientName="Acme Corp"
+    >
       <YourApp />
     </AuthProvider>
   );
 }
+```
+
+### 4. Use the Authentication UI
+
+```tsx
+import { SmartlinksAuthUI, useAuth } from '@smartlinks/auth-ui';
 
 function YourApp() {
-  const { user, token, accountData, isAuthenticated, logout } = useAuth();
+  const { user, isAuthenticated, logout } = useAuth();
   
   if (isAuthenticated) {
     return (
       <div>
-        <h1>Welcome, {user.displayName}!</h1>
-        <p>Account: {accountData?.companyName}</p>
+        <h1>Welcome, {user?.displayName || user?.email}!</h1>
         <button onClick={logout}>Logout</button>
       </div>
     );
@@ -62,72 +104,192 @@ function YourApp() {
   
   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 });
+      clientId="your-client-123"
+      onAuthSuccess={(response) => {
+        console.log('Authenticated!', response.user);
+        // Optional: redirect or update UI
       }}
-      enabledProviders={['email', 'google', 'phone']}
     />
   );
 }
 ```
 
-## Props
+## Components
 
 ### SmartlinksAuthUI
 
+Main authentication component with login, registration, password reset, and provider authentication.
+
+#### Props
+
 | 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 |
+| `clientId` | string | **Yes** | Client identifier for your application |
 | `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 |
+| `onAuthSuccess` | (response: AuthResponse) => void | No | 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') |
+| `launchMode` | 'login' \| 'signup' | No | Initial view (default: 'login') |
+| `customization` | AuthUIConfig | No | UI customization (colors, fonts, logo) |
+
+#### Example
+
+```tsx
+<SmartlinksAuthUI
+  clientId="your-client-123"
+  clientName="Acme Corp"
+  accountData={{
+    companyName: "Acme Corp",
+    plan: "enterprise"
+  }}
+  onAuthSuccess={(response) => {
+    console.log('User:', response.user);
+    console.log('Token:', response.token);
+    console.log('Account Data:', response.accountData);
+  }}
+  onAuthError={(error) => {
+    console.error('Auth error:', error);
+  }}
+  launchMode="signup"
+/>
+```
+
+### AccountManagement
+
+Account management component for authenticated users to update their profile, change passwords, update contact info, and delete their account.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `clientId` | string | **Yes** | Client identifier for your application |
+| `showHeader` | boolean | No | Show component header (default: false) |
+| `onProfileUpdate` | () => void | No | Callback after profile update |
+| `onAccountDelete` | () => void | No | Callback after account deletion |
+
+#### Example
+
+```tsx
+import { AccountManagement } from '@smartlinks/auth-ui';
+
+<AccountManagement
+  clientId="your-client-123"
+  onProfileUpdate={() => {
+    console.log('Profile updated!');
+  }}
+  onAccountDelete={() => {
+    console.log('Account deleted');
+    // Redirect to home or login
+  }}
+/>
+```
+
+### SmartlinksClaimUI
+
+Product claiming component for authenticating users and claiming physical products/proofs with optional custom questions.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `clientId` | string | **Yes** | Client identifier for your application |
+| `collectionId` | string | **Yes** | Collection ID of the product |
+| `productId` | string | **Yes** | Product ID to claim |
+| `proofId` | string | **Yes** | Specific proof ID to claim |
+| `additionalQuestions` | ClaimField[] | No | Custom questions for claim attestations |
+| `onClaimSuccess` | (result: ClaimResult) => void | **Yes** | Callback when claim succeeds |
+| `onClaimError` | (error: Error) => void | No | Callback when claim fails |
+
+#### Example
+
+```tsx
+import { SmartlinksClaimUI } from '@smartlinks/auth-ui';
+
+<SmartlinksClaimUI
+  clientId="your-client-123"
+  collectionId="col_abc123"
+  productId="prod_xyz789"
+  proofId="proof_def456"
+  additionalQuestions={[
+    {
+      id: 'serial_number',
+      label: 'Serial Number',
+      type: 'text',
+      required: true
+    },
+    {
+      id: 'purchase_date',
+      label: 'Purchase Date',
+      type: 'date',
+      required: false
+    }
+  ]}
+  onClaimSuccess={(result) => {
+    console.log('Claimed!', result.proof);
+  }}
+/>
+```
 
 ## Session Management
 
 ### AuthProvider
 
-Wrap your app with AuthProvider to enable session management:
+The AuthProvider component manages authentication state across your application. It handles token persistence, cross-tab synchronization, and automatic token refresh.
 
-```tsx
-import { AuthProvider } from '@smartlinks/auth-ui';
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `clientId` | string | **Yes** | Client identifier for your application |
+| `clientName` | string | No | Client name for branded communications |
+| `accountCacheTTL` | number | No | Account cache TTL in ms (default: 300000 / 5 min) |
+| `preloadAccountInfo` | boolean | No | Fetch account info on login (default: false) |
+
+#### Example
 
-<AuthProvider apiEndpoint="https://your-api.smartlinks.com/api/v1/authkit">
+```tsx
+<AuthProvider 
+  clientId="your-client-123"
+  clientName="Acme Corp"
+  accountCacheTTL={600000} // 10 minutes
+  preloadAccountInfo={true}
+>
   <App />
 </AuthProvider>
 ```
 
 ### useAuth Hook
 
-Access authentication state anywhere in your app:
+Access authentication state and methods anywhere in your app:
 
 ```tsx
 import { useAuth } from '@smartlinks/auth-ui';
 
 function MyComponent() {
   const { 
-    user,              // Current user object
-    token,             // Bearer token
+    user,              // Current user object (email, displayName, uid)
+    token,             // Current JWT bearer token
     accountData,       // Custom account metadata
+    accountInfo,       // Cached account information
     isAuthenticated,   // Boolean auth status
     isLoading,         // Loading state
-    login,             // Login function
+    login,             // Manual login function
     logout,            // Logout function
     getToken,          // Get current token
+    getAccount,        // Fetch account info (uses cache)
+    refreshAccount,    // Force refresh account info
   } = useAuth();
   
-  // Your component logic
+  return (
+    <div>
+      {isAuthenticated ? (
+        <p>Welcome, {user.displayName}!</p>
+      ) : (
+        <p>Please log in</p>
+      )}
+    </div>
+  );
 }
 ```
 
@@ -138,239 +300,227 @@ Protect routes that require authentication:
 ```tsx
 import { ProtectedRoute } from '@smartlinks/auth-ui';
 
-<ProtectedRoute fallback={<LoginPage />}>
+<ProtectedRoute 
+  fallback={<LoginPage />}
+  redirectTo="/login"
+>
   <DashboardPage />
 </ProtectedRoute>
 ```
 
-## Multi-Tenant & Account Data
+### Auth State Change Callbacks
 
-### Client ID
-
-Use `clientId` to identify which system/tenant is using the auth:
+Subscribe to authentication events:
 
 ```tsx
-<SmartlinksAuthUI
-  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
-  clientId="acme-corp-production"
-  onAuthSuccess={(token, user, accountData) => {
-    console.log('Client:', accountData.clientId);
-  }}
-/>
+import { onAuthStateChange } from '@smartlinks/auth-ui';
+
+useEffect(() => {
+  const unsubscribe = onAuthStateChange((event, session) => {
+    switch (event) {
+      case 'LOGIN':
+        console.log('User logged in:', session.user);
+        navigate('/dashboard');
+        break;
+      case 'LOGOUT':
+        console.log('User logged out');
+        navigate('/');
+        break;
+      case 'CROSS_TAB_SYNC':
+        console.log('Auth state synced from another tab');
+        break;
+      case 'TOKEN_REFRESH':
+        console.log('Token refreshed');
+        break;
+      case 'ACCOUNT_REFRESH':
+        console.log('Account info refreshed');
+        break;
+    }
+  });
+  
+  return () => unsubscribe();
+}, []);
 ```
 
-### Account Data
+## Account Caching
 
-Store custom metadata per user account on registration:
+The auth module includes intelligent account info caching to reduce API calls:
 
 ```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);
-  }}
-/>
+const { getAccount, refreshAccount, accountInfo } = useAuth();
+
+// Get account (uses cache if fresh)
+const account = await getAccount();
+
+// Force refresh
+const freshAccount = await getAccount(true);
+// or
+const freshAccount = await refreshAccount();
+
+// Access cached data synchronously
+const cachedAccount = accountInfo;
 ```
 
-On login, the account data is automatically retrieved and returned.
+**Configuration:**
+- Default cache TTL: 5 minutes
+- Configure via `accountCacheTTL` prop on AuthProvider
+- Enable automatic preload with `preloadAccountInfo={true}`
+
+See [ACCOUNT_CACHING.md](./ACCOUNT_CACHING.md) for detailed documentation.
 
-## Authentication Flows
+## Authentication Methods
+
+### Email/Password
+
+Standard email and password authentication with registration, login, password reset, and email verification.
 
-### Email/Password Login
 ```tsx
 <SmartlinksAuthUI
-  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
-  onAuthSuccess={(token) => console.log('Token:', token)}
-  enabledProviders={['email']}
+  clientId="your-client-123"
+  launchMode="signup"
 />
 ```
 
 ### Google OAuth
+
+One-click Google authentication with automatic account creation.
+
 ```tsx
 <SmartlinksAuthUI
-  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
-  onAuthSuccess={(token) => console.log('Token:', token)}
-  enabledProviders={['google']}
+  clientId="your-client-123"
+  // Google Auth is enabled by default
 />
 ```
 
-### Phone/SMS Authentication
+### Phone/SMS
+
+Phone number authentication with SMS verification codes.
+
 ```tsx
 <SmartlinksAuthUI
-  apiEndpoint="https://api.smartlinks.com/api/v1/authkit"
-  onAuthSuccess={(token) => console.log('Token:', token)}
-  enabledProviders={['phone']}
+  clientId="your-client-123"
+  // Phone auth is enabled by default
 />
 ```
 
-## URL-Based Flows
+### Magic Links
 
-The component automatically handles URL parameters for:
+Passwordless authentication via email magic links.
 
-- **Email Verification**: `?mode=verifyEmail&token=xxx`
-- **Password Reset**: `?mode=resetPassword&token=xxx`
+```tsx
+<SmartlinksAuthUI
+  clientId="your-client-123"
+  // Magic links are enabled by default
+/>
+```
 
-## API Integration
+## Customization
 
-Your Smartlinks API should implement these endpoints with clientId in the URL path:
+### Branding & Theming
 
-### 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": {...} }`
+Customize colors, fonts, and logo via the admin interface or programmatically:
 
-### POST /api/v1/authkit/:clientId/auth/google
-```json
-{
-  "idToken": "google_id_token"
-}
+```tsx
+<SmartlinksAuthUI
+  clientId="your-client-123"
+  customization={{
+    branding: {
+      logoUrl: "https://yourdomain.com/logo.png",
+      title: "Welcome to Acme",
+      subtitle: "Sign in to your account",
+      primaryColor: "#6366f1",
+      secondaryColor: "#4f46e5",
+      backgroundColor: "#f0f9ff",
+      fontFamily: "Inter, sans-serif"
+    }
+  }}
+/>
 ```
-Response: `{ "token": "bearer_token", "user": {...} }`
 
-### POST /api/v1/authkit/:clientId/auth/phone/send-code
-```json
-{
-  "phoneNumber": "+1234567890"
-}
-```
-Response: `{ "verificationId": "xxx" }`
+### Provider Configuration
 
-### POST /api/v1/authkit/:clientId/auth/phone/verify
-```json
-{
-  "verificationId": "xxx",
-  "code": "123456"
-}
-```
-Response: `{ "token": "bearer_token", "user": {...} }`
+Configure which authentication providers are available and their display order through the Smartlinks admin interface.
 
-### POST /api/v1/authkit/:clientId/auth/reset-password
-```json
-{
-  "email": "user@example.com"
-}
-```
-Response: `{ "success": true }`
+### Email Templates
 
-### POST /api/v1/authkit/:clientId/auth/verify-reset-token
-```json
-{
-  "oobCode": "reset_code_from_url"
-}
-```
-Response: `{ "valid": true, "email": "user@example.com" }`
+Customize email templates for password reset, email verification, and magic links through the admin interface with support for:
+- Custom logos and hero images
+- Branded colors and fonts
+- Custom intro text and CTAs
+- Footer links and company information
 
-### 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"]
-}
-```
+See [CUSTOMIZATION_GUIDE.md](./CUSTOMIZATION_GUIDE.md) for detailed customization options.
 
-## Styling
+## Advanced Features
 
-### CSS Import (Required)
+### Multi-Tenant Support
 
-The module requires you to import the CSS file for proper styling:
+The `clientId` parameter enables multi-tenant authentication, allowing different applications or customers to use the same auth infrastructure with isolated configurations:
 
 ```tsx
-import '@smartlinks/auth-ui/dist/index.css';
-```
+// App 1
+<SmartlinksAuthUI clientId="app-1-prod" />
 
-Add this to your app's entry point (`main.tsx`, `index.tsx`, or `App.tsx`).
+// App 2
+<SmartlinksAuthUI clientId="app-2-prod" />
+```
 
-### Theme Support
+### Custom Account Data
 
-The component supports light and dark themes:
+Store custom metadata per user account during registration:
 
 ```tsx
 <SmartlinksAuthUI
-  apiEndpoint="https://api.smartlinks.com"
   clientId="your-client-123"
-  onAuthSuccess={handleAuth}
-  theme="dark"  // or "light" (default)
+  accountData={{
+    companyName: "Acme Corp",
+    plan: "enterprise",
+    seats: 50,
+    customFields: {
+      industry: "Technology",
+      region: "North America"
+    }
+  }}
 />
 ```
 
-### Custom Styling
+### Deep Link Handling
 
-You can customize the appearance by:
+The component automatically handles URL-based authentication flows:
 
-1. **Using the customization prop** (recommended):
-```tsx
-<SmartlinksAuthUI
-  customization={{
-    branding: {
-      primaryColor: "#6366f1",
-      secondaryColor: "#4f46e5",
-      backgroundColor: "#f0f9ff",
-      fontFamily: "Inter, sans-serif"
-    }
-  }}
-/>
-```
+- **Email Verification**: `?mode=verifyEmail&token=xxx`
+- **Password Reset**: `?mode=resetPassword&token=xxx`
+- **Magic Links**: `?mode=magicLink&token=xxx`
 
-2. **Overriding CSS classes** in your own stylesheet:
-```css
-/* In your app's CSS file */
-.auth-container {
-  /* Your custom styles */
-}
+### Cross-Tab Synchronization
 
-.auth-button-primary {
-  /* Your custom button styles */
-}
-```
+Authentication state automatically syncs across browser tabs using BroadcastChannel API and IndexedDB. When a user logs in or out in one tab, all other tabs update immediately.
 
-3. **Using CSS custom properties** for quick theming:
-```css
-.auth-container {
-  --auth-primary-color: #6366f1;
-  --auth-bg-color: #f0f9ff;
-  --auth-font-family: "Inter", sans-serif;
-}
+## TypeScript Support
+
+Full TypeScript definitions included:
+
+```tsx
+import type { 
+  AuthUser, 
+  AuthToken, 
+  AuthResponse,
+  AuthProvider,
+  AuthUIConfig,
+  SmartlinksAuthUIProps,
+  AccountManagementProps,
+  ClaimField,
+  ClaimResult
+} from '@smartlinks/auth-ui';
 ```
 
+## Documentation
+
+- **[AUTH_STATE_MANAGEMENT.md](./AUTH_STATE_MANAGEMENT.md)** - Complete guide to authentication state, callbacks, and cross-tab sync
+- **[ACCOUNT_CACHING.md](./ACCOUNT_CACHING.md)** - Account information caching strategies and configuration
+- **[CUSTOMIZATION_GUIDE.md](./CUSTOMIZATION_GUIDE.md)** - Detailed customization and theming guide
+- **[SMARTLINKS_INTEGRATION.md](./SMARTLINKS_INTEGRATION.md)** - Smartlinks SDK integration details
+
 ## Troubleshooting
 
 ### Styles Not Appearing
@@ -384,14 +534,28 @@ import '@smartlinks/auth-ui/dist/index.css';
 
 This import should be at the top of your app's entry point (before your component imports).
 
-### Build Errors
+### Smartlinks SDK Not Initialized
+
+**Problem**: `Cannot read property 'authKit' of undefined` or similar SDK errors.
+
+**Solution**: Initialize the Smartlinks SDK before rendering components:
+```tsx
+import * as smartlinks from '@proveanything/smartlinks';
+
+smartlinks.initializeApi({
+  baseUrl: 'https://smartlinks.app/api/v1',
+  proxyMode: false,
+});
+```
+
+### Session Not Persisting
 
-**Problem**: `Cannot find module '@smartlinks/auth-ui/dist/index.css'`
+**Problem**: Users get logged out on page refresh.
 
 **Solution**: 
-1. Verify the package is installed: `npm install @smartlinks/auth-ui`
-2. Ensure your bundler (Vite, Webpack) supports CSS imports
-3. Try clearing your node_modules and reinstalling
+1. Ensure AuthProvider wraps your entire app
+2. Check that IndexedDB is enabled in the browser
+3. Verify that third-party cookies aren't blocked (affects cross-tab sync)
 
 ### TypeScript Errors
 
@@ -399,22 +563,15 @@ This import should be at the top of your app's entry point (before your componen
 
 **Solution**: The package includes TypeScript definitions. Make sure:
 ```tsx
-import type { AuthUser, AuthToken, AuthProvider } from '@smartlinks/auth-ui';
+import type { AuthUser, AuthResponse } from '@smartlinks/auth-ui';
 ```
 
-## TypeScript Support
-
-Full TypeScript definitions included:
+## Support
 
-```tsx
-import type { 
-  AuthUser, 
-  AuthToken, 
-  AuthProvider,
-  AuthUIConfig,
-  SmartlinksAuthUIProps 
-} from '@smartlinks/auth-ui';
-```
+For issues, questions, or feature requests:
+- GitHub Issues: [github.com/smartlinks/auth-ui](https://github.com/smartlinks/auth-ui)
+- Documentation: [docs.smartlinks.app/auth-ui](https://docs.smartlinks.app/auth-ui)
+- Smartlinks Platform: [smartlinks.app](https://smartlinks.app)
 
 ## License