Skip to main content
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.
Want to build custom login pages instead? See Custom Auth Pages.

​
Quick Start

​
Step 1: Create New React Project (Required)

npm install react-router-dom @insforge/react-router@latest

​
Step 2: Set Environment Variables

.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:
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:
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} />;
}
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
Built-in auth means using authentication pages hosted in your InsForge App. No UI code needed!

​
Step 5: Use Hooks & Components

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: 
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: 
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