npm - @insforge/react - Versions diffs - 0.1.6 → 0.2.0 - Mend

@insforge/react 0.1.6 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/README.md CHANGED Viewed

@@ -1,18 +1,22 @@
 # @insforge/react
-**Complete authentication solution for React applications.** Framework-agnostic components with full business logic included.
+**Complete authentication solution for React applications.** Production-ready components with full business logic included.
 ## Why @insforge/react?
-✅ **Complete Package** - Not just UI, includes SDK integration, providers, and hooks
-✅ **Framework Agnostic** - Works with Next.js, Vite, Remix, or any React framework
-✅ **5-Minute Setup** - Provider + Components = done
+✅ **5-Minute Setup** - One provider + one line of router config = done
+✅ **Built-in Auth UI** - Use deployed auth pages (like Next.js middleware)
+✅ **Framework Agnostic** - Works with any React framework
 ✅ **Full TypeScript** - Complete type safety out of the box
-✅ **Customizable** - Every component supports appearance props and text customization
+✅ **Fully Customizable** - Deep styling control when you need it
-**Need just UI?** All components are exported separately for maximum flexibility.
+---
+## Quick Start
-## Installation
+Get authentication working in your React app in 5 minutes.
+### 1. Install
 ```bash
 npm install @insforge/react
@@ -22,443 +26,328 @@ yarn add @insforge/react
 pnpm add @insforge/react
 ```
-Dependencies automatically include `@insforge/sdk` for authentication logic.
----
-## Quick Start
+### 2. Setup Provider
-### 1. Setup Provider
-Wrap your app with `InsforgeProvider` in the root:
+Wrap your app with `InsforgeProvider`:
 ```tsx
-// React / Vite
+// src/main.tsx (Vite) or src/index.tsx (CRA)
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import { InsforgeProvider } from '@insforge/react';
 import '@insforge/react/styles.css';
+import App from './App';
-function App() {
-  return (
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
     <InsforgeProvider baseUrl={import.meta.env.VITE_INSFORGE_BASE_URL}>
-      {/* Your app */}
+      <App />
     </InsforgeProvider>
-  );
-}
-```
-```tsx
-// Next.js App Router
-'use client';
-import { InsforgeProvider } from '@insforge/react';
-import '@insforge/react/styles.css';
-export default function RootLayout({ children }) {
-  return (
-    <html>
-      <body>
-        <InsforgeProvider baseUrl={process.env.NEXT_PUBLIC_INSFORGE_BASE_URL}>
-          {children}
-        </InsforgeProvider>
-      </body>
-    </html>
-  );
-}
+  </StrictMode>
+);
 ```
-**Props:**
-- `baseUrl` (required): Your Insforge backend URL
-- `onAuthChange` (optional): Callback when auth state changes
-- `syncTokenToCookie` (optional): Custom function to sync token to cookies (for Next.js SSR)
-- `clearCookie` (optional): Custom function to clear cookie on sign out
-### 2. Use Pre-built Components
-The easiest way to add authentication:
+### 3. Configure Router (Built-in Auth)
 ```tsx
-'use client'; // for Next.js
-import { SignIn, SignUp } from '@insforge/react';
-// Sign In Page
-export default function SignInPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <SignIn
-        afterSignInUrl="/dashboard"
-        signUpUrl="/sign-up"
-      />
-    </div>
-  );
-}
+// src/App.tsx
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { getInsforgeRoutes } from '@insforge/react/router';
+import Home from './pages/Home';
+import Dashboard from './pages/Dashboard';
+const router = createBrowserRouter([
+  { path: '/', element: <Home /> },
+  ...getInsforgeRoutes({
+    baseUrl: import.meta.env.VITE_INSFORGE_BASE_URL,
+    builtInAuth: true
+  }),
+  { path: '/dashboard', element: <Dashboard /> }
+]);
-// Sign Up Page
-export default function SignUpPage() {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <SignUp
-        afterSignUpUrl="/dashboard"
-        signInUrl="/sign-in"
-      />
-    </div>
-  );
+export default function App() {
+  return <RouterProvider router={router} />;
 }
 ```
