implementing keycloak.

src/contexts/workspaces-context/api.ts

@@ -292,6 +292,14 @@ export class WorkspacesAPI implements IWorkspacesAPI {
         window.location.href = url
     }
 
+    @APIRequest()
+    loginKeycloak() {
+        // const url = `http://localhost:8080/Keycloak/auth?client_id=django-app&response_type=code&scope=openid&redirect_uri=http://localhost:8000/accounts/keycloak/login/callback/`
+
+        const url = `${this.apiUrl}../../accounts/oidc/keycloak/login/`;
+
+        window.location.href = url
+    }
     @APIRequest()
     loginSAMLGoogle() {
         /** I've been informed that we aren't actually using Google SAML, we're using OAuth... but this gets the job done regardless. */

src/contexts/workspaces-context/api.types.ts

@@ -225,6 +225,7 @@ export interface IWorkspacesAPI {
     loginSAMLGoogle(): Promise<void>
     loginSAMLCILogon(): void
     loginDex(): void
+    loginKeycloak(): void
 
     logout(fetchOptions?: AxiosRequestConfig): Promise<LogoutResponse>
     /** May throw a WhitelistRequiredError */

src/views/workspaces/login/login.js

@@ -6,7 +6,7 @@ import { LoginForm } from '@ant-design/pro-form'
 import classNames from 'classnames'
 import { FormWrapper } from './form-wrapper'
 import { UsernameInput, PasswordInput } from './form-fields'
-import { CILogonSSO, GithubSSO, GoogleSSO, UNCSSO, DexOAuth } from './sso'
+import { CILogonSSO, GithubSSO, GoogleSSO, UNCSSO, DexOAuth, KeycloakOAuth } from './sso'
 import { withAPIReady } from '../'
 import { useDest, useEnvironment, useWorkspacesAPI } from '../../../contexts'
 import '@ant-design/pro-form/dist/form.css'
@@ -40,7 +40,7 @@ const WhitelistRequired = (props) => (
     // </Space>
 )
 
-const SSOLoginOptions = ({ main, unc, google, github, cilogon, dex, onWhitelistRequired, onSignupRequired }) => (
+const SSOLoginOptions = ({ main, unc, google, github, cilogon, dex, keycloak, onWhitelistRequired, onSignupRequired }) => (
     <div style={{ display: "flex", justifyContent: "center", alignItems: "center", flexDirection: "column" }}>
         <Divider plain style={{ marginTop: main ? 0 : undefined }}>
             <Text style={{ color: main ? "rgba(0, 0, 0, 0.45)" : "rgba(0, 0, 0, 0.25)", fontWeight: "normal", fontSize: 14 }}>
@@ -63,6 +63,9 @@ const SSOLoginOptions = ({ main, unc, google, github, cilogon, dex, onWhitelistR
             { dex && (
                 <DexOAuth onWhitelistRequired={ onWhitelistRequired } onSignupRequired={ onSignupRequired } />
             ) }
+            { keycloak && (
+                <KeycloakOAuth onWhitelistRequired={ onWhitelistRequired } onSignupRequired={ onSignupRequired } />
+            ) }
         </Space>
     </div>
 )
@@ -97,14 +100,16 @@ export const WorkspaceLoginView = withAPIReady(({
     const allowGithubLogin =  useMemo(() => loginProviders.includes("GitHub"), [loginProviders])
     const allowCILogon = useMemo(() => loginProviders.includes("CILogon"), [loginProviders])
     const allowDexLogon = useMemo(() => loginProviders.includes("dex"), [loginProviders])
+    const allowKeycloakLogon = useMemo(() => loginProviders.includes("keycloak"), [loginProviders])
 
     const hasAdditionalProviders = useMemo(() => (
         allowUncLogin ||
         allowGoogleLogin ||
         allowGithubLogin ||
         allowCILogon ||
-        allowDexLogon
-    ), [allowUncLogin, allowGoogleLogin, allowGithubLogin, allowCILogon, allowDexLogon])
+        allowDexLogon ||
+        allowKeycloakLogon
+    ), [allowUncLogin, allowGoogleLogin, allowGithubLogin, allowCILogon, allowDexLogon, allowKeycloakLogon])
 
     const showWhitelistRequired = useMemo(() => {
         const required = new URLSearchParams(location.search).get("whitelist_required")
@@ -219,6 +224,7 @@ export const WorkspaceLoginView = withAPIReady(({
                                 github={ allowGithubLogin }
                                 cilogon={ allowCILogon }
                                 dex={ allowDexLogon }
+                                keycloak={ allowKeycloakLogon }
                                 onWhitelistRequired={ () => {
                                     setShowWhitelistRequired(true)
                                 } }

src/views/workspaces/login/sso/index.js

@@ -2,4 +2,5 @@ export * from './unc-sso'
 export * from './cilogon-sso'
 export * from './dex-oauth'
 export * from './google-sso'
-export * from './github-sso'
+export * from './github-sso'
+export * from './keycloak-oauth'

src/views/workspaces/login/sso/keycloak-oauth.js

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import { useWorkspacesAPI } from '../../../../contexts'
+import { SAMLButton } from './sso-button'
+import KeycloakPng from './keycloak-glyph-color.png'
+import Icon from '@ant-design/icons'
+
+
+/*
+    Component to render the button and handling of the Dex OAuth
+ */
+export const KeycloakOAuth = (props) => {
+    // get the context for the workspaces
+    const { api } = useWorkspacesAPI()
+
+    // create some state for the icon
+    const icon = useMemo(() => (
+        <Icon component={ () => (
+            <img
+                width={ 122 }
+                height={ 24 }
+                src={ KeycloakPng }
+            />
+        ) } />
+    ), [])
+
+    // return the button control for rendering
+    return (
+        <SAMLButton
+            icon={ icon }
+            background="#ffffff"
+            iconBackground="#000000"
+            foreground="#000000"
+            login={ () => api.loginKeycloak() }
+            { ...props }
+        >
+        </SAMLButton>
+    )
+}