🛡️ @durgad/protected-router (Advanced Edition)

React Protected Route toolkit with support for:

• 🔐 Auth context + JWT token checks
• 🔁 Firebase/Auth0 integration
• ⏳ Token expiration auto-logout
• ⚛️ Zustand / Redux integration (extensible)
• ✅ JavaScript/JSX & TypeScript support

Installation

npm install protected-router

Usage Example (JavaScript/JSX)

import { AuthProvider, useAuth } from 'protected-router/dist/js/core/AuthProvider';
import ProtectedRoute from 'protected-router/dist/js/components/ProtectedRoute';
import GuestRoute from 'protected-router/dist/js/components/GuestRoute';



<AuthProvider>
  <Routes>
    <Route path="/login" element={<GuestRoute><Login /></GuestRoute>} />
    <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
    <Route path="/admin" element={<RoleBasedRoute roles={['admin']}><AdminPanel /></RoleBasedRoute>} />
  </Routes>
</AuthProvider>

Usage Example (TypeScript/TSX)

import { AuthProvider, useAuth } from 'protected-router/dist/js/core/AuthProvider';
import ProtectedRoute from 'protected-router/dist/js/components/ProtectedRoute';
import GuestRoute from 'protected-router/dist/js/components/GuestRoute';

<AuthProvider>
  <Routes>
    <Route path="/login" element={<GuestRoute><Login /></GuestRoute>} />
    <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
    <Route path="/admin" element={<RoleBasedRoute roles={['admin']}><AdminPanel /></RoleBasedRoute>} />
  </Routes>
</AuthProvider>

Firebase Integration (JavaScript/JSX)

import FirebaseAuthProvider from 'protected-router/js/firebase/FirebaseProvider'

<FirebaseAuthProvider>
  <AppRoutes />
</FirebaseAuthProvider>

Firebase Integration (TypeScript/TSX)

import FirebaseAuthProvider from 'protected-router/firebase/FirebaseProvider'

<FirebaseAuthProvider>
  <AppRoutes />
</FirebaseAuthProvider>

JWT Token Handling (JavaScript/JSX)

import { isTokenExpired } from 'protected-router/js_src/core/TokenUtils'

const expired = isTokenExpired(user.token)

JWT Token Handling (TypeScript/TSX)

import { isTokenExpired } from 'protected-router'

const expired = isTokenExpired(user.token)

Built by Durga Nayak • MIT License