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/central-auth@1.1.0-alpha.4 - React 19
- @hudoro/central-auth@1.1.0-alpha.7 - React 18

Installation

``bash
npm install @hudoro/central-auth


or

yarn add @hudoro/central-auth

or

pnpm install @hudoro/central-auth

`

Setup

$3

`ts
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 (



);
}
`

$3

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




`

Usage

$3

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

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

return (



);
}
`

$3

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

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

`ts
// 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

$3

- Root auth context
- Route guard

$3

useAuth() - Access auth state/actions

useAuthInstance() - Initialize for non-React usage

$3

getAuthInstance() - Get auth methods outside components

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

API Reference

$3

#### 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 |

#### 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` |