legacy-auth-hooks

This package provides custom React hooks to facilitate application authorization.

The AuthProvider element sets up a context where all routes have access to authentication information.

The useLocalStorage hook is used to leverage local storage in the browser to allow the authentication token to survive past a page reload.

The ProtectedRoute element is used to wrap a page route to check for authorization.

The following is an example of setting up application routes leveraging these hooks and elements.

import React from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { AuthProvider, ProtectedRoute } from '@naiveroboticist/legacy-auth-hooks'

import Layout from './Layout'
import Home from './pages/Home'
import NoPage from './pages/NoPage'
import { LoginPageWrapper } from './pages/LoginPageWrapper'
import { SecurePage } from './pages/SecurePage'

function AppRoutes(props) {

  const { helpBaseUrl } = props

  return (
    <BrowserRouter>
      <AuthProvider>
        <Routes>
          <Route path='/' element={<Layout helpBaseUrl={helpBaseUrl} />}> 
            <Route index element={<ProtectedRoute><Home /></ProtectedRoute>} />
            <Route path='/login' element={<LoginPageWrapper />} />
            <Route path='/secure_page' element={<ProtectedRoute><SecurePage /></ProtectedRoute>} />
            <Route path="*" element={<NoPage />} />
          </Route>
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  )
}

export default AppRoutes

See the legacy-auth-web repository for tools to help with login pages and authentication menus.