@hudoro/central-auth NPM

Hudoro Central Auth

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

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)