feat(davinci-client): introduce request middleware

.changeset/fifty-berries-repeat.md

@@ -0,0 +1,5 @@
+---
+'@forgerock/davinci-client': minor
+---
+
+Introduce request middleware feature to DaVinci Client

e2e/davinci-app/main.ts

@@ -2,7 +2,7 @@ import './style.css';
 import { Config, FRUser, TokenManager } from '@forgerock/javascript-sdk';
 import { davinci } from '@forgerock/davinci-client';
 
-import type { DaVinciConfig } from '@forgerock/davinci-client/types';
+import type { DaVinciConfig, RequestMiddleware } from '@forgerock/davinci-client/types';
 
 import usernameComponent from './components/text.js';
 import passwordComponent from './components/password.js';
@@ -18,10 +18,27 @@ const searchParams = new URLSearchParams(qs);
 const config: DaVinciConfig =
   serverConfigs[searchParams.get('clientId') || '724ec718-c41c-4d51-98b0-84a583f450f9'];
 
+const requestMiddleware: RequestMiddleware[] = [
+  (fetchArgs, action, next) => {
+    if (action.type === 'DAVINCI_START') {
+      fetchArgs.url.searchParams.set('start', 'true');
+      fetchArgs.headers?.set('Accept-Language', 'xx-XX');
+    }
+    next();
+  },
+  (fetchArgs, action, next) => {
+    if (action.type === 'DAVINCI_NEXT') {
+      fetchArgs.url.searchParams.set('next', 'true');
+      fetchArgs.headers?.set('Accept-Language', 'zz-ZZ');
+    }
+    next();
+  },
+];
+
 const urlParams = new URLSearchParams(window.location.search);
 
 (async () => {
-  const davinciClient = await davinci({ config });
+  const davinciClient = await davinci({ config, requestMiddleware });
   const continueToken = urlParams.get('continueToken');
   const formEl = document.getElementById('form') as HTMLFormElement;
   let resumed: any;
@@ -181,7 +198,7 @@ const urlParams = new URLSearchParams(window.location.search);
    * It returns an unsubscribe function that you can call to stop listening
    */
   davinciClient.subscribe(() => {
-    const node = davinciClient.getClient();
+    const node = davinciClient.getNode();
     console.log('Event emitted from store:', node);
   });
 

e2e/davinci-suites/src/basic.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { asyncEvents } from './utils/async-events.js';
+import { password, username } from './utils/demo-user.js';
 
 test('Test happy paths on test page', async ({ page }) => {
   const { navigate } = asyncEvents(page);
@@ -9,8 +10,8 @@ test('Test happy paths on test page', async ({ page }) => {
 
   await expect(page.getByText('Username/Password Form')).toBeVisible();
 
-  await page.getByLabel('Username').fill('demouser');
-  await page.getByLabel('Password').fill('U.CDmhGLK*nrQPDWEN47ZMyJh');
+  await page.getByLabel('Username').fill(username);
+  await page.getByLabel('Password').fill(password);
 
   await page.getByRole('button', { name: 'Sign On' }).click();
 
@@ -68,8 +69,8 @@ test('ensure query params passed to start are sent off in authorize call', async
 
   await expect(page.getByText('Username/Password Form')).toBeVisible();
 
-  await page.getByLabel('Username').fill('demouser');
-  await page.getByLabel('Password').fill('U.CDmhGLK*nrQPDWEN47ZMyJh');
+  await page.getByLabel('Username').fill(username);
+  await page.getByLabel('Password').fill(password);
 
   await page.getByText('Sign On').click();
 

e2e/davinci-suites/src/error.test.ts

@@ -9,7 +9,7 @@ test('Test happy paths on test page', async ({ page }) => {
 
   await expect(page.getByText('Username/Password Form')).toBeVisible();
 
-  await page.getByLabel('Username').fill('demouser');
+  await page.getByLabel('Username').fill('baduser');
   await page.getByLabel('Password').fill('badpassword');
 
   await page.getByText('Sign On').click();

e2e/davinci-suites/src/middleware.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test';
+import { asyncEvents } from './utils/async-events.js';
+
+test('Test middleware on test page', async ({ page }) => {
+  const networkArray = [];
+  page.on('request', async (req) => {
+    const url = req.url().toString();
+    const langHeader = await req.headerValue('Accept-Language');
+    if (url.includes('https://auth.pingone.ca')) {
+      networkArray.push({ url, langHeader });
+    }
+  });
+
+  const { navigate } = asyncEvents(page);
+  await navigate('/');
+
+  expect(page.url()).toBe('http://localhost:5829/');
+
+  await expect(page.getByText('Username/Password Form')).toBeVisible();
+
+  const startRequest = networkArray.find((req) => req.url.includes('/authorize'));
+  const nextRequest = networkArray.find((req) => req.url.includes('/customHTMLTemplate'));
+
+  // Check for addition of query params
+  await expect(startRequest.url.includes('start=true')).toBeTruthy();
+  await expect(startRequest.url.includes('next=true')).toBeFalsy();
+  await expect(nextRequest.url.includes('next=true')).toBeTruthy();
+  await expect(nextRequest.url.includes('start=true')).toBeFalsy();
+
+  // Check that Accept-Language header was modified from default en-US locale
+  await expect(startRequest.langHeader).not.toContain('en-US');
+  await expect(startRequest.langHeader).toBe('xx-XX');
+  await expect(nextRequest.langHeader).not.toContain('en-US');
+  await expect(nextRequest.langHeader).toBe('zz-ZZ');
+});

e2e/davinci-suites/src/register.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from '@playwright/test';
 import { asyncEvents } from './utils/async-events.js';
+import { password } from './utils/demo-user.js';
 
 test('Test happy paths on test page', async ({ page }) => {
   const { navigate } = asyncEvents(page);
@@ -18,7 +19,7 @@ test('Test happy paths on test page', async ({ page }) => {
   await page.getByLabel('First Name').fill('Bruce');
   await page.getByLabel('Last Name').fill('Wayne');
   await page.getByLabel('Email').fill(`${randomEmailPrefix}@autogenerated.com`);
-  await page.getByLabel('Password').fill('U.CDmhGLK*nrQPDWEN47ZMyJh');
+  await page.getByLabel('Password').fill(password);
 
   await page.getByText('Save').click();
 

e2e/davinci-suites/src/utils/demo-user.ts

@@ -0,0 +1,2 @@
+export const username = 'demouser';
+export const password = 'U.QPDWEN47ZMyJhCDmhGLK*nr';

packages/davinci-client/src/lib/client.store.ts

@@ -21,6 +21,7 @@ import type { SingleValueCollectors, IdpCollector } from './collector.types.js';
 import type { InitFlow, Updater } from './client.types.js';
 import { returnValidator } from './collector.utils.js';
 import { authorize } from './davinci.utils.js';
+import type { RequestMiddleware } from './effects/request.effect.types.js';
 
 /**
  * Create a client function that returns a set of methods
@@ -30,8 +31,14 @@ import { authorize } from './davinci.utils.js';
  * @param {ConfigurationOptions} options - the configuration options for the client
  * @returns {Observable} - an observable client for DaVinci flows
  */
-export async function davinci({ config }: { config: DaVinciConfig }) {
-  const store = createClientStore();
+export async function davinci({
+  config,
+  requestMiddleware,
+}: {
+  config: DaVinciConfig;
+  requestMiddleware?: RequestMiddleware[];
+}) {
+  const store = createClientStore({ requestMiddleware });
 
   if (!config.serverConfig.wellknown) {
     throw new Error('`wellknown` property is a required as part of the `config.serverOptions`');

packages/davinci-client/src/lib/client.store.utils.ts

@@ -6,7 +6,13 @@ import { davinciApi } from './davinci.api.js';
 import { ErrorNode, ContinueNode, StartNode, SuccessNode } from '../types.js';
 import { wellknownApi } from './wellknown.api.js';
 
-export function createClientStore() {
+import type { RequestMiddleware } from './effects/request.effect.types.js';
+
+export function createClientStore({
+  requestMiddleware,
+}: {
+  requestMiddleware?: RequestMiddleware[];
+}) {
   return configureStore({
     reducer: {
       config: configSlice.reducer,
@@ -15,7 +21,19 @@ export function createClientStore() {
       [wellknownApi.reducerPath]: wellknownApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
-      getDefaultMiddleware().concat(davinciApi.middleware).concat(wellknownApi.middleware),
+      getDefaultMiddleware({
+        thunk: {
+          extraArgument: {
+            /**
+             * This becomes the `api.extra` argument, and will be passed into the
+             * customer query wrapper for `baseQuery`
+             */
+            requestMiddleware: requestMiddleware,
+          },
+        },
+      })
+        .concat(davinciApi.middleware)
+        .concat(wellknownApi.middleware),
   });
 }
 

packages/davinci-client/src/lib/davinci.api.ts

@@ -2,7 +2,14 @@
  * Import the RTK Query library from Redux Toolkit
  * @see https://redux-toolkit.js.org/rtk-query/overview
  */
-import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query';
+import {
+  createApi,
+  FetchArgs,
+  fetchBaseQuery,
+  FetchBaseQueryError,
+  FetchBaseQueryMeta,
+  QueryReturnValue,
+} from '@reduxjs/toolkit/query';
 
 /**
  * Import internal modules
@@ -22,13 +29,24 @@ import type {
 } from './davinci.types.js';
 import type { ContinueNode } from './node.types.js';
 import type { StartNode } from '../types.js';
+import { initQuery } from './effects/request.effect.utils.js';
+import { RequestMiddleware } from './effects/request.effect.types.js';
+
+type BaseQueryResponse = Promise<
+  QueryReturnValue<unknown, FetchBaseQueryError, FetchBaseQueryMeta>
+>;
+
+interface Extras {
+  requestMiddleware: RequestMiddleware[];
+}
 
 /**
  * @const davinciApi - Define the DaVinci API for Redux state management
  * @see https://redux-toolkit.js.org/rtk-query/overview
  */
 export const davinciApi = createApi({
   reducerPath: 'davinci',
+  // TODO: implement extraOptions for request interceptors: https://stackoverflow.com/a/77569083 & https://stackoverflow.com/a/65129117
   baseQuery: fetchBaseQuery({
     prepareHeaders: (headers) => {
       headers.set('Accept', 'application/json');
@@ -49,14 +67,14 @@ export const davinciApi = createApi({
         const state = api.getState() as RootStateWithNode<ContinueNode>;
         const links = state.node.server._links;
         const requestBody = transformActionRequest(state.node, params.action);
+        const requestMiddleware = (api.extra as Extras).requestMiddleware;
 
         let href = '';
 
         if (links && 'next' in links) {
           href = links['next'].href || '';
         }
-
-        const response = await baseQuery({
+        const request: FetchArgs = {
           // TODO: If we don't have a `next.href`, we should handle this better
           url: href,
           credentials: 'include',
@@ -67,7 +85,10 @@ export const davinciApi = createApi({
             interactionToken: state.node.server.interactionToken,
           },
           body: JSON.stringify(requestBody),
-        });
+        };
+        const response: BaseQueryResponse = initQuery(request, 'flow')
+          .applyMiddleware(requestMiddleware)
+          .applyQuery(async (req: FetchArgs) => await baseQuery(req));
 
         /**
          * Returns the original response from DaVinci,
@@ -120,6 +141,7 @@ export const davinciApi = createApi({
       async queryFn(body, api, __, baseQuery) {
         const state = api.getState() as RootStateWithNode<ContinueNode>;
         const links = state.node.server._links;
+        const requestMiddleware = (api.extra as Extras).requestMiddleware;
 
         let requestBody;
         let href = '';
@@ -134,7 +156,7 @@ export const davinciApi = createApi({
           requestBody = body;
         }
 
-        const response = await baseQuery({
+        const request: FetchArgs = {
           url: href,
           credentials: 'include',
           method: 'POST',
@@ -144,7 +166,10 @@ export const davinciApi = createApi({
             interactionToken: state.node.server.interactionToken,
           },
           body: JSON.stringify(requestBody),
-        });
+        };
+        const response: BaseQueryResponse = initQuery(request, 'next')
+          .applyMiddleware(requestMiddleware)
+          .applyQuery(async (req: FetchArgs) => await baseQuery(req));
 
         /**
          * Returns the original response from DaVinci,
@@ -196,6 +221,7 @@ export const davinciApi = createApi({
        * @method queryFn - This is just a wrapper around the fetch call
        */
       async queryFn(options, api, __, baseQuery) {
+        const requestMiddleware = (api.extra as Extras).requestMiddleware;
         const state = api.getState() as RootStateWithNode<StartNode>;
 
         if (!state) {
@@ -236,14 +262,17 @@ export const davinciApi = createApi({
             url.search = existingParams.toString();
           }
 
-          const response = await baseQuery({
+          const request: FetchArgs = {
             url: url.toString(),
             credentials: 'include',
             method: 'GET',
             headers: {
               'Content-Type': 'application/x-www-form-urlencoded',
             },
-          });
+          };
+          const response: BaseQueryResponse = initQuery(request, 'start')
+            .applyMiddleware(requestMiddleware)
+            .applyQuery(async (req: FetchArgs) => await baseQuery(req));
 
           /**
            * Returns the original response from DaVinci,
@@ -291,8 +320,9 @@ export const davinciApi = createApi({
       },
     }),
     resume: builder.query<unknown, { continueToken: string }>({
-      async queryFn({ continueToken }, _api, _c, baseQuery) {
+      async queryFn({ continueToken }, api, _c, baseQuery) {
         const continueUrl = window.localStorage.getItem('continueUrl') || null;
+        const requestMiddleware = (api.extra as Extras).requestMiddleware;
 
         if (!continueToken) {
           return {
@@ -319,7 +349,7 @@ export const davinciApi = createApi({
           window.localStorage.removeItem('continueUrl');
         }
 
-        const response = await baseQuery({
+        const request: FetchArgs = {
           url: continueUrl,
           credentials: 'include',
           method: 'POST',
@@ -328,7 +358,10 @@ export const davinciApi = createApi({
             Authorization: `Bearer ${continueToken}`,
           },
           body: JSON.stringify({}),
-        });
+        };
+        const response: BaseQueryResponse = initQuery(request, 'resume')
+          .applyMiddleware(requestMiddleware)
+          .applyQuery(async (req: FetchArgs) => await baseQuery(req));
 
         return response;
       },
@@ -349,7 +382,6 @@ export const davinciApi = createApi({
         }
 
         const cacheEntry: DaVinciCacheEntry = api.getCacheEntry();
-        console.log('resumed handling repsonse');
         handleResponse(cacheEntry, api.dispatch, response?.status || 0);
       },
     }),