npm package: @qobo/admin-auth
Description: Shared admin authentication components and utilities for Qobo-generated projects
Author: Qobo
Latest version: 1.0.6

# @qobo/admin-auth

Shared admin authentication components and utilities for all Qobo-generated projects. Protects admin routes with centralized OTP-based authentication.

## Installation

```bash
npm install @qobo/admin-auth
```

## Usage

### 1. Install and Initialize in App.jsx

```jsx
import { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AdminProtectedRoute, initializeAdminAuthFromUrl } from '@qobo/admin-auth';

export default function App() {
  // Initialize admin auth from URL parameters early (for cross-domain redirects)
  useEffect(() => {
    initializeAdminAuthFromUrl();
  }, []);

  return (
    <BrowserRouter>
      <Routes>
        {/* Public routes */}
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />

        {/* Protected admin routes */}
        <Route path="/admin/*" element={
          <AdminProtectedRoute>
            <AdminLayout />
          </AdminProtectedRoute>
        } />
      </Routes>
    </BrowserRouter>
  );
}
```

### 2. Wrap Admin Routes

All admin routes should be wrapped with `AdminProtectedRoute`:

```jsx
import { AdminProtectedRoute } from '@qobo/admin-auth';

// Option 1: Wrap entire admin section
<Route path="/admin/*" element={
  <AdminProtectedRoute>
    <AdminLayout />
  </AdminProtectedRoute>
} />

// Option 2: Wrap individual routes (not recommended, use Option 1)
<Route path="/admin" element={
  <AdminProtectedRoute>
    <AdminDashboard />
  </AdminProtectedRoute>
} />
```

### 3. Use Auth Utilities (Optional)

```jsx
import { 
  isAdminAuthenticated, 
  logoutAdmin, 
  authenticatedApiCall 
} from '@qobo/admin-auth';

// Check authentication status
if (isAdminAuthenticated()) {
  console.log('User is authenticated');
}

// Logout admin
<button onClick={logoutAdmin}>Logout</button>

// Make authenticated API calls
const response = await authenticatedApiCall('/api/v1/admin/data', {
  method: 'GET'
});
```

## Features

- **Automatic Redirect**: Unauthenticated users are automatically redirected to `https://platform.qobo.dev/login`
- **Cross-Domain Support**: Handles authentication tokens passed via URL parameters for cross-domain redirects
- **Token Management**: Automatically manages JWT tokens in localStorage
- **Token Validation**: Validates JWT tokens and checks expiration
- **Loading State**: Shows loading indicator during redirect

## Authentication Flow

1. User tries to access `/admin/*` route without authentication
2. `AdminProtectedRoute` checks authentication status
3. If not authenticated, redirects to `https://platform.qobo.dev/login?redirect=[currentUrl]`
4. User logs in using OTP on platform login page
5. After successful login, user is redirected back to their website with `?admin_token=...&project_id=...`
6. `initializeAdminAuthFromUrl()` extracts token from URL and stores in localStorage
7. User can now access admin routes

## Environment Variables

No environment variables required. The package uses:
- `localStorage` for token storage
- `https://platform.qobo.dev/login` for centralized login

## License

MIT