fallback screen if backend container is unavailable (does not resolve…

… if the frontend is down so this is only a partial resolution)

frontend/src/providers/Auth.tsx

@@ -7,6 +7,9 @@ import { useEffect, useState } from 'react';
 
 export const AuthProvider = ({ children }: { children: ReactElement }) => {
   const [keycloakInfo, setKeycloakInfo] = useState<Keycloak>();
+
+  const [error, setError] = useState(false);  
+
   useEffect(() => {
     (async () => {
       try {
@@ -21,26 +24,31 @@ export const AuthProvider = ({ children }: { children: ReactElement }) => {
       } catch (e: unknown) {
         // TODO: Need to handle this better if the auth provider is the 'root' component
         // handleError({ status: 500, message: 'Error getting keycloak info' });
-      }
+        setError(true);
+      } 
     })();
   }, []);
 
+
+
+  if(error ) {
+    return <PublicLayout><div className="h-3/4 pt-40 lg:pt-16  sm:px-8 md:px-12  lg:px-0 2xl:px-64">
+    <div className="flex gap-12 flex-col items-center justify-center text-center lg:py-24 lg:px-16 2xl:px-64">
+      <h2>Error: 500</h2><p>We are currently experiencing technical difficulties.</p></div></div></PublicLayout>  
+  }
+
   return (
     <>
-      {keycloakInfo ? (
-        <ReactKeycloakProvider
+
+      {keycloakInfo &&  <ReactKeycloakProvider
           authClient={keycloakInfo}
           autoRefreshToken={true}
           initOptions={{ pkceMethod: 'S256', checkLoginIframe: false }}
           LoadingComponent={<Loading />}
         >
           {children}
-        </ReactKeycloakProvider>
-      ) : (
-        <PublicLayout><div className="h-3/4 pt-40 lg:pt-16  sm:px-8 md:px-12  lg:px-0 2xl:px-64">
-        <div className="flex gap-12 flex-col items-center justify-center text-center lg:py-24 lg:px-16 2xl:px-64">
-          <h2>Error: 500</h2><p>We are currently experiencing technical difficulties.</p></div></div></PublicLayout>  
-      )}
+        </ReactKeycloakProvider>}
+
     </>
   );
 };