Skip to content

Private Route with React Router

RequireAuth can only be used with React Router v6. If you are using React Router v5, please use React-kuth-kit v1.x with PrivateRoute.

Installation

To use Private Route with React Router, you need to install the react-router plugin for react auth kit.

To install and save in your package.json dependencies, run:

Install With NPM
1
npm install --save @auth-kit/react-router
Install With Yarn
1
yarn add @auth-kit/react-router
Install With PNPM
1
pnpm install --save @auth-kit/react-router

Usage

@auth-kit/react-router comes with 2 useful functions that help to manage routing with React Router.

These Functions are:

  1. AuthOutlet - Used to Secure multiple routes at once.
  2. RequireAuth - Used to Secure individual routes one at a time, preferred for a granular approach.

AuthOutlet

Import

Import AuthOutlet
1
import AuthOutlet from '@auth-kit/react-router/AuthOutlet'

Usage

Add AuthOutlet in your Routes Files inside BrowserRouter or HashRouter

RouteComponent.jsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<BrowserRouter>
  <Routes>
    <Route path={'/'} element={<Home/>}/>
    <Route path={'/login' } element={<Login/>}/>
    <Route element={<AuthOutlet fallbackPath='/login' />}>
      <Route path='/' element={<Users/>} />
      <Route path='/products' element={<Products/>} />
    </Route>
  </Routes>
</BrowserRouter>
Full Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import AuthOutlet from '@auth-kit/react-router/AuthOutlet';
import SecureComponent from "./SecureComponent";

const Routes = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={'/'} element={<Home/>}/>
        <Route path={'/login' } element={<Login/>}/>
        <Route element={<AuthOutlet fallbackPath='/login' />}>
          <Route path='/' element={<Users/>} />
          <Route path='/products' element={<Products/>} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

RequireAuth

Import

Import RequireAuth
1
import RequireAuth from '@auth-kit/react-router/RequireAuth'

Usage

Add RequireAuth in your Routes Files inside BrowserRouter or HashRouter

RouteComponent.jsx
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<BrowserRouter>
  <Routes>
    <Route path={'/'} element={<Home/>}/>
    <Route path={'/login' } element={<Login/>}/>
    <Route path={'/secure'} element={
      <RequireAuth fallbackPath={'/login'}>
        <SecureComponent/>
          </RequireAuth>
      }
    />
  </Routes>
</BrowserRouter>
Full Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import RequireAuth from '@auth-kit/react-router/RequireAuth';
import SecureComponent from "./SecureComponent";

const Routes = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path={'/'} element={<Home/>}/>
        <Route path={'/login' } element={<Login/>}/>
        <Route path={'/secure'} element={
          <RequireAuth fallbackPath={'/login'}>
            <SecureComponent/>
          </RequireAuth>
        }
        />
      </Routes>
    </BrowserRouter>
  )
}

— 🔑 —

React Auth Kit is Apache 2.0 License code