From 2bb646f29c8bf32ded8f0dbce555932e4499fd7c Mon Sep 17 00:00:00 2001 From: Ty Eggen Date: Thu, 26 Dec 2024 22:00:31 +0000 Subject: [PATCH] refactor(client): authentication gates --- client/src/App.jsx | 72 +++++-------------- client/src/Components/AdminElement/index.jsx | 8 ++- .../Components/AuthenticatedElement/index.jsx | 7 +- .../Components/AuthenticatedRoute/index.jsx | 14 ++-- .../AuthenticationProvider.jsx | 2 +- client/src/Pages/Dashboard/index.jsx | 9 +++ client/src/Pages/Devices/index.jsx | 7 +- client/src/Pages/Home/index.jsx | 11 ++- client/src/Pages/Logging/index.jsx | 9 +++ client/src/Pages/Login/index.jsx | 10 ++- client/src/Pages/Terminals/index.jsx | 9 +++ 11 files changed, 92 insertions(+), 66 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 49f7f83..c0b3cf3 100644 --- a/client/src/App.jsx +++ b/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 + const { isSessionLoading } = useAuthentication() return ( - - - - { - if (isAuthenticated) redirect('/dashboard') - }} - element={} - /> - { - if (!isAuthenticated) redirect('/login') - }} - element={} - /> - { - if (!isAuthenticated) redirect('/login') - }} - element={} - /> - { - if (!administrator) redirect('/dashboard') - }} - element={} - /> - { - if (!administrator) redirect('/dashboard') - }} - element={} - /> - { - if (isAuthenticated) redirect('/dashboard') - }} - element={} - /> - - - + + + + + } /> + + } /> + + } /> + } /> + } /> + } /> + + + + ) } diff --git a/client/src/Components/AdminElement/index.jsx b/client/src/Components/AdminElement/index.jsx index 6a95537..ce23e64 100644 --- a/client/src/Components/AdminElement/index.jsx +++ b/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 + + return isAuthenticated && isAdministrator ? children : null } export default AdminElement diff --git a/client/src/Components/AuthenticatedElement/index.jsx b/client/src/Components/AuthenticatedElement/index.jsx index 42a60f6..be2094e 100644 --- a/client/src/Components/AuthenticatedElement/index.jsx +++ b/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 + + return isAuthenticated ? children : null } export default AuthenticatedElement diff --git a/client/src/Components/AuthenticatedRoute/index.jsx b/client/src/Components/AuthenticatedRoute/index.jsx index d54f2cb..a6b7a51 100644 --- a/client/src/Components/AuthenticatedRoute/index.jsx +++ b/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 + + return children } export default AuthenticatedRoute AuthenticatedRoute.propTypes = { - children: PropTypes.any.isRequired + children: PropTypes.any.isRequired, + fallback: PropTypes.any.isRequired } diff --git a/client/src/Components/AuthenticationProvider/AuthenticationProvider.jsx b/client/src/Components/AuthenticationProvider/AuthenticationProvider.jsx index 2288f9c..e7cf77b 100644 --- a/client/src/Components/AuthenticationProvider/AuthenticationProvider.jsx +++ b/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 } diff --git a/client/src/Pages/Dashboard/index.jsx b/client/src/Pages/Dashboard/index.jsx index 3badba0..0b99f12 100644 --- a/client/src/Pages/Dashboard/index.jsx +++ b/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 + return ( <> diff --git a/client/src/Pages/Devices/index.jsx b/client/src/Pages/Devices/index.jsx index c766319..193e1c0 100644 --- a/client/src/Pages/Devices/index.jsx +++ b/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 const loading = user == null || isDevicesLoading || isRolesLoading diff --git a/client/src/Pages/Home/index.jsx b/client/src/Pages/Home/index.jsx index 696b9bf..c9aff12 100644 --- a/client/src/Pages/Home/index.jsx +++ b/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 -const Menu = (props) => { return ( diff --git a/client/src/Pages/Logging/index.jsx b/client/src/Pages/Logging/index.jsx index d9146c2..90f75f6 100644 --- a/client/src/Pages/Logging/index.jsx +++ b/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 + return ( <> diff --git a/client/src/Pages/Login/index.jsx b/client/src/Pages/Login/index.jsx index b59b01f..1cd51b2 100644 --- a/client/src/Pages/Login/index.jsx +++ b/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 + return ( <> diff --git a/client/src/Pages/Terminals/index.jsx b/client/src/Pages/Terminals/index.jsx index 7cbd2c7..77fafbb 100644 --- a/client/src/Pages/Terminals/index.jsx +++ b/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 + const loading = isDevicesLoading || isTerminalsLoading return (