@identia/auth-react

React components and hooks for Identia authentication. Drop-in login page, auth guards, passkey management, and self-service registration — built on @identia/auth-core.

Installation

npm install @identia/auth-react @identia/auth-core

Quick Start

import { IdentiaAuthProvider, LoginPage, AuthGuard } from '@identia/auth-react';

function App() {
  return (
    <IdentiaAuthProvider
      domain="your-tenant.accessiq.app"
      clientId="your-client-id"
      redirectUri={window.location.origin + '/callback'}
    >
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route path="/callback" element={<AuthCallback />} />
        <Route
          path="/dashboard"
          element={
            <AuthGuard fallback={<Navigate to="/login" />}>
              <Dashboard />
            </AuthGuard>
          }
        />
      </Routes>
    </IdentiaAuthProvider>
  );
}

Features

| Feature | Description | |---------|-------------| | IdentiaAuthProvider | Context provider that initializes auth-core and manages auth state | | LoginPage | Pre-built login page with email, OAuth, and passkey support | | AuthGuard | Protect routes — renders children only when authenticated | | useAuth | Hook for login, logout, tokens, and auth state | | useUser | Hook for current user profile | | Passkeys | usePasskeys hook + PasskeyButton component for WebAuthn flows | | Request Access | RequestAccessForm for self-service user and API registration |

Components

LoginPage

Renders a complete login page with all login methods enabled for the tenant:

import { LoginPage } from '@identia/auth-react';

<LoginPage
  onSuccess={(user) => navigate('/dashboard')}
  onError={(err) => console.error(err)}
  logo={<img src="/logo.svg" />}           // optional
  title="Welcome back"                     // optional
/>

AuthGuard

import { AuthGuard } from '@identia/auth-react';

<AuthGuard
  fallback={<Navigate to="/login" />}      // shown when not authenticated
  loading={<Spinner />}                    // shown while checking auth state
>
  <ProtectedContent />
</AuthGuard>

AuthCallback

Handles the OAuth redirect callback:

import { AuthCallback } from '@identia/auth-react';

<AuthCallback
  onSuccess={() => navigate('/dashboard')}
  onError={(err) => navigate('/login')}
/>

EmailLoginForm

Standalone email/password form:

import { EmailLoginForm } from '@identia/auth-react';

<EmailLoginForm onSuccess={(user) => navigate('/dashboard')} />

UserMenu

Dropdown menu showing user info with logout:

import { UserMenu } from '@identia/auth-react';

<UserMenu onLogout={() => navigate('/login')} />

RequestAccessForm

Self-service registration and access request form:

import { RequestAccessForm } from '@identia/auth-react';

<RequestAccessForm
  domain="tenant.accessiq.app"
  tabs={['user', 'api-vendor', 'punchout']}   // which tabs to show
  onSuccess={(result) => showConfirmation()}
/>

Hooks

useAuth

import { useAuth } from '@identia/auth-react';

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

  if (isLoading) return <Spinner />;
  if (!isAuthenticated) return <button onClick={login}>Log in</button>;

  return <p>Hello, {user.name}</p>;
}

useUser

import { useUser } from '@identia/auth-react';

const { user, isLoading } = useUser();
// user: { sub, email, name, picture, ... }

usePermissions

import { usePermissions } from '@identia/auth-react';

const { hasPermission } = usePermissions();
if (hasPermission('orders:edit')) { /* ... */ }

useLoginOptions

import { useLoginOptions } from '@identia/auth-react';

const { options, isLoading } = useLoginOptions();
// options: { email: true, google: true, passkeys: { enabled: true }, ... }

usePasskeys

import { usePasskeys } from '@identia/auth-react';

const { passkeys, register, remove, isLoading } = usePasskeys();

Related Packages

| Package | Description | |---------|-------------| | @identia/auth-core | Framework-agnostic auth engine (used internally) | | @identia/sdk | TypeScript SDK for permissions, feature flags, and entitlements | | @identia/react | React bindings for the SDK (feature flags, permissions, guards) |

License

MIT