Custom Auth Pages

1. User visits /sign-in route → Renders <SignIn> component
   ↓
2. User enters credentials → Component calls SDK methods
   ↓
3. SDK communicates with backend → Returns auth token and user data
   ↓
4. Component adds token to URL and redirects → SDK auto-detects token from URL
   ↓
5. Provider automatically updates auth state → Components re-render
   ↓
6. User sees authenticated UI at destination

import { SignIn } from '@insforge/react';

function SignInPage() {
  return (
    <SignIn
      title="Welcome Back"
      subtitle="Sign in to continue"
      onError={(error) => console.error('Error:', error)}
    />
  );
}

import { SignUp } from '@insforge/react';

function SignUpPage() {
  return (
    <SignUp
      title="Create Account"
      subtitle="Get started with your free account"
      onError={(error) => console.error('Error:', error)}
    />
  );
}

import { UserButton } from '@insforge/react';

function Header() {
  return (
    <header>
      <nav>{/* Your navigation */}</nav>
      <UserButton 
        mode="detailed" 
        afterSignOutUrl="/" 
        showProfile={true}
        onProfileError={(error) => console.error('Profile error:', error)}
      />
    </header>
  );
}

import { useState } from 'react';
import { UserProfileModal } from '@insforge/react';

function ProfileButton() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <button onClick={() => setShowModal(true)}>Edit Profile</button>
      
      {showModal && (
        <UserProfileModal
          onClose={() => setShowModal(false)}
          onError={(error) => console.error('Profile error:', error)}
        />
      )}
    </>
  );
}

import { SignInButton, SignUpButton } from '@insforge/react';

function LandingPage() {
  return (
    <div>
      {/* Default button */}
      <SignInButton />
      <SignUpButton />

      {/* Custom styled button */}
      <SignInButton>
        <button className="my-custom-button">Login</button>
      </SignInButton>
    </div>
  );
}

import { SignOutButton } from '@insforge/react';

function Header() {
  return (
    <SignOutButton afterSignOutUrl="/goodbye">
      <button className="logout-btn">Logout</button>
    </SignOutButton>
  );
}

import { ForgotPassword } from '@insforge/react';

function ForgotPasswordPage() {
  return (
    <ForgotPassword
      onError={(error) => console.error('Error:', error)}
    />
  );
}

import { ResetPassword } from '@insforge/react';

// Used at /reset-password?token=xxxxx
function ResetPasswordPage() {
  return (
    <ResetPassword
      onError={(error) => console.error('Error:', error)}
    />
  );
}

import { VerifyEmail } from '@insforge/react';

function VerifyEmailPage() {
  const token = new URLSearchParams(window.location.search).get('token');

  return (
    <VerifyEmail
      token={token || ''}
      onSuccess={(data) => {
        console.log('Email verified!', data);
        // Navigate to dashboard or close window
      }}
      onError={(error) => console.error('Verification failed:', error)}
    />
  );
}

import { Protect } from '@insforge/react';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* Simple protection */}
      <Protect redirectTo="/sign-in">
        <UserContent />
      </Protect>
      {/* Custom logic */}
      <Protect condition={(user) => user.subscription === 'premium'} fallback={<UpgradePrompt />}>
        <PremiumFeature />
      </Protect>
    </div>
  );
}

import { SignedIn, SignedOut } from '@insforge/react';

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>
  );
}

import { useAuth } from '@insforge/react';

function LoginButton() {
  const { signIn, signUp, signOut, isSignedIn, isLoaded } = useAuth();

  const handleSignIn = async () => {
    const result = await signIn('[email protected]', 'password');
    if ('error' in result) {
      console.error('Sign in failed:', result.error);
    }
  };

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <button onClick={isSignedIn ? signOut : handleSignIn}>
      {isSignedIn ? 'Sign Out' : 'Sign In'}
    </button>
  );
}

import { useInsforge } from '@insforge/react';

function CustomAuthFlow() {
  const {
    // State
    user,
    isLoaded,
    isSignedIn,
    
    // Core auth
    signIn,
    signUp,
    signOut,
    
    // User management
    updateUser,
    reloadAuth,
    
    // Email verification
    resendVerificationEmail,
    verifyEmail,
    
    // Password reset
    sendResetPasswordEmail,
    resetPassword,
    exchangeResetPasswordToken,
    
    // OAuth
    loginWithOAuth,
    
    // Config
    getPublicAuthConfig,
    baseUrl,
    afterSignInUrl,
  } = useInsforge();

  // Example: OAuth login
  const handleGoogleLogin = () => {
    loginWithOAuth('google', '/dashboard');
  };

  // Example: Send password reset email
  const handleForgotPassword = async (email: string) => {
    const result = await sendResetPasswordEmail(email);
    if (result?.message) {
      console.log('Reset email sent!');
    }
  };

  return <div>...</div>;
}

import { useUser } from '@insforge/react';

function UserProfile() {
  const { user, isLoaded, updateUser } = useUser();

  if (!isLoaded) return <div>Loading...</div>;
  if (!user) return <div>Not signed in</div>;

  const handleUpdate = async () => {
    const result = await updateUser({ name: 'New Name' });
    if (result?.error) {
      console.error('Update failed:', result.error);
    }
  };

  return (
    <div>
      <p>Email: {user.email}</p>
      <p>Name: {user.profile.name}</p>
      <img src={user.profile.avatar_url} alt="Avatar" />
      <button onClick={handleUpdate}>Update Name</button>
    </div>
  );
}

import { usePublicAuthConfig } from '@insforge/react';

function CustomSignIn() {
  const { authConfig } = usePublicAuthConfig();

  return (
    <div>
      <p>Available OAuth: {authConfig?.oAuthProviders?.join(', ')}</p>
      <p>Password min length: {authConfig?.passwordMinLength}</p>
      <p>Require uppercase: {authConfig?.requireUppercase ? 'Yes' : 'No'}</p>
    </div>
  );
}

<InsforgeProvider
  client={insforge}
  afterSignInUrl="/dashboard"
  onAuthChange={(user) => {
    if (user) {
      console.log('User signed in:', user.email);
      analytics.identify(user.id);
    } else {
      console.log('User signed out');
      analytics.reset();
    }
  }}
  onSignIn={async (authToken, user) => {
    // Sync token to cookies for SSR (Next.js)
    await fetch('/api/auth/sync', {
      method: 'POST',
      body: JSON.stringify({ token: authToken }),
    });
  }}
  onSignOut={async () => {
    // Clear server-side session
    await fetch('/api/auth/logout', { method: 'POST' });
  }}
>
  {children}
</InsforgeProvider>

<SignIn
  title="Welcome Back!"
  subtitle="We're happy to see you again"
  emailLabel="Your Email Address"
  emailPlaceholder="[email protected]"
  passwordLabel="Your Password"
  submitButtonText="Login Now"
  loadingButtonText="Signing you in..."
  signUpText="New to our platform?"
  signUpLinkText="Create an account"
  dividerText="or continue with"
/>