-### 3. Create Callback Page (for OAuth)
-Handle OAuth redirects:
-```tsx
-'use client'; // for Next.js
-import { InsforgeCallback } from '@insforge/react';
-export default function CallbackPage() {
-  return <InsforgeCallback />;
-}
-```
+**What this does:**
+- Visiting `/sign-in` → Redirects to `your-project.insforge.app/auth/sign-in`
+- Visiting `/sign-up` → Redirects to `your-project.insforge.app/auth/sign-up`
+- After auth → Redirects back to `/auth/callback` → Goes to dashboard
-### 4. Use Hooks & Components
+### 4. Add Auth UI to Your Pages
 ```tsx
-'use client'; // for Next.js
-import { SignedIn, SignedOut, UserButton, useAuth, useUser } from '@insforge/react';
+// src/pages/Home.tsx
+import { SignedIn, SignedOut, UserButton } from '@insforge/react';
 export default function Home() {
-  const { isSignedIn } = useAuth();
-  const { user } = useUser();
   return (
     <div>
-      <SignedOut>
-        <a href="/sign-in">Sign In</a>
-      </SignedOut>
-      <SignedIn>
-        <UserButton afterSignOutUrl="/" />
-        <h1>Welcome, {user?.email}!</h1>
-      </SignedIn>
+      <nav>
+        <SignedOut>
+          <a href="/sign-in">Sign In</a>
+        </SignedOut>
+        <SignedIn>
+          <UserButton afterSignOutUrl="/" />
+        </SignedIn>
+      </nav>
+      <h1>Welcome to My App!</h1>
     </div>
   );
 }
 ```
-**That's it!** 🎉 Your React app now has production-ready authentication.
----
-## How It Works
-```
-1. User visits Sign In page → Renders <SignIn> component
-   ↓
-2. User enters credentials → Component calls SDK methods
-   ↓
-3. SDK communicates with backend → Returns auth token
-   ↓
-4. Provider updates auth state → Components re-render
-   ↓
-5. User sees authenticated UI → Redirect to dashboard
-```
-**Architecture:**
-- **InsforgeProvider**: Manages authentication state globally
-- **SDK Integration**: All auth operations go through `@insforge/sdk`
-- **React Context**: Provides auth state to all child components
-- **Hooks**: Easy access to auth methods and user data
+**That's it!** 🎉 You now have production-ready authentication.
 ---
-## Complete Components (with Business Logic)
+## Router Configuration Options
-These components include full authentication logic:
+### Built-in Auth (Recommended)
-### `<SignIn />`
-Complete sign-in component with email/password and OAuth:
+Uses your deployed Insforge auth pages:
 ```tsx
-import { SignIn } from '@insforge/react';
-import { useNavigate } from 'react-router-dom';
-function SignInPage() {
-  const navigate = useNavigate();
-  return (
-    <SignIn
-      afterSignInUrl="/dashboard"
-      signUpUrl="/sign-up"
-      forgotPasswordUrl="/forgot-password"
-      onSuccess={(user, accessToken) => {
-        console.log('Signed in:', user);
-      }}
-      onError={(error) => {
-        console.error('Error:', error);
-      }}
-      onRedirect={(url) => navigate(url)}
-      // Customization
-      title="Welcome Back"
-      subtitle="Sign in to continue"
-      appearance={{
-        containerClassName: "shadow-xl",
-        buttonClassName: "bg-blue-600"
-      }}
-    />
-  );
-}
+...getInsforgeRoutes({
+  baseUrl: 'https://your-project.insforge.app',
+  builtInAuth: true,  // Default
+  paths: {
+    signIn: '/sign-in',           // Custom path (optional)
+    signUp: '/sign-up',
+    verifyEmail: '/verify-email',
+    forgotPassword: '/forgot-password',
+    resetPassword: '/reset-password',
+    callback: '/auth/callback'
+  }
+})
 ```
