Get OIDC access tokens once the authentication redirect is successful

dashboard/src/App.js

@@ -28,17 +28,6 @@ import { showToast } from "actions/toastActions";
 import { useDispatch, useSelector } from "react-redux";
 import { ReactKeycloakProvider } from "@react-keycloak/web";
 
-const eventLogger = (event, error) => {
-  // Placeholder to perform logging action upon certain Keycloak events.
-  // Keycloak events are described under
-  // https://www.keycloak.org/docs/latest/securing_apps/#javascript-adapter-reference
-};
-
-const tokenLogger = (tokens) => {
-  // Placeholder for to perform action when new token is generated
-  // console.log('onKeycloakTokens', tokens["refreshToken"]);
-};
-
 const ProtectedRoute = ({ redirectPath = APP_ROUTES.AUTH, children }) => {
   const loggedIn = Cookies.get("isLoggedIn");
   const dispatch = useDispatch();
@@ -70,8 +59,6 @@ const App = () => {
       {keycloak && (
         <ReactKeycloakProvider
           authClient={keycloak}
-          onEvent={eventLogger}
-          onTokens={tokenLogger}
           initOptions={{
             onLoad: "check-sso",
             checkLoginIframe: true,

dashboard/src/actions/authActions.js

@@ -6,16 +6,16 @@ import Cookies from "js-cookie";
 import { SUCCESS } from "assets/constants/overviewConstants";
 import { showToast } from "actions/toastActions";
 
+const maxWait = 50000; // Milliseconds
 /**
- * Timer to check if the endpoints are loaded.
+ * Wait for the Pbench Server endpoints to be loaded.
  * @param {getState} getState object.
  * @return {promise} promise object
  */
-export function waitForKeycloak(getState) {
+export function waitForEndpoints(getState) {
   const waitStart = Date.now();
-  const maxWait = 50000; // Milliseconds
   /**
-   * Loop to check if the endpoints are loaded.
+   * Settle the wait-for-endpoints promise.
    * @param {resolve} resolve object.
    * @param {reject} reject object
    */
@@ -28,16 +28,17 @@ export function waitForKeycloak(getState) {
       setTimeout(check, 250, resolve, reject);
     }
   }
-  return new Promise((resolve, reject) => {
-    check(resolve, reject);
-  });
+  return new Promise((resolve, reject) => check(resolve, reject));
 }
 
 // Perform some house keeping when the user logs in
 export const authCookies = () => async (dispatch, getState) => {
-  await waitForKeycloak(getState);
+  await waitForEndpoints(getState);
   const keycloak = getState().apiEndpoint.keycloak;
   if (keycloak.authenticated) {
+    // Set the isLoggedIn cookie with an expiry of OIDC refresh token.
+    // We have to convert the UNIX epoch seconds returned by the refresh token
+    // expiry to milliseconds before we can use it for creating a Date object.
     Cookies.set("isLoggedIn", true, {
       expires: new Date(keycloak.refreshTokenParsed.exp * 1000),
     });
@@ -54,16 +55,17 @@ export const movePage = (toPage, navigate) => async (dispatch) => {
   navigate(toPage);
 };
 
-export const logout = () => async (dispatch, getState) => {
+export const clearCachedSession = () => async (dispatch, getState) => {
   dispatch({ type: TYPES.LOADING });
-  const keycloak = getState().apiEndpoint.keycloak;
-  const keys = ["username", "isLoggedIn"];
-  for (const key of keys) {
-    Cookies.remove(key);
-  }
-  keycloak.logout();
+  Cookies.remove("isLoggedIn");
   dispatch({ type: TYPES.COMPLETED });
   setTimeout(() => {
     window.location.href = APP_ROUTES.AUTH;
   }, CONSTANTS.LOGOUT_DELAY_MS);
 };
+
+export const sessionLogout = () => async (dispatch, getState) => {
+  const keycloak = getState().apiEndpoint.keycloak;
+  keycloak.logout();
+  dispatch(clearCachedSession());
+};

dashboard/src/actions/endpointAction.js

@@ -14,9 +14,9 @@ export const fetchEndpoints = async (dispatch) => {
       payload: data,
     });
     const keycloak = new Keycloak({
-      url: data?.openid?.server,
-      realm: data?.openid?.realm,
-      clientId: data?.openid?.client,
+      url: data.openid.server,
+      realm: data.openid.realm,
+      clientId: data.openid.client,
     });
     dispatch({
       type: TYPES.SET_KEYCLOAK,

dashboard/src/actions/toastActions.js

@@ -1,7 +1,7 @@
 import * as TYPES from "./types";
-import * as APP_ROUTES from "utils/routeConstants";
 
 import { uid } from "utils/helper";
+import { clearCachedSession } from "./authActions";
 
 export const showSessionExpired = () => async (dispatch) => {
   const toast = {
@@ -10,7 +10,7 @@ export const showSessionExpired = () => async (dispatch) => {
     message: "Please login to continue",
   };
   dispatch(showToast(toast.variant, toast.title, toast.message));
-  window.location.href = APP_ROUTES.AUTH;
+  dispatch(clearCachedSession());
 };
 
 export const showFailureToast = () => async (dispatch) => {

dashboard/src/actions/types.js

@@ -25,7 +25,6 @@ export const NAVBAR_CLOSE = "NAVBAR_CLOSE";
 export const GET_PUBLIC_DATASETS = "GET_PUBLIC_DATASETS";
 export const FAVORITED_DATASETS = "GET_FAVORITE_DATASETS";
 export const UPDATE_PUBLIC_DATASETS = "UPDATE_PUBLIC_DATASETS";
-export const SET_LOGIN_DETAILS = "SET_LOGIN_DETAILS";
 
 /* DASHBOARD OVERVIEW */
 export const USER_RUNS = "USER_RUNS";

dashboard/src/modules/components/HeaderComponent/index.jsx

@@ -31,7 +31,7 @@ import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import { logout } from "actions/authActions";
+import { sessionLogout } from "actions/authActions";
 import pbenchLogo from "assets/logo/pbench_logo.svg";
 import { useKeycloak } from "@react-keycloak/web";
 import { movePage } from "actions/authActions";
@@ -50,7 +50,7 @@ const HeaderToolbar = () => {
     const type = event.target.name;
     const menuOptions = {
       profile: () => navigate(APP_ROUTES.USER_PROFILE),
-      logout: () => dispatch(logout()),
+      logout: () => dispatch(sessionLogout()),
     };
     const action = menuOptions[type];
     if (action) {

dashboard/src/utils/axiosInstance.js

@@ -6,10 +6,10 @@ const { dispatch, getState } = store;
 
 const axiosInstance = axios.create({ responseType: "json" });
 
-axiosInstance.interceptors.request.use(async (req) => {
+axiosInstance.interceptors.request.use((req) => {
   const keycloak = getState().apiEndpoint.keycloak;
   if (keycloak?.authenticated) {
-    req.headers.Authorization = `Bearer ${keycloak?.token}`;
+    req.headers.Authorization = `Bearer ${keycloak.token}`;
   }
   return req;
 });

dashboard/src/utils/helper.js

@@ -4,34 +4,3 @@ export const uid = () => {
 
   return head + tail;
 };
-
-/**
- * Determine whether the specified password meets the requirements for a valid password
- * Requirements include length, presence of upper-case letters, digits, and special characters
- * @function
- * @param {string} password - Entered password
- * @param {number} passwordLength - Minimum required length of password
- * @return {boolean} - true if the password is valid, false otherwise
- */
-export const validatePassword = (password, passwordLength) => {
-  return {
-    passwordLength: password.length >= passwordLength ? "success" : "error",
-    passwordSpecialChars: /[`!@#$%^&*()_+\-=\]{};':"\\|,.<>?~]/.test(password)
-      ? "success"
-      : "error",
-    passwordContainsNumber: /\d/.test(password) ? "success" : "error",
-    passwordBlockLetter: /[A-Z]/.test(password) ? "success" : "error",
-  };
-};
-
-/**
- * Check if email entered by user is valid or not
- * @function
- * @param {string} email - Entered email
- * @return {boolean} - true if the email is valid, false otherwise
- */
-export const validateEmail = (email) => {
-  return {
-    email: !/\S+@\S+\.\S+/.test(email) ? "Enter a valid Email" : "",
-  };
-};