NCL-8952 Refactor the auth service to use manual init

src/AppLayout.tsx

@@ -56,7 +56,7 @@ import pncLogoText from './pnc-logo-text.svg';
 export const AppLayout = () => {
   const webConfig = webConfigService.getWebConfig();
 
-  const [user, setUser] = useState(keycloakService.isKeycloakAvailable ? keycloakService.getUser() : null);
+  const [user, setUser] = useState(keycloakService.isKeycloakAvailable() ? keycloakService.getUser() : null);
 
   const serviceContainerPncStatus = useServiceContainer(genericSettingsApi.getPncStatus);
   const serviceContainerPncStatusRunner = serviceContainerPncStatus.run;
@@ -247,14 +247,14 @@ export const AppLayout = () => {
                   isExpanded={isHeaderUserOpen}
                   onClick={() => setIsHeaderUserOpen((isHeaderUserOpen) => !isHeaderUserOpen)}
                 >
-                  {keycloakService.isKeycloakAvailable ? <>{user ? user : 'Not logged in'}</> : <>KEYCLOAK UNAVAILABLE</>}
+                  {keycloakService.isKeycloakAvailable() ? <>{user ? user : 'Not logged in'}</> : <>KEYCLOAK UNAVAILABLE</>}
                 </MenuToggle>
               )}
               isOpen={isHeaderUserOpen}
               onOpenChange={(isOpen: boolean) => setIsHeaderUserOpen(isOpen)}
             >
               <DropdownList>
-                {keycloakService.isKeycloakAvailable ? headerUserDropdownItems : headerKeycloakUnavailableDropdownItems}
+                {keycloakService.isKeycloakAvailable() ? headerUserDropdownItems : headerKeycloakUnavailableDropdownItems}
               </DropdownList>
             </Dropdown>
           </ToolbarItem>

src/components/KeycloakStatusPage/KeycloakStatusPage.tsx

@@ -47,7 +47,7 @@ export const KeycloakStatusPage = ({ errorPageTitle }: IKeycloakStatusPageProps)
     </>
   );
 
-  if (!keycloakService.isKeycloakAvailable) {
+  if (!keycloakService.isKeycloakAvailable()) {
     return errorPageTitle ? (
       // Error page - requested page (for example projects/create) could not be displayed due to Keycloak
       <ErrorPage

src/components/ProtectedContent/ProtectedContent.tsx

@@ -44,7 +44,7 @@ export const ProtectedContent = ({
   }
 
   // Error state - Keycloak service not available
-  if (!keycloakService.isKeycloakAvailable) {
+  if (!keycloakService.isKeycloakAvailable()) {
     const reason = 'Keycloak service is not available.';
     switch (type) {
       case PROTECTED_TYPE.Route:

src/index.tsx

@@ -18,10 +18,12 @@ import { AppRoutes } from './AppRoutes';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
 
-const router = createBrowserRouter(createRoutesFromElements(AppRoutes), { basename: URL_BASE_PATH });
-
 legacyUrlRedirector();
 
+keycloakService.init();
+
+const router = createBrowserRouter(createRoutesFromElements(AppRoutes), { basename: URL_BASE_PATH });
+
 const App = () => {
   const [isKeycloakInitiated, setIsKeycloakInitiated] = useState<boolean>(false);
   const [isKeycloakInitFail, setIsKeycloakInitFail] = useState<boolean>(false);

src/services/__mocks__/keycloakService.ts

@@ -5,53 +5,55 @@ export enum AUTH_ROLE {
   Power = 'power-user',
 }
 
-class KeycloakServiceMock {
-  private initialized: boolean = false;
-  private user: any;
-  private isLogin: boolean = false;
-  private roles: String[] = ['Admin'];
+const createKeycloakServiceMock = () => {
+  const initialized: boolean = false;
+  let user: any;
+  let isLogin: boolean = false;
+  const roles: String[] = ['Admin'];
 
-  constructor() {
-    this.initialized = true;
-  }
+  const isKeycloakAvailable = (): boolean => {
+    return initialized;
+  };
 
-  public isInitialized(): Promise<any> {
+  const isInitialized = (): Promise<any> => {
     return new Promise<any>((resolve) => {
-      resolve(this.initialized);
+      resolve(initialized);
     });
-  }
+  };
 
-  public isAuthenticated(): boolean {
-    return this.isLogin;
-  }
+  const isAuthenticated = (): boolean => {
+    return isLogin;
+  };
 
-  public login(user: String): Promise<any> {
-    this.user = user;
-    this.isLogin = true;
+  const login = (userNew: String): Promise<any> => {
+    user = userNew;
+    isLogin = true;
     return new Promise<any>((resolve) => {
       resolve(true);
     });
-  }
+  };
 
-  public logout(): void {
-    this.isLogin = false;
-    this.user = undefined;
-  }
+  const logout = (): void => {
+    isLogin = false;
+    user = undefined;
+  };
 
-  public getToken(): String {
+  const getToken = (): String => {
     return 'example_token';
-  }
+  };
 
-  public getUser(): String {
-    return this.user;
-  }
+  const getUser = (): String => {
+    return user;
+  };
 
-  public hasRealmRole(role: String): boolean {
-    if (this.roles.includes(role)) {
+  const hasRealmRole = (role: String): boolean => {
+    if (roles.includes(role)) {
       return true;
     }
     return false;
-  }
-}
+  };
+
+  return { isKeycloakAvailable, isInitialized, isAuthenticated, login, logout, getToken, getUser, hasRealmRole };
+};
 
-export const keycloakService = new KeycloakServiceMock();
+export const keycloakService = createKeycloakServiceMock();