How to Structure a Protected Admin Dashboard with React 19 and Firebase

Abdullah Wajid — Tue, 22 Sep 2026 07:59:43 +0000

How to Structure a Protected Admin Dashboard with React 19 and Firebase
Building a quiz or assessment application is usually a fun front-end challenge until you hit the inevitable wall: the backend plumbing.
Suddenly, you aren't just mapping over questions in a JSON file anymore. You have to set up user authentication, manage secure database schemas, and—most frustratingly—build a protected Admin Dashboard so non-technical users can add or edit questions without touching the database directly.

After building this exact architecture multiple times, I wanted to share the logic behind securing admin routes using React 19 and Firebase, and how you can skip the setup entirely.

The Core Problem: Role-Based Routing
In a standard React app, anyone can type /admin into the URL bar. The goal is to intercept that request, check if the user is authenticated via Firebase, and verify if their UID has admin privileges before rendering the page.

The Solution: A Protected Route Wrapper
The cleanest way to handle this in modern React (using React Router) is by creating a ProtectedRoute wrapper component. Instead of checking authentication inside every single admin page, you wrap your sensitive routes at the top level.

Here is a simplified look at how the logic flows:

JavaScript

import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './AuthContext'; // Your Firebase Auth Hook

const ProtectedAdminRoute = () => {
  const { currentUser, isAdmin, loading } = useAuth();

  if (loading) return <div>Loading secure dashboard...</div>;

  // If they aren't logged in, send them to login
  if (!currentUser) return <Navigate to="/login" replace />;

  // If they are logged in but lack admin rights, send them to the home page
  if (!isAdmin) return <Navigate to="/" replace />;

  // If they pass both checks, render the Admin Dashboard
  return <Outlet />;
};

export default ProtectedAdminRoute;

You then wrap your admin routes in your main App.jsx like this:

JavaScript

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/quiz" element={<Quiz /> } />

  {/* Protected Admin Routes */}
  <Route element={<ProtectedAdminRoute />}>
    <Route path="/admin/dashboard" element={<AdminDashboard />} />
    <Route path="/admin/add-question" element={<AddQuestion />} />
  </Route>
</Routes>

The Ultimate Shortcut: Skip the Setup
Writing the routing wrapper is just step one. You still have to build the UI for the dashboard, wire up Firebase Firestore rules so users can't read the answers before taking the quiz, and build the actual quiz state logic.

If you are a freelancer building an EdTech tool for a client, or a developer looking to launch a SaaS, spending 15+ hours writing boilerplate auth and admin code is a massive waste of time.

To solve this, I packaged my complete, production-ready architecture into a single boilerplate.

The React + Firebase Quiz & Assessment Boilerplate includes:

Fully Functional Admin Panel: Add, edit, and manage categories and questions visually.

Firebase Authentication: Pre-configured email/password flow.

User History: Automatically saves user scores and quiz performance.

Modern UI: Styled with Tailwind CSS v4 and powered by Vite & React 19.

🔗 Check out the Live Interactive Demo here:
https://abdullahwajid-sudo.github.io/QuizApp/#/

You can test the entire flow (including the Admin dashboard) directly in your browser.

If you want to save yourself days of development time, you can grab the full source code on my Gumroad here.

Stop rebuilding the same authentication and admin panels from scratch. Grab the boilerplate, plug in your Firebase keys, and launch your app today!

DEV Community: Abdullah Wajid

How to Structure a Protected Admin Dashboard with React 19 and Firebase