[Fix #305] Fixed app crashing when using internal auth

src/App.tsx

@@ -8,8 +8,7 @@ import { ConfirmDialogProvider } from "@hooks/useConfirmDialog";
 import { ENVVariable, SELECTED_LANGUAGE_KEY, PRIMARY_LANGUAGE } from "@utils/constants";
 import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
-import { isUsingOidcAuth } from "@utils/OidcUtils";
-import OidcAuthWrapper from "@oidc/OidcAuthWrapper";
+import { InternalUserProvider } from "@hooks/useInternalLoggedUser";
 
 declare module "@mui/material/styles" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -35,13 +34,15 @@ const App = () => {
   return (
     <Suspense fallback="...loading">
       <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={appTheme}>
-          <SnackbarProvider>
-            <ConfirmDialogProvider>
-              <AppRoutes />
-            </ConfirmDialogProvider>
-          </SnackbarProvider>
-        </ThemeProvider>
+        <InternalUserProvider>
+          <ThemeProvider theme={appTheme}>
+            <SnackbarProvider>
+              <ConfirmDialogProvider>
+                <AppRoutes />
+              </ConfirmDialogProvider>
+            </SnackbarProvider>
+          </ThemeProvider>
+        </InternalUserProvider>
       </StyledEngineProvider>
     </Suspense>
   );

src/components/Logout.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { useContext, useEffect } from "react";
 import { User } from "@models/userModel";
-import { useLoggedUser } from "@hooks/useLoggedUser";
+import { useInternalLoggedUser } from "@hooks/useInternalLoggedUser";
 import { isUsingOidcAuth } from "@utils/OidcUtils";
 import { AuthContext } from "@oidc/OidcAuthWrapper";
 
 const Logout = () => {
-  const [_, setLoggedUser] = useLoggedUser();
+  const [_, setLoggedUser] = useInternalLoggedUser();
   const authCtx = useContext(AuthContext);
   useEffect(() => {
     if (isUsingOidcAuth()) {

src/components/appBar/AppBar.tsx

@@ -18,7 +18,7 @@ import {
 import { FormEvent, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import ChangePasswordDialog from "@components/dialog/password/ChangePasswordDialog";
-import { getLoggedUser, useLoggedUser } from "@hooks/useLoggedUser";
+import { getLoggedUser, useInternalLoggedUser } from "@hooks/useInternalLoggedUser";
 import { ROUTES } from "@utils/constants";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { useTranslation } from "react-i18next";
@@ -35,7 +35,7 @@ interface Props {
 }
 
 const AppBar = ({ title, showBackButton = false, topPanelHeight }: Props) => {
-  const [loggedUser] = useLoggedUser();
+  const [loggedUser] = useInternalLoggedUser();
   const { classes } = useStyles();
   const history = useNavigate();
   const { i18n, t } = useTranslation();

src/components/login/Login.tsx

@@ -6,7 +6,7 @@ import { useState } from "react";
 import useStyles from "@components/login/Login.styles";
 import * as userService from "@services/userService";
 import { Link as RouterLink } from "react-router-dom";
-import { useLoggedUser } from "@hooks/useLoggedUser";
+import { useInternalLoggedUser } from "@hooks/useInternalLoggedUser";
 import { useForm } from "react-hook-form";
 import { schema } from "@components/login/Login.schema";
 import { SnackbarType, useSnackbar } from "@hooks/useSnackbar";
@@ -16,7 +16,7 @@ import { ENVVariable, ROUTES } from "@utils/constants";
 const Login = () => {
   const { classes } = useStyles();
 
-  const [_, setLoggedUser] = useLoggedUser();
+  const [_, setLoggedUser] = useInternalLoggedUser();
   const [showSnackbar] = useSnackbar();
 
   const {

src/components/routes/AdminRoute.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Route } from "react-router-dom";
 import * as React from "react";
-import { useLoggedUser } from "@hooks/useLoggedUser";
+import { useInternalLoggedUser } from "@hooks/useInternalLoggedUser";
 import { ROUTES } from "@utils/constants";
 
 // TODO: Fix temporary hack to support react-router v6
@@ -17,7 +17,7 @@ const Element = ({ component: Component, loggedUser, ...props }) => {
 };
 
 const AdminRoute = ({ children }) => {
-  const [loggedUser] = useLoggedUser();
+  const [loggedUser] = useInternalLoggedUser();
 
   if (!loggedUser && loggedUser.authenticated && loggedUser.roles.indexOf("ROLE_ADMIN") >= 0) {
     return <Navigate to={ROUTES.LOGIN} />;

src/components/routes/AppRoutes.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
+import { BrowserRouter, Route } from "react-router-dom";
+import { createHashHistory } from "history";
+import { ROUTE_PARAMS, ROUTES, ENVVariable } from "@utils/constants";
 import Login from "@components/login/Login";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Logout from "@components/Logout";
 import Register from "@components/register/Register";
-import { createHashHistory } from "history";
-import { LoggedUserProvider } from "@hooks/useLoggedUser";
-import { ROUTE_PARAMS, ROUTES, ENVVariable } from "@utils/constants";
 import FaultTreeDashboard from "@components/dashboard/FaultTreeDashboard";
 import SystemDashboard from "@components/dashboard/SystemDashboard";
 import FailureModesTableDashboard from "@components/dashboard/FailureModesTableDashboard";
@@ -91,39 +90,39 @@ const AppRoutes = () => {
           </PublicRoute>
         );
       default:
-        return <PrivateRoute>{element}</PrivateRoute>;
+        return (
+          <Navigation>
+            <PrivateRoute>{element}</PrivateRoute>
+          </Navigation>
+        );
     }
   };
 
   return (
-    <LoggedUserProvider>
-      <BrowserRouter basename={ENVVariable.BASENAME} /*history={appHistory}*/>
-        <Routes>
-          <Route path={ROUTES.OIDC_SIGNIN_CALLBACK} element={<OidcSignInCallback />} />
-          <Route path={ROUTES.OIDC_SILENT_CALLBACK} element={<OidcSilentCallback />} />
+    <BrowserRouter basename={ENVVariable.BASENAME} /*history={appHistory}*/>
+      <Routes>
+        <Route path={ROUTES.OIDC_SIGNIN_CALLBACK} element={<OidcSignInCallback />} />
+        <Route path={ROUTES.OIDC_SILENT_CALLBACK} element={<OidcSilentCallback />} />
 
-          {routes.map((r) => {
-            if (isUsingOidcAuth()) {
-              return (
-                <Route
-                  key={r.path}
-                  path={r.path}
-                  element={
-                    <OidcAuthWrapper>
-                      <Navigation>{r.element}</Navigation>
-                    </OidcAuthWrapper>
-                  }
-                />
-              );
-            } else {
-              return (
-                <Route key={r.path} path={r.path} element={<Navigation>{getElement(r.path, r.element)}</Navigation>} />
-              );
-            }
-          })}
-        </Routes>
-      </BrowserRouter>
-    </LoggedUserProvider>
+        {routes.map((r) => {
+          if (isUsingOidcAuth()) {
+            return (
+              <Route
+                key={r.path}
+                path={r.path}
+                element={
+                  <OidcAuthWrapper>
+                    <Navigation>{r.element}</Navigation>
+                  </OidcAuthWrapper>
+                }
+              />
+            );
+          } else {
+            return <Route key={r.path} path={r.path} element={getElement(r.path, r.element)} />;
+          }
+        })}
+      </Routes>
+    </BrowserRouter>
   );
 };
 

src/components/routes/PrivateRoute.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Route } from "react-router-dom";
 import * as React from "react";
-import { useLoggedUser } from "@hooks/useLoggedUser";
+import { useInternalLoggedUser } from "@hooks/useInternalLoggedUser";
 import { ROUTES } from "@utils/constants";
 
 // TODO: Fix temporary hack to support react-router v6
@@ -9,7 +9,7 @@ const Element = ({ component: Component, loggedUser, ...props }) => {
 };
 
 const PrivateRoute = ({ children, ...rest }) => {
-  const [loggedUser] = useLoggedUser();
+  const [loggedUser] = useInternalLoggedUser();
 
   console.log("Private route");
 

src/components/routes/PublicRoute.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Route } from "react-router-dom";
 import * as React from "react";
-import { useLoggedUser } from "@hooks/useLoggedUser";
+import { useInternalLoggedUser } from "@hooks/useInternalLoggedUser";
 import { ROUTES } from "@utils/constants";
 
 // TODO: Fix temporary hack to support react-router v6
@@ -17,7 +17,7 @@ const Element = ({ component: Component, loggedUser, restricted, ...props }) =>
 };
 
 const PublicRoute = ({ children, restricted, ...rest }) => {
-  const [loggedUser] = useLoggedUser();
+  const [loggedUser] = useInternalLoggedUser();
 
   console.log("Public route");
 

src/hooks/useLoggedUser.tsx → src/hooks/useInternalLoggedUser.tsx

@@ -8,7 +8,7 @@ type userContextType = [User, (user: User) => void];
 
 export const loggedUserContext = createContext<userContextType>(null!);
 
-export const useLoggedUser = () => {
+export const useInternalLoggedUser = () => {
   const [loggedUser, setLoggedUser] = useContext(loggedUserContext);
   return [loggedUser, setLoggedUser] as const;
 };
@@ -26,7 +26,7 @@ export const getLoggedUser = (): User => {
   return JSON.parse(item);
 };
 
-export const LoggedUserProvider = ({ children }: ChildrenProps) => {
+export const InternalUserProvider = ({ children }: ChildrenProps) => {
   const [_user, _setLoggedUser] = useState<User>(getLoggedUser());
 
   const setLoggedUser = async (user: User) => {

src/hooks/useUserAuth.tsx

@@ -1,14 +1,14 @@
 import { useContext } from "react";
 import { AuthContext } from "@oidc/OidcAuthWrapper";
-import { useLoggedUser } from "@hooks/useLoggedUser";
+import { useInternalLoggedUser } from "@hooks/useInternalLoggedUser";
 import { isUsingOidcAuth } from "@utils/OidcUtils";
 
 export const useUserAuth = () => {
   const oidcAuthContext = useContext(AuthContext);
-  const [loggedUser] = useLoggedUser();
+  const [loggedUser] = useInternalLoggedUser();
 
   if (isUsingOidcAuth()) {
     return oidcAuthContext.user !== null;
   }
-  return loggedUser.authenticated;
+  return loggedUser;
 };

src/services/utils/authUtils.tsx

@@ -1,4 +1,4 @@
-import { getLoggedUser } from "@hooks/useLoggedUser";
+import { getLoggedUser } from "@hooks/useInternalLoggedUser";
 
 export const authHeaders = () => {
   return {