OIDC POC Complete

.github/workflows/autotest.yml

@@ -14,7 +14,7 @@ jobs:
               with:
                   node-version: 16.14.0
             - name: Install project in clean state
-              run: npm clean-install
+              run: npm clean-install --legacy-peer-deps
             - name: Run tests
               run: npm test
             - name: Format code

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/docs
 
 # misc
 .DS_Store

package.json

@@ -18,8 +18,10 @@
         "@types/react": "^18.0.11",
         "@types/react-dom": "^18.0.5",
         "bulma": "^0.9.4",
+        "oidc-client-ts": "^2.0.5",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
+        "react-oidc-context": "^2.1.1",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.1",
         "typescript": "^4.7.3",
@@ -68,6 +70,7 @@
         ]
     },
     "devDependencies": {
+        "@mdx-js/react": "^1.6.22",
         "@storybook/addon-actions": "^6.5.6",
         "@storybook/addon-essentials": "^6.5.6",
         "@storybook/addon-interactions": "^6.5.6",

src/components/GlobalHooks.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Alert, AlertProps } from '../stories/Alert/Alert'
 import { Modal, ModalProps } from '../stories/Modal/Modal'
+import { AuthProvider } from 'react-oidc-context'
+import { oidcConfig } from './Login'
 
 const AlertServiceContext = React.createContext<
     (options: AlertProps) => Promise<void>
@@ -49,7 +51,7 @@ export const ServiceProvider = ({ children }: any) => {
     }
 
     return (
-        <>
+        <AuthProvider {...oidcConfig}>
             <Alert
                 open={alertState}
                 onClose={handleAlertClose}
@@ -66,6 +68,6 @@ export const ServiceProvider = ({ children }: any) => {
                     children={children}
                 />
             </ModalServiceContext.Provider>
-        </>
+        </AuthProvider>
     )
 }

src/components/Login.tsx

@@ -6,6 +6,7 @@ import { Form } from '../stories/Form/Form'
 
 import { MutableRefObject, ReactElement, useRef, useState } from 'react'
 import { NavigateFunction, useNavigate } from 'react-router-dom'
+import { useAuth } from 'react-oidc-context'
 import { getData } from '../utils/restApiWrapper'
 
 import { env } from '../util'
@@ -18,13 +19,22 @@ export const commonHeaders = {
     'X-Rucio-AppID': 'test',
 }
 
+// move to environment variables, account for multiple OIDC providers
+export const oidcConfig = {
+    authority: 'authority_url',
+    client_id: 'client_id',
+    client_secret: 'client_secret',
+    redirect_uri: 'redirect_uri',
+}
+
 function Login() {
     const [userNameEntered, setUserNameEntered] = useState('')
     const [passwordEntered, setPasswordEntered] = useState('')
     const [userpassEnabled, setUserpassEnabled] = useState(false)
 
     const authType: MutableRefObject<string> = useRef('')
 
+    const auth = useAuth()
     const navigate: NavigateFunction = useNavigate()
     const showAlert: (options: AlertProps) => Promise<void> = useAlert()
     const showModal: (options: ModalProps) => Promise<void> = useModal()
@@ -188,18 +198,7 @@ function Login() {
     }
 
     const OAuth = () => {
-        getData('/auth/oidc')
-            .then((data: any) => {
-                sessionStorage.setItem(
-                    'X-Rucio-Auth-Token',
-                    'oidc_auth_sample_token',
-                )
-                navigate('/login')
-            })
-            .catch((error: any) => {
-                console.error(error)
-                navigate('/login')
-            })
+        auth.signinRedirect()
     }
 
     const x509Auth = () => {

src/tests/Login.test.tsx

@@ -1,13 +1,19 @@
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import Login from '../components/Login'
 import { BrowserRouter } from 'react-router-dom'
+import { ServiceProvider } from '../components/GlobalHooks'
+import { ReactElement } from 'react'
 
-test('Login page render', () => {
-    render(
+const renderComponent: ReactElement = (
+    <ServiceProvider>
         <BrowserRouter>
             <Login />
-        </BrowserRouter>,
-    )
+        </BrowserRouter>
+    </ServiceProvider>
+)
+
+test('Login page render', () => {
+    render(renderComponent)
     const loginPrimaryText = screen.getByText('Rucio Login')
     expect(loginPrimaryText).toBeInTheDocument()
 
@@ -25,11 +31,7 @@ test('Login page render', () => {
 })
 
 test('x509 auth flow', () => {
-    render(
-        <BrowserRouter>
-            <Login />
-        </BrowserRouter>,
-    )
+    render(renderComponent)
     const x509Button = screen.getByText('x509 Certificate')
     expect(x509Button.getAttribute('type')).toEqual('submit')
 
@@ -41,11 +43,7 @@ test('x509 auth flow', () => {
 })
 
 test('OIDC auth flow', () => {
-    render(
-        <BrowserRouter>
-            <Login />
-        </BrowserRouter>,
-    )
+    render(renderComponent)
     const OIDCButton = screen.getByText('OIDC OAuth')
     expect(OIDCButton.getAttribute('type')).toEqual('submit')
 
@@ -57,11 +55,7 @@ test('OIDC auth flow', () => {
 })
 
 test('Userpass auth flow', () => {
-    render(
-        <BrowserRouter>
-            <Login />
-        </BrowserRouter>,
-    )
+    render(renderComponent)
     const userPassButton = screen.getByText('Username / Password')
 
     act(() => {