React Guide

React Protected Routes

Protect React routes with GitHat authentication. Client-side route guards, loading states, and automatic redirects for unauthenticated users.

ProtectedRoute Component

Use ProtectedRoute to guard dashboard pages, settings, and any authenticated content. It handles loading states and redirects automatically.

React Router Integration

Define your React Router routes normally, then wrap private routes in ProtectedRoute. The redirect preserves the attempted URL so users return after sign-in.

Custom Fallback UI

ProtectedRoute accepts a fallback prop rendered during auth checking. Default is null (blank screen). Pass a loading component for better UX.

Install

import { ProtectedRoute } from '@githat/nextjs';

Example

// Protected route setup with React Router
import { ProtectedRoute } from '@githat/nextjs';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/sign-in" element={<SignIn />} />
        <Route path="/sign-up" element={<SignUp />} />
        <Route path="/dashboard" element={
          <ProtectedRoute fallback={<p>Loading...</p>}>
            <Dashboard />
          </ProtectedRoute>
        } />
      </Routes>
    </BrowserRouter>
  );
}
Try GitHat free

Ship authenticated apps in minutes, not weeks.

Related