OIDC MFA URL params support (#667)

Author: orius123

package.json

@@ -53,7 +53,7 @@
 		"eslint-plugin-security": "1.7.1",
 		"eslint-plugin-testing-library": "6.2.0",
 		"husky": "8.0.3",
-		"jest": "29.7.0",
+		"jest": "^29.7.0",
 		"lint-staged": "15.2.0",
 		"prettier": "3.2.2",
 		"react-app-rewired": "^2.2.1",

src/App.test.tsx

@@ -1,17 +1,29 @@
 import '@testing-library/jest-dom';
 import React, { PropsWithChildren } from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import {
+	render,
+	fireEvent,
+	screen,
+	waitFor,
+	renderHook,
+	within
+} from '@testing-library/react';
 import App from './App';
 import packageJson from '../package.json';
+import useOidcMfa from './hooks/useOidcMfa';
 
 const mockDescope = jest.fn();
 const mockAuthProvider = jest.fn();
 
 jest.mock('@descope/react-sdk', () => ({
 	...jest.requireActual('@descope/react-sdk'),
-	Descope: (props: unknown) => {
+	Descope: ({ onSuccess, ...props }: { onSuccess: () => void }) => {
 		mockDescope(props);
-		return <div />;
+		return (
+			<button data-testid="descope-button" type="button" onClick={onSuccess}>
+				Descope
+			</button>
+		);
 	},
 	AuthProvider: (props: PropsWithChildren<{ [key: string]: string }>) => {
 		const { children } = props;
@@ -26,6 +38,9 @@ const baseUrl = 'https://api.descope.test';
 const flowId = 'test';
 const debug = true;
 
+const mockFetch = jest.fn();
+global.fetch = mockFetch;
+
 describe('App component', () => {
 	beforeAll(() => {
 		Object.defineProperty(window, 'location', {
@@ -147,4 +162,232 @@ describe('App component', () => {
 			)
 		);
 	});
+
+	describe('onSuccess callback', () => {
+		beforeEach(() => {
+			jest.clearAllMocks();
+			process.env.DESCOPE_PROJECT_ID = 'P123456789012345678901234567';
+			process.env.DESCOPE_FLOW_ID = 'saml-config';
+			process.env.REACT_APP_DESCOPE_BASE_URL = baseUrl;
+
+			// Set the ssoAppId URL parameter
+			Object.defineProperty(window, 'location', {
+				value: {
+					...window.location,
+					search: '?sso_app_id=testSsoAppId',
+					pathname: '/test',
+					assign: jest.fn()
+				},
+				writable: true
+			});
+		});
+
+		it('should update the URL with done=true when onSuccess is triggered', async () => {
+			render(<App />);
+
+			const descopeButton = screen.getByTestId('descope-button');
+			fireEvent.click(descopeButton);
+
+			await waitFor(() => {
+				expect(window.location.assign).toHaveBeenCalledWith(
+					`${baseUrl}/test?sso_app_id=testSsoAppId&done=true`
+				);
+			});
+		});
+
+		it('should update the URL with done=true when onSuccess is triggered without existing search params', async () => {
+			Object.defineProperty(window, 'location', {
+				value: {
+					...window.location,
+					search: '',
+					pathname: '/test',
+					assign: jest.fn()
+				},
+				writable: true
+			});
+
+			render(<App />);
+
+			const descopeButton = screen.getByTestId('descope-button');
+			fireEvent.click(descopeButton);
+
+			await waitFor(() => {
+				expect(window.location.assign).toHaveBeenCalledWith(
+					`${baseUrl}/test?done=true`
+				);
+			});
+		});
+	});
+
+	describe('favicon', () => {
+		beforeEach(() => {
+			jest.clearAllMocks();
+			process.env.REACT_APP_BASE_FUNCTIONS_URL = 'https://example.com';
+			process.env.REACT_APP_FAVICON_URL = 'https://example.com/favicon.ico';
+			process.env.DESCOPE_PROJECT_ID = 'P1234567890123456789012345678901';
+
+			Object.defineProperty(window, 'location', {
+				value: {
+					...window.location,
+					search: '?sso_app_id=testSsoAppId',
+					pathname: '/test'
+				},
+				writable: true
+			});
+		});
+
+		afterEach(() => {
+			// clean head after each test
+			document.head.innerHTML = '';
+		});
+
+		it('should update the favicon when all conditions are met', async () => {
+			mockFetch.mockResolvedValueOnce({
+				ok: true,
+				json: async () => ({
+					faviconUrl: 'https://example.com/new-favicon.ico'
+				})
+			});
+
+			render(<App />);
+
+			await waitFor(() => {
+				// eslint-disable-next-line testing-library/no-node-access -- can't query head with screen
+				const link = document.head.querySelector(
+					"link[rel~='icon']"
+				) as HTMLLinkElement;
+				expect(link).toBeInTheDocument();
+			});
+
+			await waitFor(() => {
+				// eslint-disable-next-line testing-library/no-node-access -- can't query head with screen
+				const link = document.head.querySelector(
+					"link[rel~='icon']"
+				) as HTMLLinkElement;
+				expect(link.href).toBe('https://example.com/new-favicon.ico');
+			});
+		});
+
+		it('should not update the favicon if the response is not ok', async () => {
+			mockFetch.mockResolvedValueOnce({
+				ok: false
+			});
+
+			render(<App />);
+
+			await waitFor(() => {
+				// eslint-disable-next-line testing-library/no-node-access -- can't query head with screen
+				const link = document.head.querySelector("link[rel~='icon']");
+				expect(link).not.toBeInTheDocument();
+			});
+		});
+
+		it('should not update the favicon if the URL is not secure', async () => {
+			process.env.REACT_APP_FAVICON_URL = 'http://example.com/favicon.ico';
+
+			render(<App />);
+
+			await waitFor(() => {
+				// eslint-disable-next-line testing-library/no-node-access -- can't query head with screen
+				const link = document.querySelector("link[rel~='icon']");
+				expect(link).not.toBeInTheDocument();
+			});
+		});
+
+		it('should not update the favicon if the URL is not valid', async () => {
+			process.env.REACT_APP_FAVICON_URL = 'invalid-url';
+
+			render(<App />);
+
+			await waitFor(() => {
+				// eslint-disable-next-line testing-library/no-node-access -- can't query head with screen
+				const link = document.querySelector("link[rel~='icon']");
+				expect(link).not.toBeInTheDocument();
+			});
+		});
+
+		it('should not update the favicon if fetch throws an error', async () => {
+			mockFetch.mockRejectedValueOnce(new Error('test error'));
+
+			render(<App />);
+
+			await waitFor(() => {
+				// eslint-disable-next-line testing-library/no-node-access -- can't query head with screen
+				const link = document.querySelector("link[rel~='icon']");
+				expect(link).not.toBeInTheDocument();
+			});
+		});
+
+		it('should not update the favicon if faviconUrl is missing', async () => {
+			process.env.REACT_APP_FAVICON_URL = '';
+
+			render(<App />);
+
+			await waitFor(() => {
+				// eslint-disable-next-line testing-library/no-node-access -- can't query head with screen
+				const link = document.querySelector("link[rel~='icon']");
+				expect(link).not.toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('useOidcMfa', () => {
+		beforeEach(() => {
+			Object.defineProperty(window, 'location', {
+				value: {
+					...window.location,
+					search:
+						'?oidc_mfa_state=testState&oidc_mfa_id_token=testIdToken&oidc_mfa_redirect_url=https://login.microsoftonline.com/common/federation/externalauthprovider',
+					pathname: '/test'
+				},
+				writable: true
+			});
+
+			// Mock window.history.replaceState
+			window.history.replaceState = jest.fn();
+
+			// Mock form.submit
+			HTMLFormElement.prototype.submit = jest.fn();
+		});
+
+		afterEach(() => {
+			// Clean up the DOM after each test
+			document.body.innerHTML = '';
+		});
+
+		it('should create and submit a form with the correct parameters', () => {
+			renderHook(() => useOidcMfa());
+
+			const form = screen.getByTestId('oidc-mfa-form');
+			expect(form).toBeInTheDocument();
+			expect(form).toHaveAttribute(
+				'action',
+				'https://login.microsoftonline.com/common/federation/externalauthprovider'
+			);
+			expect(form).toHaveAttribute('method', 'POST');
+
+			const stateInput = within(form).getByTestId('state');
+			expect(stateInput).toBeInTheDocument();
+			expect(stateInput).toHaveValue('testState');
+
+			const idTokenInput = within(form).getByTestId('id_token', {});
+			expect(idTokenInput).toBeInTheDocument();
+			expect(idTokenInput).toHaveValue('testIdToken');
+		});
+		it('should not create form post if the URL is not approved', () => {
+			Object.defineProperty(window, 'location', {
+				value: {
+					...window.location,
+					search:
+						'?oidc_mfa_state=testState&oidc_mfa_id_token=testIdToken&oidc_mfa_redirect_url=https://example.com',
+					pathname: '/test'
+				},
+				writable: true
+			});
+
+			renderHook(() => useOidcMfa());
+
+			expect(screen.queryByTestId('oidc-mfa-form')).not.toBeInTheDocument();
+		});
+	});
 });

src/App.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo } from 'react';
 import './App.css';
 import Done from './components/Done';
 import Welcome from './components/Welcome';
+import useOidcMfa from './hooks/useOidcMfa';
 
 const projectRegex = /^P([a-zA-Z0-9]{27}|[a-zA-Z0-9]{31})$/;
 const ssoAppRegex = /^[a-zA-Z0-9\-_]{1,30}$/;
@@ -56,6 +57,8 @@ const App = () => {
 	)?.[0];
 	projectId = pathnameProjectId ?? envProjectId ?? '';
 
+	useOidcMfa();
+
 	const urlParams = useMemo(
 		() => new URLSearchParams(window.location.search),
 		[]
@@ -150,9 +153,11 @@ const App = () => {
 				} else {
 					search = `?done=true`;
 				}
-				window?.location.assign(
-					`${window?.location.origin}/${window?.location.pathname}${search}`
-				);
+				// build the new URL
+				const newUrl = new URL(window?.location.origin);
+				newUrl.pathname = window?.location.pathname;
+				newUrl.search = search;
+				window?.location.assign(newUrl.toString());
 			}
 		})
 	};

src/hooks/useOidcMfa.ts

@@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+
+const OIDC_MFA_URL_STATE_PARAM_NAME = 'oidc_mfa_state';
+const OIDC_MFA_URL_ID_TOKEN_PARAM_NAME = 'oidc_mfa_id_token';
+const OIDC_MFA_URL_REDIRECT_URL_PARAM_NAME = 'oidc_mfa_redirect_url';
+
+const APPROVED_OIDC_MFA_URLS = [
+	'https://login.microsoftonline.com',
+	'https://login.microsoftonline.us',
+	'https://login.partner.microsoftonline.cn'
+];
+
+const createAndAppendInputElement = (
+	form: HTMLFormElement,
+	name: string,
+	value: string
+): void => {
+	const input = document.createElement('input');
+	input.type = 'text';
+	input.name = name;
+	input.value = value;
+	input.required = true;
+	input.setAttribute('data-testid', name);
+	form.appendChild(input);
+};
+
+const useOidcMfa = () => {
+	useEffect(() => {
+		const urlParams = new URLSearchParams(window.location.search);
+		const state = urlParams.get(OIDC_MFA_URL_STATE_PARAM_NAME);
+		const idToken = urlParams.get(OIDC_MFA_URL_ID_TOKEN_PARAM_NAME);
+		let redirectUrl = urlParams.get(OIDC_MFA_URL_REDIRECT_URL_PARAM_NAME);
+
+		if (!state || !idToken || !redirectUrl) {
+			return;
+		}
+
+		// Remove the parameters from the URL
+		urlParams.delete(OIDC_MFA_URL_STATE_PARAM_NAME);
+		urlParams.delete(OIDC_MFA_URL_ID_TOKEN_PARAM_NAME);
+		urlParams.delete(OIDC_MFA_URL_REDIRECT_URL_PARAM_NAME);
+		const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+		window.history.replaceState({}, '', newUrl);
+
+		try {
+			const parsedUrl = new URL(redirectUrl);
+			if (
+				!APPROVED_OIDC_MFA_URLS.some(
+					(approvedUrl) => parsedUrl.origin === approvedUrl
+				)
+			) {
+				throw new Error('Unapproved redirect URL');
+			}
+			redirectUrl = parsedUrl.href;
+		} catch (error) {
+			return;
+		}
+
+		// Create and submit the form
+		const form = document.createElement('form');
+		form.action = redirectUrl;
+		form.method = 'POST';
+		form.style.display = 'none';
+		form.setAttribute('data-testid', 'oidc-mfa-form');
+
+		createAndAppendInputElement(form, 'state', state);
+		createAndAppendInputElement(form, 'id_token', idToken);
+
+		document.body.appendChild(form);
+		form.submit();
+	}, []);
+};
+
+export default useOidcMfa;