insforge 1.2.10 → 1.4.8

package/docs/core-concepts/authentication/ui-components/react-router.mdx

@@ -1,184 +1,183 @@
----
-title: React + React Router
-description: Framework-agnostic authentication components for React + React Router application
----
-
-The `@insforge/react-router` package provides **complete authentication solution for React applications**. Use deployed auth pages (built-in auth) or custom UI components—works with Vite + React Router.
-
-## Quick Start
-
-### Step 1: Create New React Project (Required)
-
-
-```bash
-npm install react-router-dom @insforge/react-router@latest
-```
-
-### Step 2: Set Environment Variables
-
-```bash .env
-VITE_INSFORGE_BASE_URL=https://your-app.region.insforge.app
-VITE_INSFORGE_ANON_KEY=your-anon-key-here
-```
-
-### Step 3: Setup Provider
-
-Wrap your app with `InsforgeProvider` in the root:
-
-```tsx src/main.tsx
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { InsforgeProvider } from '@insforge/react-router';
-import App from './App';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <InsforgeProvider
-      baseUrl={
-        import.meta.env.VITE_INSFORGE_BASE_URL || 'https://your-app.region.insforge.app' // Replace with your InsForge backend URL
-      }
-    >
-      <App />
-    </InsforgeProvider>
-  </StrictMode>
-);
-```
-
-### Step 4: Configure Router (Built-in Auth)
-
-**The fastest way** - Use deployed auth pages with Layout pattern:
-
-```tsx src/App.tsx
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { getInsforgeRoutes } from '@insforge/react-router/router';
-import Layout from './components/Layout';
-import Home from './pages/Home';
-import Dashboard from './pages/Dashboard';
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <Layout />,
-    children: [
-      { index: true, element: <Home /> },
-      { path: 'dashboard', element: <Dashboard /> },
-    ],
-  },
-  ...getInsforgeRoutes({
-    baseUrl: import.meta.env.VITE_INSFORGE_BASE_URL || 'https://your-app.region.insforge.app', // Replace with your InsForge backend URL
-    afterSignInUrl: '/dashboard',
-  }),
-]);
-
-export default function App() {
-  return <RouterProvider router={router} />;
-}
-```
-
-```tsx src/components/Layout.tsx
-import { Outlet } from 'react-router-dom';
-
-export default function Layout() {
-  return (
-    <div>
-      <nav>{/* Your navigation */}</nav>
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}
-```
-
-**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`
-- Visiting `/forgot-password` → Redirects to `your-project.insforge.app/auth/forgot-password`
-- After auth → Backend redirects with token in URL → SDK auto-detects and stores token → Goes to dashboard
-
-<Info>
-  **Built-in auth** means using authentication pages hosted in your InsForge App. No UI code needed!
-</Info>
-
-### Step 5: Use Hooks & Components
-
-```tsx src/pages/Home.tsx
-import { SignInButton, SignedIn, SignedOut, UserButton } from '@insforge/react-router';
-
-export default function Home() {
-  return (
-    <div>
-      <SignedOut>
-        <SignInButton />
-      </SignedOut>
-
-      <SignedIn>
-        <UserButton />
-        <h1>Welcome!</h1>
-      </SignedIn>
-    </div>
-  );
-}
-```
-
-**That's it!** Your React + React Router app now has production-ready authentication with built-in auth pages.
-
-## Next Steps
-
-### Hooks
-
-#### `useAuth()`
-
-Access authentication state:
-
-```tsx
-import { useAuth } from '@insforge/react-router';
-
-function LoginButton() {
-  const { isSignedIn, isLoaded } = useAuth();
-  
-  if (!isLoaded) return <div>Loading...</div>;
-
-  return (
-    <div>
-      {isSignedIn ? 'Welcome!' : 'Sign In'}
-    </div>
-  );
-}
-```
-
-**Returns:**
-
-- `isSignedIn` - Boolean auth state
-- `isLoaded` - Boolean loading state
-
-#### `useUser()`
-
-Access current user data:
-
-```tsx
-import { useUser } from '@insforge/react-router';
-
-function UserProfile() {
-  const { user, isLoaded } = useUser();
-
-  if (!isLoaded) return <div>Loading...</div>;
-  if (!user) return <div>Not signed in</div>;
-
-
-  return (
-    <div>
-      <p>Id: {user.id}</p>
-      <p>Email: {user.email}</p>
-      <p>Name: {user.name}</p>
-      <img src={user.avatarUrl} alt="Avatar" />
-    </div>
-  );
-}
-```
-
-**Returns:**
-
-- `user` - User object with id, email, name, avatarUrl
-- `isLoaded` - Boolean loading state
+---
+title: React Router
+description: Quick authentication setup for React+Vite+React Router apps using hosted auth pages
+---
+
+The `@insforge/react-router` package provides authentication for React+Vite+React Router applications using **hosted auth pages**.
+
+When users sign in, they're redirected to your InsForge backend's login page, then returned to your app after authentication—no UI code required.
+
+<Tip>
+  Want to build custom login pages instead? See [Custom Auth
+  Pages](/core-concepts/authentication/ui-components/customization).
+</Tip>
+
+## Quick Start
+
+### Step 1: Create New React Project (Required)
+
+```bash
+npm install react-router-dom @insforge/react-router@latest
+```
+
+### Step 2: Set Environment Variables
+
+```bash .env
+VITE_INSFORGE_BASE_URL=https://your-app.region.insforge.app
+VITE_INSFORGE_ANON_KEY=your-anon-key-here
+```
+
+### Step 3: Setup Provider
+
+Wrap your app with `InsforgeProvider` in the root:
+
+```tsx src/main.tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { InsforgeProvider } from '@insforge/react-router';
+import App from './App';
+import { insforge } from './lib/insforge';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <InsforgeProvider client={insforge}>
+      <App />
+    </InsforgeProvider>
+  </StrictMode>
+);
+```
+
+### Step 4: Configure Router (Built-in Auth)
+
+**The fastest way** - Use deployed auth pages with Layout pattern:
+
+```tsx src/App.tsx
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { getInsforgeRoutes } from '@insforge/react-router/router';
+import Layout from './components/Layout';
+import Home from './pages/Home';
+import Dashboard from './pages/Dashboard';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { index: true, element: <Home /> },
+      { path: 'dashboard', element: <Dashboard /> },
+    ],
+  },
+  ...getInsforgeRoutes({
+    baseUrl: import.meta.env.VITE_INSFORGE_BASE_URL || 'https://your-app.region.insforge.app', // Replace with your InsForge backend URL
+    afterSignInUrl: '/dashboard',
+  }),
+]);
+
+export default function App() {
+  return <RouterProvider router={router} />;
+}
+```
+
+```tsx src/components/Layout.tsx
+import { Outlet } from 'react-router-dom';
+
+export default function Layout() {
+  return (
+    <div>
+      <nav>{/* Your navigation */}</nav>
+      <main>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+```
+
+**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`
+- Visiting `/forgot-password` → Redirects to `your-project.insforge.app/auth/forgot-password`
+- After auth → Backend redirects with token in URL → SDK auto-detects and stores token → Goes to dashboard
+
+<Info>
+  **Built-in auth** means using authentication pages hosted in your InsForge App. No UI code needed!
+</Info>
+
+### Step 5: Use Hooks & Components
+
+```tsx src/pages/Home.tsx
+import { SignInButton, SignedIn, SignedOut, UserButton } from '@insforge/react-router';
+
+export default function Home() {
+  return (
+    <div>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+
+      <SignedIn>
+        <UserButton />
+        <h1>Welcome!</h1>
+      </SignedIn>
+    </div>
+  );
+}
+```
+
+**That's it!** Your React + React Router app now has production-ready authentication with built-in auth pages.
+
+## Next Steps
+
+### Hooks
+
+#### `useAuth()`
+
+Access authentication state:
+
+```tsx
+import { useAuth } from '@insforge/react-router';
+
+function LoginButton() {
+  const { isSignedIn, isLoaded } = useAuth();
+
+  if (!isLoaded) return <div>Loading...</div>;
+
+  return <div>{isSignedIn ? 'Welcome!' : 'Sign In'}</div>;
+}
+```
+
+**Returns:**
+
+- `isSignedIn` - Boolean auth state
+- `isLoaded` - Boolean loading state
+
+#### `useUser()`
+
+Access current user data:
+
+```tsx
+import { useUser } from '@insforge/react-router';
+
+function UserProfile() {
+  const { user, isLoaded } = useUser();
+
+  if (!isLoaded) return <div>Loading...</div>;
+  if (!user) return <div>Not signed in</div>;
+
+  return (
+    <div>
+      <p>Id: {user.id}</p>
+      <p>Email: {user.email}</p>
+      <p>Name: {user.profile.name}</p>
+      <img src={user.profile.avatar_url} alt="Avatar" />
+    </div>
+  );
+}
+```
+
+**Returns:**
+
+- `user` - User object with id, email, profile
+- `user.profile` - User profile object with name, avatar_url, and other custom fields
+- `isLoaded` - Boolean loading state

package/docs/core-concepts/authentication/ui-components/react.mdx

@@ -1,129 +1,136 @@
----
-title: React
-description: Framework-agnostic authentication components for any React application
----
-
-The `@insforge/react` package provides **complete authentication solution for React applications**. Use deployed auth pages (built-in auth) or custom UI components—works with Vite.
-
-## Quick start
-
-### Step 1: Create New React Project (Required)
-
-```bash
-npm install @insforge/react@latest
-```
-
-### Step 2: Set Environment Variables
-
-```bash .env
-VITE_INSFORGE_BASE_URL=https://your-app.region.insforge.app
-VITE_INSFORGE_ANON_KEY=your-anon-key-here
-```
-
-### Step 3: Setup Provider
-
-Wrap your app with `InsforgeProvider` in the root:
-
-```tsx src/main.tsx
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { InsforgeProvider } from '@insforge/react';
-import App from './App';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <InsforgeProvider
-      baseUrl={
-        import.meta.env.VITE_INSFORGE_BASE_URL || 'https://your-app.region.insforge.app' // Replace with your InsForge backend URL
-      }
-    >
-      <App />
-    </InsforgeProvider>
-  </StrictMode>
-);
-```
-
-### Step 4: Use Hooks & Components
-
-```tsx src/pages/Home.tsx
-import { SignInButton, SignUpButton, SignedIn, SignedOut, UserButton, useUser } from '@insforge/react';
-
-export default function Home() {
-  const { user } = useUser();
-
-  return (
-    <div>
-      <SignedOut>
-        <SignInButton />
-        <SignUpButton />
-      </SignedOut>
-
-      <SignedIn>
-        <UserButton />
-        <h1>Welcome, {user?.email}!</h1>
-      </SignedIn>
-    </div>
-  );
-}
-```
-
-**That's it!** Your React app now has production-ready authentication with built-in auth pages.
-
-## Next Steps
-
-### Hooks
-
-#### `useAuth()`
-
-Access authentication state:
-
-```tsx
-import { useAuth } from '@insforge/react';
-
-function LoginButton() {
-  const { isSignedIn, isLoaded } = useAuth();
-  
-  if (!isLoaded) return <div>Loading...</div>;
-
-  return (
-    <div>
-      {isSignedIn ? 'Welcome!' : 'Sign In'}
-    </div>
-  );
-}
-```
-
-**Returns:**
-
-- `isSignedIn` - Boolean auth state
-- `isLoaded` - Boolean loading state
-
-#### `useUser()`
-
-Access current user data:
-
-```tsx
-import { useUser } from '@insforge/react';
-
-function UserProfile() {
-  const { user, isLoaded } = useUser();
-
-  if (!isLoaded) return <div>Loading...</div>;
-  if (!user) return <div>Not signed in</div>;
-
-
-  return (
-    <div>
-      <p>Id: {user.id}</p>
-      <p>Email: {user.email}</p>
-      <p>Name: {user.name}</p>
-      <img src={user.avatarUrl} alt="Avatar" />
-    </div>
-  );
-}
-```
-
-**Returns:**
-
-- `user` - User object with id, email, name, avatarUrl
-- `isLoaded` - Boolean loading state
+---
+title: React
+description: Quick authentication setup for React+Vite apps using hosted auth pages
+---
+
+The `@insforge/react` package provides authentication for React+Vite applications using **hosted auth pages**.
+
+When users sign in, they're redirected to your InsForge backend's login page, then returned to your app after authentication—no UI code required.
+
+<Tip>
+  Want to build custom login pages instead? See [Custom Auth
+  Pages](/core-concepts/authentication/ui-components/customization).
+</Tip>
+
+## Quick Start
+
+### Step 1: Create New React Project (Required)
+
+```bash
+npm install @insforge/react@latest
+```
+
+### Step 2: Set Environment Variables
+
+```bash .env
+VITE_INSFORGE_BASE_URL=https://your-app.region.insforge.app
+VITE_INSFORGE_ANON_KEY=your-anon-key-here
+```
+
+### Step 3: Setup Provider
+
+Wrap your app with `InsforgeProvider` in the root:
+
+```tsx src/main.tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { InsforgeProvider } from '@insforge/react';
+import { insforge } from './lib/insforge';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <InsforgeProvider client={insforge}>
+      <App />
+    </InsforgeProvider>
+  </StrictMode>
+);
+```
+
+### Step 4: Use Hooks & Components
+
+```tsx src/pages/Home.tsx
+import {
+  SignInButton,
+  SignUpButton,
+  SignedIn,
+  SignedOut,
+  UserButton,
+  useUser,
+} from '@insforge/react';
+
+export default function Home() {
+  const { user } = useUser();
+
+  return (
+    <div>
+      <SignedOut>
+        <SignInButton />
+        <SignUpButton />
+      </SignedOut>
+
+      <SignedIn>
+        <UserButton />
+        <h1>Welcome, {user?.email}!</h1>
+      </SignedIn>
+    </div>
+  );
+}
+```
+
+**That's it!** Your React app now has production-ready authentication with built-in auth pages.
+
+## Next Steps
+
+### Hooks
+
+#### `useAuth()`
+
+Access authentication state:
+
+```tsx
+import { useAuth } from '@insforge/react';
+
+function LoginButton() {
+  const { isSignedIn, isLoaded } = useAuth();
+
+  if (!isLoaded) return <div>Loading...</div>;
+
+  return <div>{isSignedIn ? 'Welcome!' : 'Sign In'}</div>;
+}
+```
+
+**Returns:**
+
+- `isSignedIn` - Boolean auth state
+- `isLoaded` - Boolean loading state
+
+#### `useUser()`
+
+Access current user data:
+
+```tsx
+import { useUser } from '@insforge/react';
+
+function UserProfile() {
+  const { user, isLoaded } = useUser();
+
+  if (!isLoaded) return <div>Loading...</div>;
+  if (!user) return <div>Not signed in</div>;
+
+  return (
+    <div>
+      <p>Id: {user.id}</p>
+      <p>Email: {user.email}</p>
+      <p>Name: {user.profile.name}</p>
+      <img src={user.profile.avatar_url} alt="Avatar" />
+    </div>
+  );
+}
+```
+
+**Returns:**
+
+- `user` - User object with id, email, profile
+- `user.profile` - User profile object with name, avatar_url, and other custom fields
+- `isLoaded` - Boolean loading state