Skip to main content
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)

npm install @insforge/react@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';
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

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