refactor(client): authentication gates

client/src/App.jsx

@@ -1,7 +1,7 @@
 import 'bootstrap/dist/css/bootstrap.min.css'
 
 import { Container } from 'react-bootstrap'
-import { BrowserRouter, redirect, Route, Routes } from 'react-router'
+import { BrowserRouter, Route, Routes } from 'react-router'
 import { ToastContainer } from 'react-toastify'
 
 import { useAuthentication } from './Components/AuthenticationProvider/AuthenticationHook.jsx'
@@ -20,62 +20,26 @@ import './App.css'
 const log = new CustomLogger('tacos:app')
 
 const App = (props) => {
-    const { administrator, isAuthenticated, isSessionLoading } =
-        useAuthentication()
-
-    if (isSessionLoading) return <Loading />
+    const { isSessionLoading } = useAuthentication()
 
     return (
         <BrowserRouter>
-            <Container>
-                <Menu />
-                <Routes>
-                    <Route
-                        index
-                        loader={() => {
-                            if (isAuthenticated) redirect('/dashboard')
-                        }}
-                        element={<Home />}
-                    />
-                    <Route
-                        path='/dashboard'
-                        exact
-                        loader={() => {
-                            if (!isAuthenticated) redirect('/login')
-                        }}
-                        element={<Dashboard />}
-                    />
-                    <Route
-                        path='/devices'
-                        loader={() => {
-                            if (!isAuthenticated) redirect('/login')
-                        }}
-                        element={<Devices />}
-                    />
-                    <Route
-                        path='/terminals'
-                        loader={() => {
-                            if (!administrator) redirect('/dashboard')
-                        }}
-                        element={<Terminals />}
-                    />
-                    <Route
-                        path='/logging'
-                        loader={() => {
-                            if (!administrator) redirect('/dashboard')
-                        }}
-                        element={<Logging />}
-                    />
-                    <Route
-                        path='/login'
-                        loader={() => {
-                            if (isAuthenticated) redirect('/dashboard')
-                        }}
-                        element={<Login />}
-                    />
-                </Routes>
-                <ToastContainer />
-            </Container>
+            <Loading loading={isSessionLoading}>
+                <Container>
+                    <Menu />
+                    <Routes>
+                        <Route index element={<Home />} />
+
+                        <Route path='/dashboard' element={<Dashboard />} />
+
+                        <Route path='/devices' element={<Devices />} />
+                        <Route path='/terminals' element={<Terminals />} />
+                        <Route path='/logging' element={<Logging />} />
+                        <Route path='/login' element={<Login />} />
+                    </Routes>
+                </Container>
+            </Loading>
+            <ToastContainer />
         </BrowserRouter>
     )
 }

client/src/Components/AdminElement/index.jsx

@@ -4,13 +4,17 @@ import PropTypes from 'prop-types'
 
 import CustomLogger from '../../lib/custom-logger'
 import { useAuthentication } from '../AuthenticationProvider/AuthenticationHook.jsx'
+import LoadingElement from '../LoadingElement/LoadingElement.jsx'
 
 const log = new CustomLogger('tacos:Components:AdminElement')
 
 const AdminElement = ({ children }) => {
-    const { isAdmin } = useAuthentication()
+    const { isAdministrator, isAuthenticated, isSessionLoading } =
+        useAuthentication()
 
-    return <>{isAdmin ? children : null}</>
+    if (isSessionLoading) return <LoadingElement />
+
+    return isAuthenticated && isAdministrator ? children : null
 }
 
 export default AdminElement

client/src/Components/AuthenticatedElement/index.jsx

@@ -1,11 +1,14 @@
 import PropTypes from 'prop-types'
 
 import { useAuthentication } from '../AuthenticationProvider/AuthenticationHook.jsx'
+import LoadingElement from '../LoadingElement/LoadingElement.jsx'
 
 const AuthenticatedElement = ({ children }) => {
-    const { isAuthenticated } = useAuthentication()
+    const { isAuthenticated, isSessionLoading } = useAuthentication()
 
-    return <>{isAuthenticated ? children : null}</>
+    if (isSessionLoading) return <LoadingElement />
+
+    return isAuthenticated ? children : null
 }
 
 export default AuthenticatedElement

client/src/Components/AuthenticatedRoute/index.jsx

@@ -1,15 +1,21 @@
 import PropTypes from 'prop-types'
+import { Navigate } from 'react-router'
 
 import { useAuthentication } from '../AuthenticationProvider/AuthenticationHook.jsx'
 
