@authu/react

@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:

• PrivateRoute checks isAuthenticated
• If not authenticated → calls login() automatically
• User is redirected to AuthU login page
• After login, AuthU redirects back to the app
• AuthUProvider exchanges the code for tokens
• 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

• Update version in package.json
• 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