React authentication package for Master Auth system
npm install @master-auth/reactReact authentication package for Master Auth system - a secure, password-based authentication solution.
``bash`
npm install @master-auth/react
`jsx
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { MasterAuthProvider, ProtectedRoute, AuthCallback } from '@master-auth/react';
function App() {
return (
element={
}
/>
);
}
`
The root provider component that wraps your application and provides authentication context.
Props:
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| applicationId | string | Yes | Your Master Auth application ID |children
| | ReactNode | Yes | Your application components |
Example:
`jsx`
A wrapper component that protects routes requiring authentication. Automatically redirects to login if user is not authenticated.
Props:
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| children | ReactNode | Yes | Components to render when authenticated |loadingComponent
| | ReactNode | No | Custom loading component (default: centered "Loading...") |fallback
| | ReactNode | No | Component to show before redirect when not authenticated |
Example:
`jsx`
fallback={Redirecting to login...}
>
Behavior:
- Checks for local authentication credentials
- Validates token with backend
- Shows loading state during validation
- Redirects to Master Auth login if invalid/missing credentials
- Renders children when authenticated
Handles the OAuth callback from Master Auth login. Place this component at your callback route.
Props:
| Prop | Type | Required | Description |
|------|------|----------|-------------|
| onSuccess | (path: string) => void | No | Custom success handler (default: navigates to /dashboard) |onError
| | () => void | No | Custom error handler (default: redirects to login after 2s) |loadingComponent
| | ReactNode | No | Custom loading component (default: centered "Authenticating...") |
Example:
`jsx`
console.log('Login successful!');
navigate(path);
}}
onError={() => {
console.error('Login failed');
navigate('/');
}}
loadingComponent={
/>
Behavior:
- Extracts authentication parameters from URL (token, salt, sessionId, expiresIn)onSuccess
- Saves credentials to localStorage
- Validates token with backend
- Calls or navigates to /dashboard on successonError
- Calls or redirects to login on failure
Hook to access authentication state and methods.
Returns:
`typescript`
{
isAuthenticated: boolean;
logout: () => void;
user?: any;
}
Example:
`jsx
import { useAuth } from '@master-auth/react';
function Profile() {
const { isAuthenticated, logout, user } = useAuth();
return (
Welcome back!
Please log in
Environment Variables
Your application needs to know its Master Auth application ID. Set it in your environment:
For Vite:
env
VITE_APPLICATION_ID=your-app-id
`Then use it in your app:
jsx
`For Create React App:
env
REACT_APP_APPLICATION_ID=your-app-id
`jsx
`Complete Example
Here's a complete example with routing, protected pages, and authentication:
jsx
// App.jsx
import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { MasterAuthProvider, ProtectedRoute, AuthCallback, useAuth } from '@master-auth/react';// Public landing page
function LandingPage() {
return (
Welcome to My App
Please log in to continue
);
}// Protected dashboard
function Dashboard() {
const { logout, user } = useAuth();
return (
Dashboard
You are logged in!
);
}// Custom loading component
function LoadingSpinner() {
return (
Loading...
);
}function App() {
return (
{/ Public routes /}
{/ Auth callback route /}
element={
onSuccess={(path) => {
console.log('Authentication successful');
}}
/>
}
/>
{/ Protected routes /}
element={
}
/>
{/ Catch all redirect /}
);
}
export default App;
`How It Works
1. Setup: Wrap your app with
and provide your application ID
2. Login Flow: User clicks login → redirected to Master Auth → authenticates → redirected back to your /auth/callback route
3. Callback: processes the authentication, saves credentials, and redirects to dashboard
4. Protected Routes: validates credentials and grants access to authenticated users
5. State Management: Use useAuth() hook to access authentication state anywhere in your appTypeScript Support
This package includes TypeScript definitions. All components and hooks are fully typed.
`typescript
import type {
MasterAuthConfig,
AuthCredentials,
ValidationResponse,
AuthContextValue
} from '@master-auth/react';
``ISC