@auth-kit/react-router

@auth-kit/react-router

https://authkit.arkadip.dev 🚀

🔑 This library is a part of the `react-auth-kit` ecosystem. 🔑

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

— 🔑 —

React Auth Kit is MIT License code