React SDK

npm install @bastionauth/react
# or
pnpm add @bastionauth/react
# or
yarn add @bastionauth/react

import { BastionProvider } from '@bastionauth/react';
 
function App() {
  return (
    <BastionProvider
      publishableKey="pk_live_..."
      apiUrl="https://auth-api.yourdomain.com"
    >
      <YourApp />
    </BastionProvider>
  );
}

import { SignIn } from '@bastionauth/react';
 
function SignInPage() {
  return (
    <SignIn
      signUpUrl="/sign-up"
      afterSignInUrl="/dashboard"
      providers={['google', 'github']}
    />
  );
}

import { SignUp } from '@bastionauth/react';
 
function SignUpPage() {
  return (
    <SignUp
      signInUrl="/sign-in"
      afterSignUpUrl="/onboarding"
    />
  );
}

import { UserButton } from '@bastionauth/react';
 
function Header() {
  return (
    <header>
      <nav>
        <UserButton afterSignOutUrl="/" />
      </nav>
    </header>
  );
}

import { ProtectedRoute } from '@bastionauth/react';
 
function Dashboard() {
  return (
    <ProtectedRoute fallback={<SignIn />}>
      <DashboardContent />
    </ProtectedRoute>
  );
}

import { useAuth } from '@bastionauth/react';
 
function Profile() {
  const { 
    isSignedIn, 
    isLoading, 
    user, 
    signOut,
    getToken 
  } = useAuth();
 
  if (isLoading) return <Spinner />;
  if (!isSignedIn) return <SignIn />;
 
  return (
    <div>
      <p>Welcome, {user.email}</p>
      <button onClick={signOut}>Sign Out</button>
    </div>
  );
}

import { useUser } from '@bastionauth/react';
 
function Settings() {
  const { user, updateUser, isLoading } = useUser();
 
  const handleUpdate = async () => {
    await updateUser({
      firstName: 'New Name',
    });
  };
 
  return (
    <form onSubmit={handleUpdate}>
      <input defaultValue={user?.firstName} />
      <button disabled={isLoading}>Save</button>
    </form>
  );
}

import { useOrganization } from '@bastionauth/react';
 
function OrgSettings() {
  const { 
    organization, 
    membership, 
    isAdmin 
  } = useOrganization();
 
  return (
    <div>
      <h1>{organization?.name}</h1>
      <p>Role: {membership?.role}</p>
      {isAdmin && <AdminPanel />}
    </div>
  );
}

:root {
  --bastion-primary: #00F0FF;
  --bastion-background: #0A0E14;
  --bastion-text: #F8FAFC;
  --bastion-border: rgba(255, 255, 255, 0.1);
}

<SignIn
  appearance={{
    accentColor: '#7C3AED',
  }}
/>