@bulwark/react

React hooks and components for Bulwark authentication.

Installation

npm install @bulwark/react

Setup

Wrap your app with BulwarkProvider:

import { BulwarkProvider } from "@bulwark/react";

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <BulwarkProvider
      tenantId={process.env.NEXT_PUBLIC_BULWARK_TENANT_ID!}
      baseUrl="https://api.bulwarkauth.io"
    >
      {children}
    </BulwarkProvider>
  );
}

Hooks

useAuth

import { useAuth } from "@bulwark/react";

function Profile() {
  const { user, isLoading, isAuthenticated, login, logout } = useAuth();

  if (isLoading) return <div>Loading...</div>;
  if (!isAuthenticated) return <button onClick={() => login()}>Sign In</button>;

  return (
    <div>
      <p>Welcome, {user.name}</p>
      <button onClick={logout}>Sign Out</button>
    </div>
  );
}

useSession

import { useSession } from "@bulwark/react";

function AgentPanel() {
  const { session, createSession, completeSession } = useSession();

  const handleStart = async () => {
    await createSession({
      agentId: "agent_01j...",
      requestedScopes: ["read:data"],
    });
  };

  return (
    <div>
      {session ? (
        <button onClick={completeSession}>Stop Agent</button>
      ) : (
        <button onClick={handleStart}>Start Agent</button>
      )}
    </div>
  );
}

useUser

import { useUser } from "@bulwark/react";

function UserBadge() {
  const { user, isLoading } = useUser();

  if (isLoading) return null;
  return <span>{user?.email}</span>;
}

Components

<LoginButton>

import { LoginButton } from "@bulwark/react";

<LoginButton
  redirectTo="/dashboard"
  className="btn btn-primary"
>
  Sign In
</LoginButton>

<LogoutButton>

import { LogoutButton } from "@bulwark/react";

<LogoutButton redirectTo="/" />

<AuthGuard>

import { AuthGuard } from "@bulwark/react";

<AuthGuard fallback={<LoginButton />}>
  <ProtectedContent />
</AuthGuard>

API Reference

BulwarkProvider Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | tenantId | string | Yes | Your Bulwark tenant ID | | baseUrl | string | No | API base URL | | onSessionExpired | () => void | No | Called when session expires |