Hudoro Central Auth

A comprehensive authentication library for React applications with centralized login support, token management, and route protection.

React Version

This package is compatible with React 18 and above.

• @hudoro/[email protected] - React 19
• @hudoro/[email protected] - React 18

Installation

npm install @hudoro/central-auth
# or
yarn add @hudoro/central-auth
# or
pnpm install @hudoro/central-auth

Setup

Wrap your application with AuthProvider

import { AuthProvider, AuthConfig } from '@hudoro/central-auth';

const config: AuthConfig  = {
  appKey: 'your-app-key',
  redirectUrl: 'https://login.yourdomain.com',
  storageKey: 'optional-storage-auth-key',
};

function App() {
  return (
    <AuthProvider config={config}>
      <YourApp />
    </AuthProvider>
  );
}

Wrap your component with Private Route

import { PrivateRoute } from '@hudoro/central-auth';

<PrivateRoute>
  <Dashboard />
</PrivateRoute>

Usage

Auth Hook in Components

import { useAuth } from '@hudoro/cental-auth';

function Dashboard() {
  const { isAuthenticated, logout } = useAuth();

  return (
    <div>
      {isAuthenticated ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <p>Please login</p>
      )}
    </div>
  );
}

Auth Instance (for non component usage)

// Initialize once in your app root
import { useAuthInstance } from '@hudoro/central-auth';

function RootComponent() {
  useAuthInstance(); // Initialize for non-component usage
  return <App />;
}

// Then anywhere else:
import { getAuthInstance } from "@hudoro/central-auth";
const token = await getAuthInstance().getAccessToken();

| Feature | useAuth | getAuthInstance | | ----------------- | --------------------- | --------------------- | | Usage | Only in components | Anywhere | | React Requirement | Must be in React tree | Not required | | Initialization | Automatic | Requires manual setup | | Type Safety | ✅ Full | ✅ Full | | Example Use Case | UI Components | Services, utilities |

Core API

Components

<AuthProvider> - Root auth context
<PrivateRoute> - Route guard

Hooks

useAuth() - Access auth state/actions

useAuthInstance() - Initialize for non-React usage

Utilities

getAuthInstance() - Get auth methods outside components

getAccessToken() - Get current token (auto-refreshes if expired not yet available)

API Reference

<AuthProvider/>

The root provider component.

| Prop | Type | Required | Default | Description | | ---------------- | --------------------------- | -------- | ------- | ------------------------------------------ | | config | AuthConfig | Yes | - | Configuration object | | onLoginSuccess | (data: AuthModel) => void | No | - | Callback on successful login | | onLoginError | (error: string) => void | No | - | Callback on login error | | onLogout | () => void | No | - | Callback on logout | | lazy | boolean | No | false | When true, disables auto-redirect to login |

<PrivateRoute/>

Route private component.

| Prop | Type | Default | Description | | ------------------------- | ----------- | ------- | ------------------------------------------ | | children | ReactNode | - | Content to private | | loadingFallback | ReactNode | null | Shown during auth initialization | | unauthenticatedFallback | ReactNode | null | Shown when user is unauthenticated | | initializationDelay | number | 50 | Delay to wait for auth initialization (ms) |

AuthProvider Config

AuthConfig

| Key | Required | Description | Default Value | | ------------- | -------- | -------------------------------- | --------------- | | appKey | Yes | Your application identifier | - | | redirectUrl | Yes | Centralized login page URL | - | | storageKey | No | Custom storage key for auth data | config.appKey |