@qobo/admin-auth

Shared admin authentication components and utilities for all Qobo-generated projects. Protects admin routes with centralized OTP-based authentication.

Installation

npm install @qobo/admin-auth

Usage

1. Install and Initialize in App.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:

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)

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