Get OIDC access tokens once the authentication redirect is successful (…

…#3250) * Dashboard integration with keycloak - New dependency added @react-keycloak/web and keycloak-js - Checks the SSO session by wrapping the entire App inside KeycloakProvider. - Removed the current use of login and registration related components. - Removed all the changes and files that got void after this authentication change. - Also ran prettier on the entire src directory. PBENCH-1073
distributed-system-analysis · Mar 31, 2023 · 5c0c0d4 · 5c0c0d4
1 parent 16ffcb8
commit 5c0c0d4
Show file tree

Hide file tree

Showing 24 changed files with 204 additions and 1,172 deletions.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -9,6 +9,7 @@
     "@patternfly/patternfly": "^4.183.1",
     "@patternfly/react-core": "^4.198.19",
     "@patternfly/react-table": "^4.75.2",
+    "@react-keycloak/web": "^3.4.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
@@ -21,6 +22,7 @@
     "gulp": "^4.0.2",
     "jest": "^27.5.1",
     "js-cookie": "^3.0.1",
+    "keycloak-js": "^21.0.1",
     "less-watch-compiler": "^1.16.3",
     "patternfly": "^3.9.0",
     "react": "^17.0.2",

diff --git a/dashboard/src/App.js b/dashboard/src/App.js
@@ -16,21 +16,19 @@ import { AuthForm } from "modules/components/AuthComponent/common-components";
 import AuthLayout from "modules/containers/AuthLayout";
 import ComingSoonPage from "modules/components/EmptyPageComponent/ComingSoon";
 import Cookies from "js-cookie";
-import LoginForm from "modules/components/AuthComponent/LoginForm";
 import MainLayout from "modules/containers/MainLayout";
 import NoMatchingPage from "modules/components/EmptyPageComponent/NoMatchingPage";
 import OverviewComponent from "modules/components/OverviewComponent";
 import ProfileComponent from "modules/components/ProfileComponent";
-import SignupForm from "modules/components/AuthComponent/SignupForm";
 import TableOfContent from "modules/components/TableOfContent";
 import TableWithFavorite from "modules/components/TableComponent";
 import favicon from "./assets/logo/favicon.ico";
 import { fetchEndpoints } from "./actions/endpointAction";
-import { getUserDetails } from "actions/authActions";
 import { showToast } from "actions/toastActions";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { ReactKeycloakProvider } from "@react-keycloak/web";
 
-const ProtectedRoute = ({ redirectPath = APP_ROUTES.AUTH_LOGIN, children }) => {
+const ProtectedRoute = ({ redirectPath = APP_ROUTES.AUTH, children }) => {
   const loggedIn = Cookies.get("isLoggedIn");
   const dispatch = useDispatch();
 
@@ -47,56 +45,68 @@ const HomeRoute = ({ redirectPath = APP_ROUTES.HOME }) => {
 
 const App = () => {
   const dispatch = useDispatch();
+  const { keycloak } = useSelector((state) => state.apiEndpoint);
 
   useEffect(() => {
     const faviconLogo = document.getElementById("favicon");
     faviconLogo?.setAttribute("href", favicon);
 
     dispatch(fetchEndpoints);
-    dispatch(getUserDetails());
   }, [dispatch]);
 
   return (
     <div className="App">
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<HomeRoute />}></Route>
-          <Route path={"/" + APP_ROUTES.HOME}>
-            <Route element={<AuthLayout />}>
-              <Route path={APP_ROUTES.AUTH_LOGIN} element={<LoginForm />} />
-              <Route path={APP_ROUTES.AUTH} element={<AuthForm />} />
-              <Route path={APP_ROUTES.AUTH_SIGNUP} element={<SignupForm />} />
-            </Route>
-            <Route element={<MainLayout />}>
-              <Route index element={<TableWithFavorite />} />
-              <Route element={<ProtectedRoute />}>
-                <Route
-                  path={APP_ROUTES.USER_PROFILE}
-                  element={<ProfileComponent />}
-                />
-                <Route
-                  path={APP_ROUTES.RESULTS}
-                  element={<TableWithFavorite />}
-                />
-                <Route
-                  path={APP_ROUTES.OVERVIEW}
-                  element={<OverviewComponent />}
-                />
-                <Route
-                  path={APP_ROUTES.TABLE_OF_CONTENT}
-                  element={<TableOfContent />}
-                />
-                <Route
-                  path={APP_ROUTES.ANALYSIS}
-                  element={<ComingSoonPage />}
-                />
+      {keycloak && (
+        <ReactKeycloakProvider
+          authClient={keycloak}
+          initOptions={{
+            onLoad: "check-sso",
+            checkLoginIframe: true,
+            enableLogging: true,
+          }}
+        >
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<HomeRoute />}></Route>
+              <Route path={"/" + APP_ROUTES.HOME}>
+                <Route element={<AuthLayout />}>
+                  <Route path={APP_ROUTES.AUTH} element={<AuthForm />} />
+                </Route>
+                <Route element={<MainLayout />}>
+                  <Route index element={<TableWithFavorite />} />
+                  <Route element={<ProtectedRoute />}>
+                    <Route
+                      path={APP_ROUTES.USER_PROFILE}
+                      element={<ProfileComponent />}
+                    />
+                    <Route
+                      path={APP_ROUTES.RESULTS}
+                      element={<TableWithFavorite />}
+                    />
+                    <Route
+                      path={APP_ROUTES.OVERVIEW}
+                      element={<OverviewComponent />}
+                    />
+                    <Route
+                      path={APP_ROUTES.TABLE_OF_CONTENT}
+                      element={<TableOfContent />}
+                    />
+                    <Route
+                      path={APP_ROUTES.ANALYSIS}
+                      element={<ComingSoonPage />}
+                    />
+                  </Route>
+                  <Route
+                    path={APP_ROUTES.SEARCH}
+                    element={<ComingSoonPage />}
+                  />
+                </Route>
+                <Route path="*" element={<NoMatchingPage />} />
               </Route>
-              <Route path={APP_ROUTES.SEARCH} element={<ComingSoonPage />} />
-            </Route>
-            <Route path="*" element={<NoMatchingPage />} />
-          </Route>
-        </Routes>
-      </BrowserRouter>
+            </Routes>
+          </BrowserRouter>
+        </ReactKeycloakProvider>
+      )}
     </div>
   );
 };