-**Key Features:**
-- Email/password authentication
-- OAuth provider buttons (auto-detected from backend)
-- Password visibility toggle
-- Error handling
-- Loading states
-- Customizable text and styling
-### `<SignUp />`
+### Custom UI Components
-Complete sign-up component with password strength validation:
+Use package components with your own styling:
 ```tsx
-import { SignUp } from '@insforge/react';
+import { SignIn, SignUp } from '@insforge/react';
-function SignUpPage() {
-  return (
-    <SignUp
-      afterSignUpUrl="/onboarding"
-      signInUrl="/sign-in"
-      onSuccess={(user, accessToken) => {
-        // Track sign-up event
-        analytics.track('user_signed_up', { userId: user.id });
-      }}
-    />
-  );
-}
+const router = createBrowserRouter([
+  { path: '/', element: <Home /> },
+  // Still need callback route for OAuth
+  ...getInsforgeRoutes({
+    baseUrl: import.meta.env.VITE_INSFORGE_BASE_URL,
+    builtInAuth: false  // Don't redirect to deployed UI
+  }),
+  // Use package components
+  { path: '/sign-in', element: <SignIn afterSignInUrl="/dashboard" /> },
+  { path: '/sign-up', element: <SignUp afterSignUpUrl="/dashboard" /> }
+]);
 ```
-**Key Features:**
-- Email/password registration
-- Real-time password strength indicator
-- OAuth provider buttons
-- Form validation
-- Customizable requirements
+### Fully Custom UI
-### `<UserButton />`
-User profile dropdown with sign-out:
+Build your own auth pages from scratch:
 ```tsx
-import { UserButton } from '@insforge/react';
+import { useAuth } from '@insforge/react';
-function Header() {
-  return (
-    <header>
-      <nav>
-        {/* Your navigation */}
-      </nav>
-      <UserButton
-        afterSignOutUrl="/"
-        mode="detailed" // or "simple"
-        appearance={{
-          buttonClassName: "hover:bg-gray-100",
-          nameClassName: "text-gray-900",
-          emailClassName: "text-gray-600"
-        }}
-      />
-    </header>
-  );
+function CustomSignIn() {
+  const { signIn } = useAuth();
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await signIn(email, password);
+    navigate('/dashboard');
+  };
+  return <form onSubmit={handleSubmit}>...</form>;
 }
 ```
-**Modes:**
-- `detailed`: Shows avatar + name + email
-- `simple`: Shows avatar only
-### `<Protect />`
-Protected content with conditional rendering:
-```tsx
-import { Protect } from '@insforge/react';
-function Dashboard() {
-  return (
-    <div>
-      <h1>Dashboard</h1>
-      {/* Simple protection */}
-      <Protect redirectTo="/sign-in">
-        <UserContent />
-      </Protect>
-      {/* Role-based protection */}
-      <Protect
-        redirectTo="/unauthorized"
-        condition={(user) => user.role === 'admin'}
-      >
-        <AdminPanel />
-      </Protect>
-    </div>
-  );
-}
-```
+---
-### `<SignedIn>` / `<SignedOut>`
+## Core Features
-Conditional rendering based on auth state:
+### Components
-```tsx
-import { SignedIn, SignedOut } from '@insforge/react';
+**Pre-built with Business Logic:**
+- `<SignIn />` - Complete sign-in with email/password & OAuth
+- `<SignUp />` - Registration with password validation
+- `<UserButton />` - User dropdown with sign-out
+- `<Protect />` - Route protection wrapper
+- `<SignedIn>` / `<SignedOut>` - Conditional rendering
+- `<InsforgeCallback />` - OAuth callback handler
-function NavBar() {
-  return (
-    <nav>
-      <SignedOut>
-        <a href="/sign-in">Sign In</a>
-        <a href="/sign-up">Sign Up</a>
-      </SignedOut>
-      <SignedIn>
-        <a href="/dashboard">Dashboard</a>
-        <UserButton />
-      </SignedIn>
-    </nav>
-  );
-}
-```
+**Form Components (Pure UI):**
+- `<SignInForm />` - Sign-in UI without logic
+- `<SignUpForm />` - Sign-up UI without logic
+- `<ForgotPasswordForm />` - Password reset request
+- `<ResetPasswordForm />` - Password reset with token
+- `<VerifyEmailStatus />` - Email verification status
-### `<InsforgeCallback />`
+**Atomic Components (13 total):**
+- `<AuthContainer />`, `<AuthHeader />`, `<AuthFormField />`, `<AuthPasswordField />`, etc.
-OAuth callback handler (3 lines instead of 70+):
+### Hooks
 ```tsx
-'use client';
-import { InsforgeCallback } from '@insforge/react';
-export default function CallbackPage() {
-  return <InsforgeCallback redirectTo="/dashboard" />;
-}
+const { signIn, signUp, signOut, isSignedIn, isLoaded } = useAuth();
+const { user, updateUser, isLoaded } = useUser();
+const { oauthProviders, emailConfig, isLoaded } = usePublicAuthConfig();
 ```
 ---
