@insforge/react 0.5.6 → 0.5.8

package/README.md

@@ -27,11 +27,11 @@ pnpm add @insforge/react
 ```
 
 **Required Peer Dependencies:**
+
 ```bash
 npm install react@^19.0.0 react-dom@^19.0.0
 ```
 
-
 #### Environment Variables
 
 ```bash
@@ -41,28 +41,19 @@ VITE_INSFORGE_BASE_URL=https://your-project.insforge.app/
 
 ### 2. Setup Provider & Route Guard
 
-Wrap your app with `InsforgeProvider` and `RouteGuard`:
+Wrap your app with `InsforgeProvider`:
 
 ```tsx
 // src/main.tsx (Vite) or src/index.tsx (CRA)
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { InsforgeProvider, RouteGuard } from '@insforge/react';
+import { InsforgeProvider } from '@insforge/react';
 import App from './App';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <InsforgeProvider 
-      baseUrl={import.meta.env.VITE_INSFORGE_BASE_URL}
-      afterSignInUrl="/dashboard"
-    >
-      <RouteGuard
-        builtInAuth
-        publicRoutes={['/', '/about']}
-        loadingFallback={<div>Loading...</div>}
-      >
-        <App />
-      </RouteGuard>
+    <InsforgeProvider baseUrl={import.meta.env.VITE_INSFORGE_BASE_URL}>
+      <App />
     </InsforgeProvider>
   </StrictMode>
 );
@@ -74,24 +65,19 @@ Now you can use authentication components and hooks anywhere in your app:
 
 ```tsx
 // src/App.tsx
