Fixing login error handling and logout flow

deployment/helm-chart/values.yaml

@@ -7,4 +7,3 @@ appVersion: 1.0.0
 imageRegistry: "iad.ocir.io/cesdev"
 imagePullSecret: ocirsecret
 host: "customercentral-poc.oracle.com"
-pathPrefix: "/occ/ui/"

src/components/app.tsx

@@ -16,30 +16,30 @@ type Props = Readonly<{
 
 const AppComponent: FunctionComponent<Props> = ({ appName = "OCC" }) => {
   const { userLogin, login, logout, accessToken } = useLogin();
-  const {result: plugins} = useQuery<Plugin[]>("/plugins", accessToken);
-  const {result: navigations} = useQuery<NavigationItem[]>("/navigations", accessToken);
+  const { result: plugins } = useQuery<Plugin[]>("/plugins", accessToken);
+  const { result: navigations } = useQuery<NavigationItem[]>("/navigations", accessToken);
 
   useEffect(() => {
     Context.getPageContext().getBusyContext().applicationBootstrapComplete();
   }, []);
 
   return (
-      <div id="appContainer" class="oj-web-applayout-page">
-        <Header
-          appName={appName}
-          userLogin={userLogin}
-          login={login}
-          logout={logout}
-          navigations={navigations}
-          plugins={plugins}
-        />
-        <Content userLogin={userLogin} plugins={plugins} />
-        <Footer />
-      </div>
+    <div id="appContainer" class="oj-web-applayout-page">
+      <Header
+        appName={appName}
+        userLogin={userLogin}
+        login={login}
+        logout={logout}
+        navigations={navigations}
+        plugins={plugins}
+      />
+      <Content userLogin={userLogin} plugins={plugins} />
+      <Footer />
+    </div>
   );
 };
 
-  export const App = registerCustomElement(
-    "app-root",
-    AppComponent
-  );
+export const App = registerCustomElement(
+  "app-root",
+  AppComponent
+);

src/hooks/useLogin.tsx

@@ -10,9 +10,7 @@ const parseJwt = token => {
   return JSON.parse(jsonPayload);
 };
 
-// const idcsStripe = "https://idcs-25070016ce0c4eb8b6eea18f07fe170d.identity.oraclecloud.com";
 const idcsStripe = "https://idcs-login-stage.identity.oraclecloud.com";
-// const clientId = "4e728d65cf5b482ea81e56bf23a9ad8a";
 const clientId = "754db2d1964d4f12ab312a2ab6f025ed";
 
 const login = () => {
@@ -29,21 +27,8 @@ const login = () => {
 };
 
 const logout = (token: string) => () => {
-  // fetch(
-  //   `https://idcs-25070016ce0c4eb8b6eea18f07fe170d.identity.oraclecloud.com/oauth2/v1/userlogout?post_logout_redirect_uri=${encodeURIComponent(window.location.origin)}&id_token_hint=${token}`,
-  //   // `https://idcs-25070016ce0c4eb8b6eea18f07fe170d.identity.oraclecloud.com/sso/v1/user/logout?post_logout_redirect_uri=${encodeURIComponent(window.location.origin)}&id_token_hint=${token}`,
-  //   // `https://idcs-25070016ce0c4eb8b6eea18f07fe170d.identity.oraclecloud.com/oauth2/v1/userlogout?id_token_hint=${token}`,
-  //   // `${idcsStripe}/oauth2/v1/userlogout`,
-  //   {
-  //     headers: {
-  //       "Content-Type": "application/scim+json",
-  //       // Authorization: `Bearer ${accessToken}`
-  //       // Authorization: "Basic NGU3MjhkNjVjZjViNDgyZWE4MWU1NmJmMjNhOWFkOGE6ZGM1NDdkYmUtOGQ0Yi00MTU1LWEzNzgtZjNhMDNkNTZhNjU0"
-  //     }
-  //   }
-  // );
-  window.location.href = `${idcsStripe}/sso/v1/user/logout`;
   sessionStorage.removeItem("oauth");
+  window.location.href = `${idcsStripe}/oauth2/v1/userlogout?id_token_hint=${token}&post_logout_redirect_uri=${encodeURIComponent(window.location.origin + "/")}`;
 }
 
 export const useLogin = () => {
@@ -53,7 +38,7 @@ export const useLogin = () => {
 
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search);
-    const { state, nonce, at, it } = JSON.parse(sessionStorage.getItem("oauth") || "{}");
+    const { state, nonce, at, it, exp } = JSON.parse(sessionStorage.getItem("oauth") || "{}");
     if (searchParams.has("code") && searchParams.has("state")) {
       const receivedState = searchParams.get("state");
       if (receivedState !== state) {
@@ -68,19 +53,27 @@ export const useLogin = () => {
         }),
         body: JSON.stringify({ code, nonce })
       })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error("Login failed");
+          }
+          return response;
+        })
         .then(response => response.json())
         .then(body => {
           const idToken = parseJwt(body.idToken);
           setUserLogin(idToken.user_displayname);
           setIdToken(body.idToken);
           setAccessToken(body.accessToken);
-          sessionStorage.setItem("oauth", JSON.stringify({ at: body.accessToken, it: body.idToken }));
-          console.log("Tokens:", { idToken, accessToken: parseJwt(body.accessToken) })
+          sessionStorage.setItem("oauth", JSON.stringify({ at: body.accessToken, it: body.idToken, exp: body.expiresAt }));
         })
-      // .finally(() => sessionStorage.removeItem("oauth"));
+        .catch(err => {
+          console.error(err);
+          sessionStorage.removeItem("oauth");
+        });
       // Clear the search parameter from the url
       window.history.pushState({}, document.title, window.location.pathname);
-    } else if (at && it) {
+    } else if (at && it && new Date().valueOf() < Date.parse(exp).valueOf()) {
       setAccessToken(at);
       setIdToken(it);
       const idToken = parseJwt(it);