-## Hooks
+## Customization
-### `useAuth()`
+### Basic Styling
-Access authentication methods:
+All components support `appearance` props:
 ```tsx
-import { useAuth } from '@insforge/react';
-function LoginButton() {
-  const { signIn, signUp, signOut, isSignedIn, isLoaded } = useAuth();
-  const handleSignIn = async () => {
-    try {
-      await signIn('user@example.com', 'password');
-      // Redirect or update UI
-    } catch (error) {
-      console.error('Sign in failed:', error);
-    }
-  };
-  if (!isLoaded) return <div>Loading...</div>;
-  return (
-    <button onClick={isSignedIn ? signOut : handleSignIn}>
-      {isSignedIn ? 'Sign Out' : 'Sign In'}
-    </button>
-  );
-}
+<SignIn
+  appearance={{
+    container: "max-w-lg",
+    card: "bg-white shadow-2xl",
+    button: "bg-blue-600 hover:bg-blue-700"
+  }}
+/>
 ```
-**Returns:**
-- `signIn(email, password)` - Sign in with email/password
-- `signUp(email, password)` - Sign up new user
-- `signOut()` - Sign out current user
-- `isSignedIn` - Boolean auth state
-- `isLoaded` - Boolean loading state
+### Deep Customization (Hierarchical Appearance)
-### `useUser()`
-Access user data:
+Style nested components through hierarchical structure:
 ```tsx
-import { useUser } from '@insforge/react';
+<SignIn
+  appearance={{
+    card: "bg-gradient-to-br from-blue-50 to-white shadow-2xl",
+    header: {
+      title: "text-3xl font-bold text-purple-900",
+      subtitle: "text-purple-600"
+    },
+    form: {
+      emailField: {
+        label: "text-gray-800 font-semibold",
+        input: "border-purple-300 focus:border-purple-500 rounded-lg"
+      },
+      passwordField: {
+        input: "border-purple-300 focus:border-purple-500 rounded-lg",
+        forgotPasswordLink: "text-purple-600 hover:text-purple-800"
+      }
+    },
+    button: "bg-purple-600 hover:bg-purple-700 rounded-lg h-12",
+    link: {
+      text: "text-gray-600",
+      link: "text-purple-600 hover:text-purple-800 font-semibold"
+    },
+    oauth: {
+      button: "border-2 hover:bg-gray-50 rounded-xl"
+    }
+  }}
+/>
+```
-function UserProfile() {
-  const { user, isLoaded, updateUser } = useUser();
+#### Complete Appearance Structure
-  if (!isLoaded) return <div>Loading...</div>;
-  if (!user) return <div>Not signed in</div>;
+**SignIn / SignUp Components:**
-  const handleUpdate = async () => {
-    await updateUser({ name: 'New Name' });
+```typescript
+appearance?: {
+  container?: string;              // Outermost wrapper
+  card?: string;                   // Inner card box
+  header?: {
+    container?: string;            // Header wrapper
+    title?: string;                // Title text
+    subtitle?: string;             // Subtitle text
+  };
+  errorBanner?: string;            // Error message banner
+  form?: {
+    container?: string;            // Form wrapper
+    emailField?: {
+      container?: string;          // Email field wrapper
+      label?: string;              // Email label
+      input?: string;              // Email input
+    };
+    passwordField?: {
+      container?: string;          // Password field wrapper
+      label?: string;              // Password label
+      input?: string;              // Password input
+      forgotPasswordLink?: string; // Forgot password link (SignIn only)
+      strengthIndicator?: {        // Password strength (SignUp only)
+        container?: string;
+        requirement?: string;
+      };
+    };
+  };
+  button?: string;                 // Submit button
+  link?: {
+    container?: string;            // Link section wrapper
+    text?: string;                 // Link description text
+    link?: string;                 // Actual link element
+  };
+  divider?: string;                // "or" divider
+  oauth?: {
+    container?: string;            // OAuth buttons wrapper
+    button?: string;               // Individual OAuth button
   };
-  return (
-    <div>
-      <p>Email: {user.email}</p>
-      <p>Name: {user.name}</p>
-      <img src={user.avatarUrl} alt="Avatar" />
-      <button onClick={handleUpdate}>Update Name</button>
-    </div>
-  );
 }
 ```
-**Returns:**
-- `user` - User object with id, email, name, avatarUrl
-- `isLoaded` - Boolean loading state
-- `updateUser(data)` - Update user profile
-- `setUser(user)` - Manually set user state
-### `usePublicAuthConfig()`
+### Text Customization
-Get OAuth providers and password requirements:
+All text is customizable:
 ```tsx
-import { usePublicAuthConfig } from '@insforge/react';
-function SignInPage() {
-  const { oauthProviders, emailConfig, isLoaded } = usePublicAuthConfig();
-  if (!isLoaded) return <div>Loading...</div>;
-  return (
-    <div>
-      <p>Available OAuth: {oauthProviders.join(', ')}</p>
-      <p>Password min length: {emailConfig?.passwordMinLength}</p>
-    </div>
-  );
-}
+<SignIn
+  title="Welcome Back!"
+  subtitle="We're happy to see you again"
+  emailLabel="Your Email Address"
+  emailPlaceholder="you@company.com"
+  passwordLabel="Your Password"
+  submitButtonText="Login Now"
+  loadingButtonText="Signing you in..."
+  signUpText="New to our platform?"
+  signUpLinkText="Create an account"
+  dividerText="or continue with"
+/>
 ```
-**⚠️ Important:** Only use this hook in SignIn/SignUp components to avoid unnecessary API calls.
 ---
-## UI Form Components (Pure UI)
-Build custom auth flows with pre-built forms:
+## Advanced Usage
-### `<SignInForm />`
+### Complete Component with Custom Logic
 ```tsx
-import { SignInForm } from '@insforge/react';
+import { SignInForm, useAuth } from '@insforge/react';
 import { useState } from 'react';
 function CustomSignIn() {
+  const { signIn } = useAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
-  const handleSubmit = async (e) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
-    // Your auth logic
+    setError('');
+    try {
+      await signIn(email, password);
+      // Custom success logic
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
   };
   return (
@@ -471,23 +360,15 @@ function CustomSignIn() {
       error={error}
       loading={loading}
       availableProviders={['google', 'github']}
-      onOAuthClick={(provider) => handleOAuth(provider)}
+      onOAuthClick={(provider) => {
+        // Custom OAuth logic
+      }}
     />
   );
 }
 ```
-**Other Form Components:**
-- `<SignUpForm />` - Sign up with password strength
-- `<ForgotPasswordForm />` - Request password reset
-- `<ResetPasswordForm />` - Reset password with token
-- `<VerifyEmailStatus />` - Email verification status
----
-## Atomic Components (Maximum Flexibility)
-Build completely custom UIs:
+### Build from Atomic Components
 ```tsx
 import {
@@ -564,143 +445,29 @@ function CompletelyCustomAuth() {
 }
 ```
-**Available Atomic Components:**
-- `AuthContainer` - Main wrapper with branding
-- `AuthHeader` - Title and subtitle
-- `AuthErrorBanner` - Error messages
-- `AuthFormField` - Standard input
-- `AuthPasswordField` - Password with toggle
-- `AuthPasswordStrengthIndicator` - Password checklist
-- `AuthSubmitButton` - Loading button
-- `AuthLink` - Navigation link
-- `AuthDivider` - Visual separator
-- `AuthOAuthButton` - Single OAuth button
-- `AuthOAuthProviders` - OAuth grid
-- `AuthVerificationCodeInput` - 6-digit OTP
-- `AuthBranding` - Insforge branding
----
-## Customization
-### Appearance Props
-All components support Tailwind className overrides:
-```tsx
-<SignIn
-  appearance={{
-    containerClassName: "shadow-2xl max-w-lg",
-    cardClassName: "bg-gradient-to-br from-blue-50 to-white",
-    formClassName: "space-y-6",
-    buttonClassName: "bg-blue-600 hover:bg-blue-700 h-12"
-  }}
-/>
-<UserButton
-  appearance={{
-    buttonClassName: "hover:bg-gray-100 rounded-full",
-    nameClassName: "text-gray-900 font-semibold",
-    emailClassName: "text-gray-500",
-    dropdownClassName: "shadow-xl"
-  }}
-/>
-```
-### Text Customization
-All text is customizable:
-```tsx
-<SignIn
-  title="Welcome Back!"
-  subtitle="We're happy to see you again"
-  emailLabel="Your Email Address"
-  emailPlaceholder="you@company.com"
-  passwordLabel="Your Password"
-  submitButtonText="Login Now"
-  loadingButtonText="Signing you in..."
-  signUpText="New to our platform?"
-  signUpLinkText="Create an account"
-  dividerText="or continue with"
-/>
-```
----
-## Framework Integration
-### Next.js (App Router)
+### Route Protection
 ```tsx
-// app/layout.tsx
-'use client';
-import { InsforgeProvider } from '@insforge/react';
-import '@insforge/react/styles.css';
+import { Protect } from '@insforge/react';
-export default function RootLayout({ children }) {
+function Dashboard() {
   return (
-    <html>
-      <body>
-        <InsforgeProvider
-          baseUrl={process.env.NEXT_PUBLIC_INSFORGE_BASE_URL}
-          syncTokenToCookie={async (token) => {
-            await fetch('/api/auth', {
-              method: 'POST',
-              body: JSON.stringify({ token })
-            });
-            return true;
-          }}
-          clearCookie={async () => {
-            await fetch('/api/auth', { method: 'DELETE' });
-          }}
-        >
-          {children}
-        </InsforgeProvider>
-      </body>
-    </html>
-  );
-}
-```
-### Vite / React
-```tsx
-// src/main.tsx
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import { InsforgeProvider } from '@insforge/react';
-import '@insforge/react/styles.css';
-import App from './App';
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <BrowserRouter>
-      <InsforgeProvider baseUrl={import.meta.env.VITE_INSFORGE_BASE_URL}>
-        <App />
-      </InsforgeProvider>
-    </BrowserRouter>
-  </StrictMode>
-);
-```
-### Remix
-```tsx
-// app/root.tsx
-import { InsforgeProvider } from '@insforge/react';
-import '@insforge/react/styles.css';
+    <div>
+      <h1>Dashboard</h1>
+      {/* Simple protection */}
+      <Protect redirectTo="/sign-in">
+        <UserContent />
+      </Protect>
-export default function App() {
-  return (
-    <html>
-      <body>
-        <InsforgeProvider baseUrl={process.env.INSFORGE_BASE_URL}>
-          <Outlet />
-        </InsforgeProvider>
-      </body>
-    </html>
+      {/* Role-based protection */}
+      <Protect
+        redirectTo="/unauthorized"
+        condition={(user) => user.role === 'admin'}
+      >
+        <AdminPanel />
+      </Protect>
+    </div>
   );
 }
 ```
@@ -716,6 +483,8 @@ import type {
   InsforgeUser,
   SignInProps,
   SignUpProps,
+  SignInAppearance,
+  SignUpAppearance,
   UserButtonProps,
   ProtectProps,
   ConditionalProps,
@@ -726,74 +495,12 @@ import type {
   OAuthProvider,
   EmailAuthConfig,
   InsforgeProviderProps,
+  GetInsforgeRoutesConfig,
 } from '@insforge/react';
 ```
 ---
-## API Reference
-### InsforgeProvider Props
-```tsx
-interface InsforgeProviderProps {
-  baseUrl: string;                                      // Insforge backend URL
-  onAuthChange?: (user: InsforgeUser | null) => void;   // Auth state callback
-  syncTokenToCookie?: (token: string) => Promise<boolean>; // Custom cookie sync
-  clearCookie?: () => Promise<void>;                    // Custom cookie clear
-}
-```
-### SignIn / SignUp Props
-```tsx
-interface SignInProps {
-  afterSignInUrl?: string;          // Redirect after sign in
-  signUpUrl?: string;               // Link to sign up page
-  forgotPasswordUrl?: string;       // Link to forgot password
-  onSuccess?: (user, token) => void; // Success callback
-  onError?: (error: Error) => void;  // Error callback
-  onRedirect?: (url: string) => void; // Custom redirect handler
-  title?: string;                    // Custom title
-  subtitle?: string;                 // Custom subtitle
-  appearance?: {                     // Custom styling
-    containerClassName?: string;
-    cardClassName?: string;
-    formClassName?: string;
-    buttonClassName?: string;
-  };
-  // ... more text customization props
-}
-```
-### InsforgeCallback Props
-```tsx
-interface InsforgeCallbackProps {
-  redirectTo?: string;              // Custom redirect destination
-  onSuccess?: () => void;           // Success callback
-  onError?: (error: string) => void; // Error callback
-  loadingComponent?: ReactNode;     // Custom loading UI
-  onRedirect?: (url: string) => void; // Custom redirect handler
-}
-```
----
-## Validation Utilities
-```tsx
-import { emailSchema, cn } from '@insforge/react';
-// Validate email with Zod
-const result = emailSchema.safeParse('user@example.com');
-// Merge Tailwind classes
-const className = cn('px-4 py-2', 'bg-blue-500', conditionalClass);
-```
----
 ## OAuth Providers
 Built-in support for 10+ OAuth providers:
@@ -813,28 +520,37 @@ Providers are auto-detected from your backend configuration.
 ---
-## Why @insforge/react?
+## Validation Utilities
-**vs. Building Custom Auth:**
-- ⚡️ 5 minutes vs 2+ days of development
-- 🔒 Production-ready security built-in
-- 🎨 Customizable when needed, works out of the box
-- 🚀 No framework lock-in
+```tsx
+import { emailSchema, cn } from '@insforge/react/lib';
-**vs. Other Auth Libraries:**
-- 📦 Complete package (not just UI)
-- 🎯 Framework agnostic (works everywhere)
-- 🤖 SDK-first approach (consistent API)
-- 💰 Self-hosted (no vendor lock-in)
+// Validate email with Zod
+const result = emailSchema.safeParse('user@example.com');
----
+// Merge Tailwind classes
+const className = cn('px-4 py-2', 'bg-blue-500', conditionalClass);
+```
-## Examples
+---
-Check out example integrations:
-- [Next.js App Router](./examples/nextjs)
-- [Vite + React Router](./examples/vite)
-- [Remix](./examples/remix)
+## Available Atomic Components
+Low-level building blocks for complete customization:
+- `<AuthBranding />` - Insforge branding footer
+- `<AuthContainer />` - Main container wrapper
+- `<AuthHeader />` - Title and subtitle display
+- `<AuthErrorBanner />` - Error message display
+- `<AuthFormField />` - Standard input field
+- `<AuthPasswordField />` - Password input with features
+- `<AuthPasswordStrengthIndicator />` - Password checklist
+- `<AuthSubmitButton />` - Submit button with states
+- `<AuthLink />` - Call-to-action link
+- `<AuthDivider />` - Visual separator
+- `<AuthOAuthButton />` - Single OAuth provider button
+- `<AuthOAuthProviders />` - Smart OAuth grid
+- `<AuthVerificationCodeInput />` - 6-digit OTP input
 ---