-import { SignIn, SignedIn, SignedOut, UserButton, useAuth } from '@insforge/react';
+import { SignInButton, SignUpButton, SignedIn, SignedOut, UserButton } from '@insforge/react';
 
 export default function App() {
-  const { isSignedIn, isLoaded } = useAuth();
-
-  if (!isLoaded) {
-    return <div>Loading...</div>;
-  }
-
   return (
     <div>
       <SignedOut>
-        <SignIn />
+        <SignInButton />
+        <SignUpButton />
       </SignedOut>
 
       <SignedIn>
         <nav>
-          <UserButton afterSignOutUrl="/" />
+          <UserButton />
         </nav>
         <h1>Welcome to your dashboard!</h1>
       </SignedIn>
@@ -216,14 +202,14 @@ function CustomAuthForm() {
 
 ```tsx
 // Authentication state and methods
-const { 
-  signIn, 
-  signUp, 
-  signOut, 
-  isSignedIn, 
+const {
+  signIn,
+  signUp,
+  signOut,
+  isSignedIn,
   isLoaded,
-  baseUrl,           // From provider
-  afterSignInUrl     // From provider
+  baseUrl, // From provider
+  afterSignInUrl, // From provider
 } = useAuth();
 
 // Or use useInsforge (same as useAuth)
@@ -380,10 +366,7 @@ function Dashboard() {
       </Protect>
 
       {/* Custom condition - e.g., role-based */}
-      <Protect 
-        condition={(user) => user.email.endsWith('@admin.com')}
-        redirectTo="/unauthorized"
-      >
+      <Protect condition={(user) => user.email.endsWith('@admin.com')} redirectTo="/unauthorized">
         <AdminPanel />
       </Protect>
     </div>
@@ -409,10 +392,7 @@ Redirects to your deployed Insforge Auth pages:
 import { InsforgeProvider, RouteGuard } from '@insforge/react';
 
 createRoot(document.getElementById('root')!).render(
-  <InsforgeProvider 
-    baseUrl={import.meta.env.VITE_INSFORGE_BASE_URL}
-    afterSignInUrl="/dashboard"
-  >
+  <InsforgeProvider baseUrl={import.meta.env.VITE_INSFORGE_BASE_URL} afterSignInUrl="/dashboard">
     <RouteGuard
       builtInAuth
       publicRoutes={['/', '/about', '/pricing']}
@@ -425,6 +405,7 @@ createRoot(document.getElementById('root')!).render(
 ```
 
 **Behavior:**
+
 - User visits `/sign-in` → Redirects to `baseUrl/auth/sign-in`
 - User visits `/sign-up` → Redirects to `baseUrl/auth/sign-up`
 - User visits `/dashboard` (protected) → Redirects to `baseUrl/auth/sign-in`
@@ -440,7 +421,7 @@ import { InsforgeProvider, RouteGuard, SignIn, SignUp } from '@insforge/react';
 // Simple hash-based routing
 function App() {
   const path = window.location.hash.slice(1) || '/';
-  
+
   return (
     <>
       {path === '/login' && <SignIn />}
@@ -466,31 +447,32 @@ createRoot(document.getElementById('root')!).render(
 ```
 
 **Behavior:**
+
 - User visits `/login` → ✅ Renders `<SignIn />` (in publicRoutes)
 - User visits `/dashboard` (protected) → Redirects to `/login?redirect=/dashboard`
 - After login → Redirects to `/dashboard`
 
 #### RouteGuard Props Reference
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `builtInAuth` | `boolean` | No | `true` | Use external auth pages (`true`) or custom pages (`false`) |
-| `publicRoutes` | `string[]` | No | `[]` | Routes accessible without authentication |
-| `paths` | `object` | No | `{ signIn: '/sign-in', ... }` | Custom auth page paths (when `builtInAuth=false`) |
-| `paths.signIn` | `string` | No | `'/sign-in'` | Custom sign-in page path |
-| `paths.signUp` | `string` | No | `'/sign-up'` | Custom sign-up page path |
-| `paths.forgotPassword` | `string` | No | `'/forgot-password'` | Custom forgot password page path |
-| `loadingFallback` | `ReactNode` | **Yes** | - | Loading UI displayed while checking authentication |
+| Prop                   | Type        | Required | Default                       | Description                                                |
+| ---------------------- | ----------- | -------- | ----------------------------- | ---------------------------------------------------------- |
+| `builtInAuth`          | `boolean`   | No       | `true`                        | Use external auth pages (`true`) or custom pages (`false`) |
+| `publicRoutes`         | `string[]`  | No       | `[]`                          | Routes accessible without authentication                   |
+| `paths`                | `object`    | No       | `{ signIn: '/sign-in', ... }` | Custom auth page paths (when `builtInAuth=false`)          |
+| `paths.signIn`         | `string`    | No       | `'/sign-in'`                  | Custom sign-in page path                                   |
+| `paths.signUp`         | `string`    | No       | `'/sign-up'`                  | Custom sign-up page path                                   |
+| `paths.forgotPassword` | `string`    | No       | `'/forgot-password'`          | Custom forgot password page path                           |
+| `loadingFallback`      | `ReactNode` | **Yes**  | -                             | Loading UI displayed while checking authentication         |
 
 **Public Routes with Wildcards:**
 
 ```tsx
 <RouteGuard
   publicRoutes={[
-    '/',           // Home page
-    '/about',      // About page
-    '/blog/*',     // All blog routes
-    '/docs/*',     // All documentation routes
+    '/', // Home page
+    '/about', // About page
+    '/blog/*', // All blog routes
+    '/docs/*', // All documentation routes
   ]}
 >
   <App />
@@ -517,8 +499,8 @@ const router = createBrowserRouter([
   { path: '/dashboard', element: <Dashboard /> },
   ...getInsforgeRoutes({
     baseUrl: import.meta.env.VITE_INSFORGE_BASE_URL,
-    builtInAuth: true
-  })
+    builtInAuth: true,
+  }),
 ]);
 
 function App() {
@@ -531,6 +513,7 @@ function App() {
 ```
 
 **Features:**
+
 - Pre-configured routes for authentication flows
 - React Router's `Link` and `useSearchParams` integration
 - Optimized navigation with client-side routing
@@ -563,6 +546,7 @@ export default function RootLayout({ children }) {
 ```
 
 **Features:**
+
 - Server-side rendering (SSR) support
 - Middleware-based route protection
 - Next.js `Link` and `useSearchParams` integration
@@ -614,7 +598,6 @@ Low-level building blocks for complete customization:
 
 ---
 
-
 ## API Reference
 
 ### InsforgeProvider
@@ -623,13 +606,13 @@ The root provider component that manages authentication state.
 
 **Props:**
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `baseUrl` | `string` | **Yes** | - | Your Insforge backend URL |
-| `afterSignInUrl` | `string` | No | `'/'` | Redirect URL after successful sign-in |
-| `onAuthChange` | `(user: InsforgeUser \| null) => void` | No | - | Callback when auth state changes |
-| `onSignIn` | `(authToken: string) => Promise<void>` | No | - | Custom handler after sign-in (e.g., cookie sync) |
-| `onSignOut` | `() => Promise<void>` | No | - | Custom handler after sign-out (e.g., clear cookies) |
+| Prop             | Type                                   | Required | Default | Description                                         |
+| ---------------- | -------------------------------------- | -------- | ------- | --------------------------------------------------- |
+| `baseUrl`        | `string`                               | **Yes**  | -       | Your Insforge backend URL                           |
+| `afterSignInUrl` | `string`                               | No       | `'/'`   | Redirect URL after successful sign-in               |
+| `onAuthChange`   | `(user: InsforgeUser \| null) => void` | No       | -       | Callback when auth state changes                    |
+| `onSignIn`       | `(authToken: string) => Promise<void>` | No       | -       | Custom handler after sign-in (e.g., cookie sync)    |
+| `onSignOut`      | `() => Promise<void>`                  | No       | -       | Custom handler after sign-out (e.g., clear cookies) |
 
 **Example:**
 
@@ -670,30 +653,30 @@ Primary hook for authentication. Both are aliases for the same hook.
   user: InsforgeUser | null;
   isLoaded: boolean;
   isSignedIn: boolean;
-  
+
   // Auth methods
   signIn: (email: string, password: string) => Promise<...>;
   signUp: (email: string, password: string) => Promise<...>;
   signOut: () => Promise<void>;
   updateUser: (data: Partial<InsforgeUser>) => Promise<...>;
   reloadAuth: () => Promise<...>;
-  
+
   // Email verification
   sendVerificationEmail: (email: string) => Promise<...>;
   verifyEmail: (otp: string, email?: string) => Promise<...>;
-  
+
   // Password reset
   sendResetPasswordEmail: (email: string) => Promise<...>;
   resetPassword: (token: string, newPassword: string) => Promise<...>;
   exchangeResetPasswordToken: (email: string, code: string) => Promise<...>;
-  
+
   // OAuth
   loginWithOAuth: (provider: OAuthProvider, redirectTo: string) => Promise<void>;
-  
+
   // Config (from provider)
   baseUrl: string;
   afterSignInUrl: string;
-  
+
   // Public config
   getPublicAuthConfig: () => Promise<...>;
 }