@auth-kit/react-router v3.1.3

This library contains useful functions to manage private routes using react-router or react-router-dom*.

Usage

AuthOutlet

AuthOutlet provides an easy solution using react-router or react-router-dom to manage private-route.

Routes inside the AuthOutlet will stay protected and only properly authenticated users can access the route.

If the user is not authenticated then the user will be redirected to the fallbackPath.

Example

import AuthOutlet from '@auth-kit/react-router/AuthOutlet';

function App() {
 return (
   <Router>
     <Routes>
       <Route element={<AuthOutlet fallbackPath='/login' />}>
         <Route path='/' element={<Users/>} />
         <Route path='/products' element={<Products/>} />
       </Route>
       <Route path='/login' element={<Login/>}/>
     </Routes>
   </Router>
 );
}

RequireAuth

RequireAuth provides a per route base private route solution to implement a private route solution.

Component inside the RequireAuth will stay protected and only properly authenticated users can access the route.

If the user is not authenticated then the user will be redirected to the fallbackPath.

Example

import RequireAuth from '@auth-kit/react-router/RequireAuth';

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

Reference

Reference