React SDK

The @auditauth/react package provides a React-specific integration layer for AuditAuth.

It builds on top of the Web SDK and offers:

• A top-level provider
• A React hook
• A route guard component
• Authenticated fetch integration
• Navigation tracking support

Authentication remains centralized in AuditAuth.

The React SDK provides identity state management for client-rendered React applications.

Installation

Install the package:

npm install @auditauth/react

@auditauth/react requires:

• react 18+
• react-dom 18+

Wrap Your Application

Create a single top-level provider.

import { AuditAuthProvider } from '@auditauth/react'
 
export function AppRoot() {
  return (
    <AuditAuthProvider
      config={{
        apiKey: import.meta.env.VITE_AUDITAUTH_API_KEY,
        appId: import.meta.env.VITE_AUDITAUTH_APP_ID,
        baseUrl: 'http://localhost:5173',
        redirectUrl: 'http://localhost:5173/private'
      }}
    >
      <App />
    </AuditAuthProvider>
  )
}

The provider:

• Handles redirect callbacks automatically
• Initializes session state
• Exposes authentication state via context

Protect Private UI

Use RequireAuth to guard private sections.

import { RequireAuth } from '@auditauth/react'
 
export function PrivatePage() {
  return (
    <RequireAuth>
      <h1>Private area</h1>
    </RequireAuth>
  )
}

RequireAuth renders children only when:

• The SDK is ready
• A valid session exists

If not authenticated, it triggers the login flow.

Access Auth State in Components

Use useAuditAuth() within provider scope.

import { useAuditAuth } from '@auditauth/react'
 
export function AccountMenu() {
  const { user, ready, login, logout, goToPortal } = useAuditAuth()
 
  if (!ready) return null
 
  if (!user) {
    return <button onClick={() => login()}>Login</button>
  }
 
  return (
    <div>
      <span>{user.email}</span>
      <button onClick={() => goToPortal()}>Portal</button>
      <button onClick={() => logout()}>Logout</button>
    </div>
  )
}

useAuditAuth() exposes identity state and session actions.

Make Authenticated API Calls

Use the provided fetch wrapper:

import { useAuditAuth } from '@auditauth/react'
 
export function ProfileButton() {
  const { fetch } = useAuditAuth()
 
  const loadProfile = async () => {
    const response = await fetch(
      'https://api.example.com/private/profile'
    )
    const data = await response.json()
    console.log(data)
  }
 
  return <button onClick={loadProfile}>Load profile</button>
}

The SDK:

• Attaches the access token
• Handles refresh automatically
• Tracks request metrics

Track Navigation Metrics

If using a client router, track route changes.

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useAuditAuth } from '@auditauth/react'
 
export function NavigationTracker() {
  const { pathname } = useLocation()
  const { trackNavigationPath } = useAuditAuth()
 
  useEffect(() => {
    trackNavigationPath(pathname)
  }, [pathname, trackNavigationPath])
 
  return null
}

Navigation telemetry becomes identity-aware and session-correlated.

API Surface

useAuditAuth() returns:

• ready: boolean
• user: SessionUser | null
• fetch(input, init?): Promise<Response>
• login(): Promise<void>
• logout(): Promise<void>
• goToPortal(): Promise<void>
• isAuthenticated(): boolean
• trackNavigationPath(path: string): void

Exports from @auditauth/react:

• AuditAuthProvider
• useAuditAuth
• RequireAuth

When to Use the React SDK

Use @auditauth/react when:

• Building React applications
• Using client-side routing
• Managing UI-level identity state
• You do not control a backend enforcement layer

If your architecture supports server-side enforcement, prefer the Next.js integration model.