refactor: authorization (#1256)

- Fix public url request redirection (Closes #1225)
- Remove unecessary layer with  keycloak-react package (move code to launcher-app)
- Fix bug where request query  was removed in openshift redirect_uri
- Fix bug where requert query was removed in cleanUrl (end of init)
- Uniformise and refactor Authorization (prepare for #1254)
- Remove hack and standardize AuthenticationError

package.json

@@ -5,7 +5,6 @@
   "private": true,
   "workspaces": [
     "packages/launcher-client",
-    "packages/keycloak-react",
     "packages/launcher-component",
     "packages/launcher-app",
     "packages/launcher-welcome-app"
@@ -21,7 +20,7 @@
     "clean": "rm -rf build && find . -type d -name \"node_modules\" -exec rm -rf {} +",
     "test": "jest --silent -w=2",
     "test:verbose": "jest",
-    "libs:build": "yarn client:build && yarn kc:build && yarn comp:build",
+    "libs:build": "yarn client:build && yarn comp:build",
     "build": "rm -rf build && yarn workspaces run build && cp -r ./packages/launcher-app/build ./build",
     "build:prod": "yarn build && yarn comp:storybook:publish && lerna publish",
     "app:build:mock-api": "yarn workspace launcher-app run build:mock-api",
@@ -35,7 +34,6 @@
     "wa:build:mock-api": "yarn workspace launcher-welcome-app build:mock-api",
     "wa:deploy": "yarn workspace launcher-welcome-app image:deploy",
     "client:build": "yarn workspace launcher-client build",
-    "kc:build": "yarn workspace keycloak-react build",
     "comp:build": "yarn workspace launcher-component build",
     "comp:test": "yarn workspace launcher-component test",
     "comp:storybook": "yarn workspace launcher-component storybook",

packages/launcher-app/package.json

@@ -22,13 +22,18 @@
   },
   "dependencies": {
     "@sentry/browser": "5.0.8",
-    "keycloak-react": "^1.0.0-alpha.0",
     "launcher-component": "^1.0.0-alpha.0",
     "query-string": "6.4.2",
-    "react-router-dom": "5.0.0"
+    "axios": "^0.18.0",
+    "jssha": "2.3.1",
+    "keycloak-js": "5.0.0",
+    "react-router-dom": "5.0.0",
+    "uuid": "3.3.2"
   },
   "devDependencies": {
     "@types/react-router-dom": "4.3.2",
+    "@types/jssha": "2.0.0",
+    "@types/uuid": "3.4.4",
     "env-cmd": "8.0.2",
     "react-scripts": "2.1.8"
   }

packages/launcher-app/src/app/config.ts

@@ -1,5 +1,5 @@
 import { checkNotNull } from 'launcher-client';
-import { KeycloakConfig, OpenshiftConfig } from 'keycloak-react';
+import { OpenshiftConfig, KeycloakConfig } from '../auth/types';
 
 function getEnv(env: string | undefined, name: string): string | undefined {
   const globalConfig = (window as any).GLOBAL_CONFIG;

packages/launcher-app/src/app/launcher-app.tsx

@@ -7,21 +7,25 @@ import {
   DataLoader,
   DeployExampleAppFlow,
   ImportExistingFlow,
-  LauncherClientProvider,
   LauncherMenu,
+  LauncherDepsProvider,
 } from 'launcher-component';
 import { Layout } from './layout';
 import { authenticationMode, creatorApiUrl, authConfig, launcherApiUrl, publicUrl } from './config';
 import { Redirect, Route, Switch } from 'react-router';
 import { BrowserRouter } from 'react-router-dom';
-import { AuthContext, AuthRouter, newAuthApi, useAuthenticationApiStateProxy } from 'keycloak-react';
-import { useRouter, createRouterLink, restoreRouterHistory } from './use-router';
+import { useRouter, createRouterLink, getRequestedRoute, goToWithRouter } from '../router/use-router';
+import { useAuthenticationApiStateProxy, AuthenticationApiContext } from '../auth/auth-context';
+import { newAuthApi, AuthRouter } from '../auth/authentication-api-factory';
 
 function Routes(props: {}) {
   const router = useRouter();
-  useEffect(() => {
-    restoreRouterHistory(router);
-  }, []);
+  const requestedRoute = getRequestedRoute(router);
+  if(requestedRoute) {
+    useEffect(() => {
+      goToWithRouter(router, requestedRoute);
+    }, []);
+  }
   const Menu = () => {
     return (
       <LauncherMenu
@@ -68,22 +72,19 @@ export function LauncherApp() {
   const authLoader = () => {
     return proxyAuthApi.init().catch(e => console.error(e));
   };
-  const authorizationTokenProvider = async () => {
-    return proxyAuthApi.user && proxyAuthApi.user.token;
-  };
   return (
     <DataLoader loader={authLoader}>
-      <AuthContext.Provider value={proxyAuthApi}>
-        <LauncherClientProvider
-          authorizationTokenProvider={authorizationTokenProvider}
-          creatorUrl={creatorApiUrl}
-          launcherUrl={launcherApiUrl}
-        >
-          <AuthRouter loginPage={LoginPage} basename={publicUrl}>
-            <HomePage />
-          </AuthRouter>
-        </LauncherClientProvider>
-      </AuthContext.Provider>
-    </DataLoader>
+      <AuthenticationApiContext.Provider value={proxyAuthApi}>
+          <LauncherDepsProvider
+            authorizationsManager={proxyAuthApi}
+            creatorUrl={creatorApiUrl}
+            launcherUrl={launcherApiUrl}
+          >
+            <AuthRouter loginPage={LoginPage} basename={publicUrl}>
+              <HomePage />
+            </AuthRouter>
+          </LauncherDepsProvider>
+      </AuthenticationApiContext.Provider>
+    </DataLoader >
   );
 }

packages/launcher-app/src/app/layout.tsx

@@ -13,16 +13,16 @@ import * as React from 'react';
 import { useState } from 'react';
 import logo from './assets/logo/RHD-logo.svg';
 import style from './layout.module.scss';
-import { useAuthApi } from 'keycloak-react';
-import { createRouterLink, useRouter } from './use-router';
+import { createRouterLink, useRouter } from '../router/use-router';
 import { BaseSyntheticEvent } from 'react';
 import { ReactNode } from 'react';
+import { useAuthenticationApi } from '../auth/auth-context';
 
 export function Layout(props: { children: React.ReactNode }) {
   const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
   const router = useRouter();
   const rootLink = createRouterLink(router, '/');
-  const auth = useAuthApi();
+  const auth = useAuthenticationApi();
   const logout = (e: BaseSyntheticEvent) => {
     e.preventDefault();
     auth.logout();
@@ -32,9 +32,10 @@ export function Layout(props: { children: React.ReactNode }) {
     const userDropdownItems = [
       <DropdownItem onClick={logout} key="logout">Logout</DropdownItem>,
     ];
-    if (auth.getAccountManagementLink()) {
-      userDropdownItems.push(
-        <DropdownItem component="a" href={auth.getAccountManagementLink()} target="_blank" key="manage">Manage Account</DropdownItem>
+    const accountManagementLink = auth.getAccountManagementLink();
+    if (accountManagementLink) {
+      userDropdownItems.unshift(
+        <DropdownItem component="a" href={accountManagementLink} target="_blank" key="manage">Manage Account</DropdownItem>
       );
     }
     PageToolbar = auth.enabled && auth.user && (

packages/launcher-app/src/app/login-page.tsx

@@ -14,14 +14,14 @@ import {
   TextVariants
 } from '@patternfly/react-core';
 import style from './login-page.module.scss';
-import { useAuthApi } from 'keycloak-react';
 import { Layout } from './layout';
 import { EnumsRuntimesLoaders } from 'launcher-component';
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 import { PropertyValue } from 'launcher-client';
+import { useAuthenticationApi } from '../auth/auth-context';
 
 function LoginCard() {
-  const auth = useAuthApi();
+  const auth = useAuthenticationApi();
   return (
     <div className={style.loginCard}>
       <p className={style.loginText}>