-const AuthenticatedRoute = ({ children }) => {
-    const { isAuthenticated } = useAuthentication()
+const AuthenticatedRoute = ({ children, fallback }) => {
+    const { isAuthenticated, isSessionLoading } = useAuthentication()
 
-    return isAuthenticated ? children : null
+    if (isSessionLoading) return null
+
+    if (!isAuthenticated) return <Navigate to={fallback ?? '/login'} />
+
+    return children
 }
 
 export default AuthenticatedRoute
 
 AuthenticatedRoute.propTypes = {
-    children: PropTypes.any.isRequired
+    children: PropTypes.any.isRequired,
+    fallback: PropTypes.any.isRequired
 }

client/src/Components/AuthenticationProvider/AuthenticationProvider.jsx

@@ -16,7 +16,7 @@ export const AuthenticationProvider = ({ children }) => {
         return {
             user: data?.user,
             isAuthenticated: data?.user?.authenticated ?? false,
-            isAdmin: data?.user?.administrator ?? false,
+            isAdministrator: data?.user?.administrator ?? false,
             isSessionLoading: isLoading,
             mutateSession: mutate
         }

client/src/Pages/Dashboard/index.jsx

@@ -1,6 +1,15 @@
 import { Col, Row } from 'react-bootstrap'
+import { Navigate } from 'react-router'
+
+import { useAuthentication } from '../../Components/AuthenticationProvider/AuthenticationHook.jsx'
 
 const Dashboard = () => {
+    const { isAuthenticated, isSessionLoading } = useAuthentication()
+
+    if (isSessionLoading) return null
+
+    if (!isAuthenticated) return <Navigate to='/' />
+
     return (
         <>
             <Row>

client/src/Pages/Devices/index.jsx

@@ -1,4 +1,5 @@
 import { Col, Row } from 'react-bootstrap'
+import { Navigate } from 'react-router'
 
 import { useAuthentication } from '../../Components/AuthenticationProvider/AuthenticationHook.jsx'
 import DeviceCard from '../../Components/DeviceCard/index.jsx'
@@ -13,7 +14,11 @@ const Devices = () => {
     const { devices, hasDevices, isDevicesLoading } = useDevices()
     const { isRolesLoading } = useRoles()
 
-    const { user } = useAuthentication()
+    const { user, isAuthenticated, isSessionLoading } = useAuthentication()
+
+    if (isSessionLoading) return null
+
+    if (!isAuthenticated) return <Navigate to='/' />
 
     const loading = user == null || isDevicesLoading || isRolesLoading
 

client/src/Pages/Home/index.jsx

@@ -1,6 +1,15 @@
 import { Col, Row } from 'react-bootstrap'
+import { Navigate } from 'react-router'
+
+import { useAuthentication } from '../../Components/AuthenticationProvider/AuthenticationHook.jsx'
+
+const Menu = () => {
+    const { isAuthenticated, isSessionLoading } = useAuthentication()
+
+    if (isSessionLoading) return null
+
+    if (isAuthenticated) return <Navigate to='/dashboard' />
 
-const Menu = (props) => {
     return (
         <Row>
             <Col>

client/src/Pages/Logging/index.jsx

@@ -1,5 +1,7 @@
 import { Col, Row } from 'react-bootstrap'
+import { Navigate } from 'react-router'
 
+import { useAuthentication } from '../../Components/AuthenticationProvider/AuthenticationHook.jsx'
 import LogLine from '../../Components/LogLine/index.jsx'
 import { useLogging } from '../../hooks/useLogging.jsx'
 import CustomLogger from '../../lib/custom-logger'
@@ -9,6 +11,13 @@ const log = new CustomLogger('tacos:Pages:Logging')
 const Logging = (props) => {
     const { hasLogs, logs } = useLogging()
 
+    const { isAdministrator, isAuthenticated, isSessionLoading } =
+        useAuthentication()
+
+    if (isSessionLoading) return null
+
+    if (!isAuthenticated && !isAdministrator) return <Navigate to='/' />
+
     return (
         <>
             <Row>

client/src/Pages/Login/index.jsx

@@ -3,10 +3,18 @@ import { faGoogle } from '@fortawesome/free-brands-svg-icons/faGoogle'
 import { faSlackHash } from '@fortawesome/free-brands-svg-icons/faSlackHash'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Button, Col, Row } from 'react-bootstrap'
-
+import { Navigate } from 'react-router'
 import './style.css'
 
+import { useAuthentication } from '../../Components/AuthenticationProvider/AuthenticationHook.jsx'
+
 const Login = (props) => {
+    const { isAuthenticated, isSessionLoading } = useAuthentication()
+
+    if (isSessionLoading) return null
+
+    if (isAuthenticated) return <Navigate to='/' />
+
     return (
         <>
             <Row className='spacious'>

client/src/Pages/Terminals/index.jsx

@@ -1,5 +1,7 @@
 import { Col, Row } from 'react-bootstrap'
+import { Navigate } from 'react-router'
 
+import { useAuthentication } from '../../Components/AuthenticationProvider/AuthenticationHook.jsx'
 import Conditional from '../../Components/Conditional/Conditional.jsx'
 import LoadingElement from '../../Components/LoadingElement/LoadingElement.jsx'
 import TerminalCard from '../../Components/TerminalCard/index.jsx'
@@ -15,6 +17,13 @@ const Terminals = (props) => {
     const { isDevicesLoading } = useDevices()
     const { terminals, hasTerminals, isTerminalsLoading } = useTerminals()
 
+    const { isAdministrator, isAuthenticated, isSessionLoading } =
+        useAuthentication()
+
+    if (isSessionLoading) return null
+
+    if (!isAuthenticated && !isAdministrator) return <Navigate to='/' />
+
     const loading = isDevicesLoading || isTerminalsLoading
 
     return (