@authu/react

React SDK for AuthU - Centralized Multi-Tenant Authentication Service.

Installation

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

Usage

1. Configure the Provider

Wrap your app with AuthUProvider:

import {AuthUProvider} from '@authu/react';

function App() {
  return (
    <AuthUProvider
      domain="https://auth.example.com"
      clientId="your-client-id"
      redirectUri={window.location.origin + '/callback'}
    >
      <YourApp />
    </AuthUProvider>
  );
}

2. Use the Hook

Access authentication state and methods with useAuthU:

import {useAuthU} from '@authu/react';

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

  if (isLoading) return <div>Loading...</div>;

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

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

3. Protect Routes

Use PrivateRoute to protect authenticated routes. It automatically triggers the OAuth login flow when the user is not authenticated:

import {PrivateRoute} from '@authu/react';

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route
        path="/dashboard"
        element={
          <PrivateRoute>
            <Dashboard />
          </PrivateRoute>
        }
      />
    </Routes>
  );
}

PrivateRoute Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Content to render when authenticated | | fallback | ReactNode | null | Content to show while loading or redirecting | | loginOnUnauthenticated | boolean | true | Auto-trigger login when not authenticated |

Automatic Login Flow

When loginOnUnauthenticated is true (default), visiting a protected route triggers:

1. PrivateRoute checks isAuthenticated
2. If not authenticated → calls login() automatically
3. User is redirected to AuthU login page
4. After login, AuthU redirects back to the app
5. AuthUProvider exchanges the code for tokens
6. User is now authenticated and sees the protected content

This enables seamless SSO: users logged into AuthU are automatically authenticated in the app without extra clicks.

4. Get Access Token for API Calls

Use useApiToken to get tokens for authenticated API requests:

import {useApiToken} from '@authu/react';

function ApiComponent() {
  const {getToken} = useApiToken();

  const fetchData = async () => {
    const token = await getToken();
    const response = await fetch('/api/data', {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    });
    return response.json();
  };

  return <button onClick={fetchData}>Fetch Data</button>;
}

API Reference

AuthUProvider Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | domain | string | Yes | AuthU server URL | | clientId | string | Yes | OAuth2 client ID | | redirectUri | string | Yes | Callback URL after login | | scope | string | No | OAuth2 scopes (default: openid profile email) | | audience | string | No | API audience for access tokens |

useAuthU Returns

| Property | Type | Description | |----------|------|-------------| | isLoading | boolean | True while checking auth state | | isAuthenticated | boolean | True if user is logged in | | user | AuthUUser \| null | User profile info | | error | Error \| null | Auth error if any | | login(options?) | function | Redirect to login | | logout(options?) | function | Log out user | | getAccessToken() | function | Get current access token |

Development

Build

pnpm run build

Lint

pnpm run lint

Publishing

Prerequisites

• Be logged in to npm: npm login
• Have publish rights on @authu scope

Publish a New Version

1. Update version in package.json
2. Build and publish:

pnpm run build
pnpm publish --access public

The --access public flag is required for scoped packages.

Changelog

1.0.15

• Feature: Added loginOnUnauthenticated prop to PrivateRoute for automatic login triggering
• Feature: Added fallback prop to PrivateRoute for custom loading states
• Docs: Improved documentation for automatic SSO flow

1.0.10

• Fix: Changed PKCE storage from sessionStorage to localStorage to prevent state/code_verifier loss during cross-domain OAuth redirects

1.0.9

• Initial stable release

License

MIT