Refactor auth to use keycloak.js instead of homegrown system (#580)

* Mid-work with Spencer

Co-authored-by: Spencer Stolworthy <[email protected]>

* keycloa and dagger

* Add realm to config.json

* Fix merge conflict and update snapshots

* Make lots of things optional for the sake of tests

* Remove auth tests which were for things that keycloak.js abstracts. Coerce 'undefined' auth to false.

* Add config for realm, remove hardcoded realm

* Switch to silent SSO check, disable iframe, update deployment dir and README

* role mappings

* map the roles object, not the groups objec


Co-authored-by: Spencer Stolworthy <[email protected]>
Co-authored-by: Spencer Stolworthy <[email protected]>

Author: jacobsee

README.md

@@ -298,7 +298,8 @@ Depending on the type of deployment, the way of setting these variables may vary
 | Variable                  | Type    | Description                                                                            | Required | Default  |
 | :------------------------ | :------ | :------------------------------------------------------------------------------------- | :------- | :------- |
 | **baseUrl**               | string  | Target URL for the deployment of **this** Frontend App                                 | Yes      | N/A      |
-| **authBaseUrl**           | string  | URI for SSO integration                                                                | Yes      | N/A      |
+| **authBaseUrl**           | string  | URI for SSO integration (ending in /auth for Keycloak/RHSSO)                           | Yes      | N/A      |
+| **realm**                 | string  | Realm for SSO integration                                                              | Yes      | N/A      |
 | **clientId**              | string  | Identification of the client application for SSO integration                           | Yes      | N/A      |
 | **backendUrl**            | string  | URI for [Backend](https://github.com/rht-labs/lodestar-backend.git) APIs               | Yes      | N/A      |
 | **disableLaunch**         | boolean | Flag to toggle launch functionality on/off                                             | No       | false    |

deployment/README.md

@@ -34,6 +34,7 @@ helm template . \
   --set baseUrl=<your-base-url> \
   --set clientId=<your-sso-client-id> \
   --set authBaseUrl=<your-sso-openid-connect-url> \
+  --set realm=<your-realm> \
   --set backendUrl=<your-backend-url> \
   --set 'access.groups[0].name=group-name','access.groups[0].roles={access_type,axxess_type}'
 | oc apply -f -
@@ -47,7 +48,8 @@ It accepts the following variables
 | `git.ref`  | The branch name to build  |
 | `baseUrl`  | The FQDN at which this route will be exposed - depends on your environment  |
 | `clientId`  | The client ID that the SSO server is configured to accept auth requests using  |
-| `authBaseUrl`  | The url that your SSO server accepts OpenID Connect requests on - for Keycloak, something like `https://<keycloak-base-url>.com/auth/realms/<realm-id>/protocol/openid-connect`  |
+| `realm`  | Realm for SSO integration
+| `authBaseUrl`  | The url that your SSO server accepts OpenID Connect requests on - for Keycloak, something like `https://<keycloak-base-url>.com/auth`  |
 | `backendUrl`  | The url that the LodeStar backend accepts requests on  |
 | `access.groups` | A list of groups to receive access to LodeStar |
 | `access.groups[i].roles` | A list of roles to map access | 

deployment/templates/configmap.yaml

@@ -9,6 +9,7 @@ data:
     {
       "baseUrl": "{{ .Values.baseUrl }}",
       "clientId": "{{ .Values.clientId }}",
+      "realm": "{{ .Values.realm }}",
       "authBaseUrl": "{{ .Values.authBaseUrl }}",
       "backendUrl": "{{ .Values.backendUrl }}",
       "disableLaunch": "{{ .Values.disableLaunch }}",

package-lock.json

@@ -7,6 +7,7 @@
     "@patternfly/react-core": "^4.192.15",
     "@patternfly/react-icons": "^4.43.15",
     "@patternfly/react-table": "^4.61.15",
+    "@react-keycloak/web": "^3.4.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^7.2.1",
@@ -27,6 +28,7 @@
     "date-fns": "^2.14.0",
     "date-fns-tz": "^1.0.12",
     "faker": "^4.1.0",
+    "keycloak-js": "^10.0.2",
     "mockdate": "^3.0.2",
     "prettier": "^1.19.1",
     "query-string": "^6.13.8",

package.json

@@ -1,7 +1,8 @@
 {
   "baseUrl": "http://my-base.url",
   "clientId": "lodestar",
-  "authBaseUrl": "https://my-sso-endpoint.url",
+  "realm": "realm",
+  "authBaseUrl": "https://my-sso-endpoint.url/auth",
   "backendUrl": "http://my-backend.url/api",
   "disableLaunch": true,
   "loggerType": "console",

public/config/config.example.json

@@ -0,0 +1,7 @@
+<html>
+<body>
+    <script>
+        parent.postMessage(location.href, location.origin)
+    </script>
+</body>
+</html>

public/silent-check-sso.html

@@ -33,6 +33,7 @@ import {
   getFeaturesFromVersion,
 } from './common/version_feature_factory';
 import { CategoryProvider } from './context/category_context/category_context';
+import { useKeycloak } from '@react-keycloak/web';
 
 export const App = ({ config }: { config: Config }) => {
   const serviceProviders =
@@ -41,12 +42,12 @@ export const App = ({ config }: { config: Config }) => {
       : createApiV1Services(config);
 
   const { appConfig } = useConfig();
+  const { keycloak } = useKeycloak();
   return (
     <ErrorBoundary>
       <ServiceProvider serviceFactory={serviceProviders}>
         <ServiceProviderContext.Consumer>
           {({
-            authService,
             notificationService,
             versionService,
             categoryService,
@@ -69,8 +70,9 @@ export const App = ({ config }: { config: Config }) => {
                       {analyticsContext => (
                         <FeedbackProvider>
                           <AuthProvider
-                            authService={authService}
-                            analyticsContext={analyticsContext}
+                            keycloak={keycloak}
+                            publicUrl={appConfig.baseUrl}
+                            roleMapping={appConfig.roles}
                           >
                             <NotificationProvider
                               notificationService={notificationService}

src/app.tsx

@@ -1,34 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Route, RouteProps } from 'react-router-dom';
-import { SendToSSO } from './send_to_sso';
-import { useSession } from '../../context/auth_context/auth_context';
-import { AuthenticationError } from '../../services/auth_service/auth_errors';
-import { Logger } from '../../utilities/logger';
+import { useKeycloak } from '@react-keycloak/web';
 
 export const PrivateRoute = (props: RouteProps) => {
-  const { checkIsAuthenticated, authError } = useSession();
-  const [authStatusChecked, setAuthStatusChecked] = useState<boolean>(false);
-  const [isAuthed, setIsAuthed] = useState<boolean>(null);
-  useEffect(() => {
-    Logger.instance.debug('private_route:authError useEffect', authError);
-    if (authError instanceof AuthenticationError) {
-      setIsAuthed(false);
-    }
-  }, [authError]);
-  useEffect(() => {
-    if (!authStatusChecked) {
-      checkIsAuthenticated().then(isAuthenticated =>
-        setIsAuthed(isAuthenticated)
-      );
-    }
-    setAuthStatusChecked(true);
-  }, [checkIsAuthenticated, authStatusChecked]);
-
-  if (isAuthed) {
+  const { keycloak, initialized } = useKeycloak();
+  if (!initialized) {
+    return <div />;
+  }
+  if (keycloak.authenticated) {
     return <Route {...props} />;
-  } else if (isAuthed === false) {
-    return <SendToSSO />;
   } else {
-    return <div />;
+    keycloak.login();
+    return <div />
   }
 };

src/components/authentication/private_route.tsx

@@ -8,7 +8,7 @@ import {
   AnalyticsCategory,
 } from '../../context/analytics_context/analytics_context';
 
-export interface UserDropdownProps {}
+export interface UserDropdownProps { }
 
 export function UserDropdown(props: UserDropdownProps) {
   const authContext = useSession();