Implementation of Form Authentication

docker/osconsole/config.sh

@@ -42,12 +42,12 @@ EOF
 form_config_cluster() {
   cat << EOF
 {
-  "master_uri": "new URI().query('').path('/master').toString()",
+  "master_uri": "/master",
   "hawtio": {
     "mode": "${HAWTIO_ONLINE_MODE}"
   },
   "form": {
-    "uri": "new URI().query('').path('${FORM_URI}').toString()"
+    "uri": "${FORM_URI}"
   }
 }
 EOF
@@ -56,13 +56,13 @@ EOF
 form_config_namespace() {
   cat << EOF
 {
-  "master_uri": "new URI().query('').path('/master').toString()",
+  "master_uri": "/master",
   "hawtio": {
     "mode": "${HAWTIO_ONLINE_MODE}",
     "namespace": "${HAWTIO_ONLINE_NAMESPACE}"
   },
   "form": {
-    "uri": "new URI().query('').path('${FORM_URI}').toString()"
+    "uri": "${FORM_URI}"
   }
 }
 EOF

packages/kubernetes-api-app/.env.defaults

@@ -1,6 +1,14 @@
 # The port to run the dev server
 PORT=2772
 
+# The type of authentication to use
+# [oauth | form]
+CLUSTER_AUTH_TYPE=form
+
+# The URL for the form to use for form-type authentication
+# If not present then oauth authentication is assumed
+CLUSTER_AUTH_FORM=/login
+
 # The url of the cluster master
 CLUSTER_MASTER=https://localhost:8443/master
 

packages/kubernetes-api-app/.env.example

@@ -1,6 +1,14 @@
 # The port to run the dev server
 PORT=2772
 
+# The type of authentication to use
+# [oauth | form]
+CLUSTER_AUTH_TYPE=form
+
+# The URL for the form to use for form-type authentication
+# If not present then oauth authentication is assumed
+CLUSTER_AUTH_FORM=/login
+
 # The url of the cluster master
 CLUSTER_MASTER=https://localhost:8443/master
 

packages/kubernetes-api-app/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@hawtio/online-kubernetes-api": "workspace:*",
-    "@hawtio/react": "^0.5.0",
+    "@hawtio/react": "^0.6.1",
     "@patternfly/react-core": "^4.276.8",
     "@patternfly/react-styles": "^4.92.6",
     "@patternfly/react-table": "^4.113.0",
@@ -21,10 +21,12 @@
     "mini-css-extract-plugin": "2.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
     "typescript": "^4.9.5",
     "web-vitals": "^3.4.0"
   },
   "devDependencies": {
+    "connect-history-api-fallback": "^2.0.0",
     "css-loader": "^6.8.1",
     "dotenv-webpack": "^8.0.1",
     "html-webpack-plugin": "^5.5.3",

packages/kubernetes-api-app/public/hawtconfig.json

@@ -1,7 +1,7 @@
 {
   "branding": {
     "appName": "hawtio-kubernetes-api",
-    "appLogoUrl": "node_modules/@hawtio/core/dist/img/hawtio-logo.svg",
+    "appLogoUrl": "/hawtio-logo.svg",
     "css": "branding-example.css",
     "favicon": "favicon.ico"
   },
@@ -11,5 +11,8 @@
     "imgSrc": "hawtio-logo.svg",
     "copyright": "© Hawtio project"
   },
+  "login": {
+    "title": "Log in with your token"
+  },
   "disabledRoutes": ["disabled"]
 }

packages/kubernetes-api-app/src/bootstrap.tsx

@@ -4,7 +4,10 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { reportWebVitals } from './reportWebVitals'
 import { Kubernetes } from './kubernetes'
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import { AuthLoginPage } from './login'
 
+// To be removed post-development / pre-production
 Logger.setLevel(Logger.DEBUG)
 console.log('Logging Level set to ', Logger.getLevel())
 
@@ -22,7 +25,12 @@ isK8ApiRegistered()
     const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
     root.render(
       <React.StrictMode>
-        <Kubernetes />
+        <BrowserRouter>
+          <Routes>
+            <Route path='/login' element={<AuthLoginPage />} />
+            <Route path='/*' element={<Kubernetes />} />
+          </Routes>
+        </BrowserRouter>
       </React.StrictMode>,
     )
 

packages/kubernetes-api-app/src/login/AuthLoadingPage.tsx

@@ -0,0 +1,18 @@
+import { Bullseye, Page, Spinner, Text, TextContent, TextVariants } from '@patternfly/react-core'
+import React from 'react'
+
+export const AuthLoadingPage: React.FunctionComponent = () => (
+  <Page>
+    <Bullseye>
+      <div style={{ justifyContent: 'center' }}>
+        <Spinner diameter='60px' isSVG aria-label='Loading Hawtio' />
+
+        <TextContent>
+          <Text className={'--pf-global--Color--200'} component={TextVariants.h3}>
+            Loading ...
+          </Text>
+        </TextContent>
+      </div>
+    </Bullseye>
+  </Page>
+)

packages/kubernetes-api-app/src/login/AuthLoginPage.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { usePlugins, DEFAULT_APP_NAME, useHawtconfig } from '@hawtio/react'
+import { backgroundImages, hawtioLogo } from './img'
+import { ListItem, ListVariant, LoginFooterItem, LoginPage } from '@patternfly/react-core'
+import { log } from '@hawtio/online-oauth'
+import { AuthLoadingPage } from './AuthLoadingPage'
+
+export const AuthLoginPage: React.FunctionComponent = () => {
+  const { hawtconfig, hawtconfigLoaded } = useHawtconfig()
+  const { plugins, pluginsLoaded } = usePlugins()
+
+  if (!hawtconfigLoaded && !pluginsLoaded) {
+    log.debug('Loading:, hawtconfig =', hawtconfigLoaded, ', plugins =', pluginsLoaded)
+    return <AuthLoadingPage />
+  }
+
+  let loginForm = null
+  const loginPlugins = plugins.filter(plugin => plugin.isLogin)
+  if (loginPlugins.length > 0) {
+    const loginPlugin = loginPlugins[0]
+    const component = loginPlugin?.component
+    if (! component) {
+      log.info('Custom login component not defined: ', loginPlugin?.id)
+    } else {
+      loginForm = React.createElement(component)
+    }
+  }
+
+  if (!loginForm) {
+    log.error('Cannot find login form component')
+    return <AuthLoadingPage />
+  }
+
+  const appLogo = hawtconfig.branding?.appLogoUrl || hawtioLogo
+  const appName = hawtconfig.branding?.appName || DEFAULT_APP_NAME
+  const description = hawtconfig.login?.description || ''
+  const links = hawtconfig.login?.links || []
+  const title = hawtconfig.login?.title || 'Log in to your account'
+
+  const footerLinks = (
+    <React.Fragment>
+      {links.map((link, index) => (
+        <ListItem key={`footer-link-${index}`}>
+          <LoginFooterItem href={link.url}>{link.text}</LoginFooterItem>
+        </ListItem>
+      ))}
+    </React.Fragment>
+  )
+
+  return (
+    <LoginPage
+      backgroundImgSrc={backgroundImages}
+      brandImgSrc={appLogo}
+      brandImgAlt={appName}
+      loginTitle={title}
+      textContent={description}
+      footerListItems={footerLinks}
+      footerListVariants={ListVariant.inline}
+    >
+      {loginForm}
+    </LoginPage>
+  )
+}

packages/kubernetes-api-app/src/login/img/index.ts

@@ -0,0 +1,18 @@
+import { BackgroundImageSrcMap } from '@patternfly/react-core'
+import hawtioLogo from './hawtio-logo.svg'
+import userAvatar from './img_avatar.svg'
+import backgroundImageSrcLg from './pfbg_1200.jpg'
+import backgroundImageSrcXs from './pfbg_576.jpg'
+import backgroundImageSrcXs2x from './pfbg_576@2x.jpg'
+import backgroundImageSrcSm from './pfbg_768.jpg'
+import backgroundImageSrcSm2x from './pfbg_768@2x.jpg'
+
+export const backgroundImages: BackgroundImageSrcMap = {
+  xs: backgroundImageSrcXs,
+  xs2x: backgroundImageSrcXs2x,
+  sm: backgroundImageSrcSm,
+  sm2x: backgroundImageSrcSm2x,
+  lg: backgroundImageSrcLg,
+}
+
+export { hawtioLogo, userAvatar }

packages/kubernetes-api-app/src/login/index.ts

@@ -0,0 +1 @@
+export { AuthLoginPage } from './AuthLoginPage'

packages/kubernetes-api-app/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md'
+declare module '*.svg'
+declare module '*.jpg'
+declare module '*.png'

packages/kubernetes-api-app/webpack.config.js

@@ -5,6 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const InterpolateHtmlPlugin = require('interpolate-html-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
+const historyApiFallback = require('connect-history-api-fallback')
 const path = require('path')
 const dotenv = require('dotenv')
 const { dependencies } = require('./package.json')
@@ -14,6 +15,8 @@ dotenv.config( { path: path.join(__dirname, '.env') } )
 
 module.exports = () => {
 
+  const clusterAuthType = process.env.CLUSTER_AUTH_TYPE || 'oauth'
+
   const master_uri = process.env.CLUSTER_MASTER
   if (!master_uri) {
     console.error('The CLUSTER_MASTER environment variable must be set!')
@@ -28,6 +31,10 @@ module.exports = () => {
     process.exit(1)
   }
 
+  const clusterAuthFormUri = process.env.CLUSTER_AUTH_FORM || '/login'
+  if (clusterAuthFormUri)
+    console.log('Using Cluster Auth Form URL:', clusterAuthFormUri)
+
   console.log('Using Cluster URL:', master_uri)
   console.log('Using Cluster Namespace:', namespace)
   console.log('Using Hawtio Cluster Mode:', mode)
@@ -68,6 +75,10 @@ module.exports = () => {
           test: /\.(js)x?$/,
           exclude: /node_modules/,
           use: 'babel-loader',
+        },
+        {
+          test: /\.(png|jpe?g|gif|svg)$/i,
+          use: 'file-loader'
         }
       ]
     },
@@ -196,9 +207,15 @@ module.exports = () => {
             },
           }
 
+          if (clusterAuthType === 'form') {
+            oscConfig.form = {
+              uri: clusterAuthFormUri
+            }
+          }
+
           /*
-           * The oauth_client_id *must* be the same as the name of an
-           * OAuthClient resource added to the cluster, eg.
+           * In cluster mode, the oauth_client_id *must* be the same as
+           * the name of an OAuthClient resource added to the cluster, eg.
            *
            * apiVersion: oauth.openshift.io/v1
            * grantMethod: auto
@@ -216,19 +233,23 @@ module.exports = () => {
           switch (mode) {
             case 'namespace':
               oscConfig.hawtio.namespace = namespace
-              oscConfig.openshift = {
-                oauth_metadata_uri: `${proxiedMaster}/.well-known/oauth-authorization-server`,
-                oauth_client_id: clientId,
-                scope: `user:info user:check-access user:full`,
-                cluster_version: '4.11.0',
+              if (!oscConfig.form) {
+                oscConfig.openshift = {
+                  oauth_metadata_uri: `${proxiedMaster}/.well-known/oauth-authorization-server`,
+                  oauth_client_id: clientId,
+                    scope: `user:info user:check-access role:edit:${namespace}`,
+                  cluster_version: '4.11.0',
+                }
               }
               break
             case 'cluster':
-              oscConfig.openshift = {
-                oauth_metadata_uri: `${proxiedMaster}/.well-known/oauth-authorization-server`,
-                oauth_client_id: `hawtio-online-dev`,
-                scope: `user:info user:check-access user:full`,
-                cluster_version: '4.11.0',
+              if (!oscConfig.form) {
+                oscConfig.openshift = {
+                  oauth_metadata_uri: `${proxiedMaster}/.well-known/oauth-authorization-server`,
+                    oauth_client_id: clientId,
+                  scope: `user:info user:check-access user:full`,
+                  cluster_version: '4.11.0',
+                }
               }
               break
             default:
@@ -255,6 +276,15 @@ module.exports = () => {
         devServer.app.get('/hawtio/proxy/enabled', (_, res) => res.send(String(proxyEnabled)))
         devServer.app.get('/hawtio/keycloak/enabled', (_, res) => res.send(String(keycloakEnabled)))
         devServer.app.get('/keycloak/enabled', (_, res) => res.redirect('/hawtio/keycloak/enabled'))
+
+        //
+        // Use historyApiFallback to plug-in to the react router
+        // for accessing /login from the app. Having it here allows
+        // the paths above to remain external to the app
+        //
+        const history = historyApiFallback()
+        devServer.app.get('/', history)
+        devServer.app.get('/login', history)
       }
     }
   }

packages/kubernetes-api/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@hawtio/online-oauth": "workspace:*",
-    "@hawtio/react": "^0.5.0",
+    "@hawtio/react": "^0.6.1",
     "@types/jquery": "^3.5.16",
     "@types/jsonpath": "^0.2.0",
     "@types/node": "^18.17.18",