feat(davinci-client): implement phone number field support

Also fixed some minor bugs with device auth and registration as well as
implemented component support for phone, device auth and reg in
sample/test app.

Author: cerebrl

.changeset/clever-chicken-smile.md

@@ -0,0 +1,5 @@
+---
+'@forgerock/davinci-client': patch
+---
+
+Fixed bugs related to device auth and registration

.changeset/plain-books-beam.md

@@ -0,0 +1,5 @@
+---
+'@forgerock/davinci-client': minor
+---
+
+Implemented phone number collector to support phone number field

e2e/davinci-app/components/label.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import type { ReadOnlyCollector } from '@forgerock/davinci-client/types';
+
+export default function (formEl: HTMLFormElement, collector: ReadOnlyCollector) {
+  // create paragraph element with text of "Loading ... "
+  const p = document.createElement('p');
+
+  p.innerText = collector.output.label;
+  formEl?.appendChild(p);
+}

e2e/davinci-app/components/object-value.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import type {
+  DeviceAuthenticationCollector,
+  DeviceRegistrationCollector,
+  Updater,
+} from '@forgerock/davinci-client/types';
+
+/**
+ * Creates a dropdown component based on the provided data and attaches it to the form
+ * @param {HTMLFormElement} formEl - The form element to attach the dropdown to
+ * @param {SingleSelectCollector} collector - Contains the dropdown options and configuration
+ * @param {Updater} updater - Function to call when selection changes
+ */
+export default function objectValueComponent(
+  formEl: HTMLFormElement,
+  collector: DeviceRegistrationCollector | DeviceAuthenticationCollector,
+  updater: Updater,
+  submitForm: () => void,
+) {
+  // Create the label element
+  const paragraphEl = document.createElement('p');
+  paragraphEl.textContent = collector.output.label || 'Select an option';
+  paragraphEl.className = 'object-options-title';
+
+  // Append elements to the form
+  formEl.appendChild(paragraphEl);
+
+  // Add all options from the data
+  for (const option of collector.output.options) {
+    const buttonEl = document.createElement('button');
+
+    // Add change event listener
+    buttonEl.addEventListener('click', (event) => {
+      // Properly type the event target
+      const target = event.target as HTMLButtonElement;
+      const selectedValue = target.getAttribute('data-id');
+
+      if (!selectedValue) {
+        console.error('No value found for the selected option');
+        return;
+      }
+      updater(selectedValue);
+      submitForm();
+    });
+
+    buttonEl.setAttribute('data-id', option.value);
+    buttonEl.textContent = option.label;
+    formEl.appendChild(buttonEl);
+  }
+}

e2e/davinci-app/main.ts

@@ -19,6 +19,8 @@ import socialLoginButtonComponent from './components/social-login-button.js';
 import { serverConfigs } from './server-configs.js';
 import singleValueComponent from './components/single-value.js';
 import multiValueComponent from './components/multi-value.js';
+import labelComponent from './components/label.js';
+import objectValueComponent from './components/object-value.js';
 
 const qs = window.location.search;
 const searchParams = new URLSearchParams(qs);
@@ -58,6 +60,7 @@ const urlParams = new URLSearchParams(window.location.search);
     // different middleware type than the old legacy config
     await Config.setAsync(config as any);
   }
+
   function renderComplete() {
     const clientInfo = davinciClient.getClient();
     const serverInfo = davinciClient.getServer();
@@ -164,6 +167,21 @@ const urlParams = new URLSearchParams(window.location.search);
           collector, // This is the plain object of the collector
           davinciClient.update(collector), // Returns an update function for this collector
         );
+      } else if (
+        collector.type === 'DeviceRegistrationCollector' ||
+        collector.type === 'DeviceAuthenticationCollector'
+      ) {
+        objectValueComponent(
+          formEl, // You can ignore this; it's just for rendering
+          collector, // This is the plain object of the collector
+          davinciClient.update(collector), // Returns an update function for this collector
+          submitForm,
+        );
+      } else if (collector.type === 'ReadOnlyCollector') {
+        labelComponent(
+          formEl, // You can ignore this; it's just for rendering
+          collector, // This is the plain object of the collector
+        );
       } else if (collector.type === 'TextCollector') {
         textComponent(
           formEl, // You can ignore this; it's just for rendering
@@ -206,17 +224,21 @@ const urlParams = new URLSearchParams(window.location.search);
     });
 
     if (davinciClient.getCollectors().find((collector) => collector.name === 'protectsdk')) {
-      const newNode = await davinciClient.next();
-
-      if (newNode.status === 'continue') {
-        renderForm();
-      } else if (newNode.status === 'success') {
-        renderComplete();
-      } else if (newNode.status === 'error') {
-        renderForm();
-      } else {
-        console.error('Unknown node status', newNode);
-      }
+      submitForm();
+    }
+  }
+
+  async function submitForm() {
+    const newNode = await davinciClient.next();
+
+    if (newNode.status === 'continue') {
+      renderForm();
+    } else if (newNode.status === 'success') {
+      renderComplete();
+    } else if (newNode.status === 'error') {
+      renderForm();
+    } else {
+      console.error('Unknown node status', newNode);
     }
   }
 

e2e/davinci-app/server-configs.ts

@@ -55,4 +55,13 @@ export const serverConfigs: Record<string, DaVinciConfig> = {
         'https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration',
     },
   },
+  '20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0': {
+    clientId: '20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0',
+    redirectUri: window.location.origin + '/',
+    scope: 'openid profile email revoke',
+    serverConfig: {
+      wellknown:
+        'https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration',
+    },
+  },
 };

packages/davinci-client/src/lib/collector.types.ts

@@ -257,10 +257,12 @@ export type MultiSelectCollector = MultiValueCollectorWithValue<'MultiSelectColl
 export type ObjectValueCollectorTypes =
   | 'DeviceAuthenticationCollector'
   | 'DeviceRegistrationCollector'
+  | 'PhoneNumberCollector'
+  | 'ObjectOptionsCollector'
   | 'ObjectValueCollector'
   | 'ObjectSelectCollector';
 
-interface ObjectOptionWithValue {
+interface DeviceOptionWithDefault {
   type: string;
   label: string;
   content: string;
@@ -269,55 +271,96 @@ interface ObjectOptionWithValue {
   key: string;
 }
 
-interface ObjectOptionNoValue {
+interface DeviceOptionNoDefault {
   type: string;
   label: string;
   content: string;
   value: string;
   key: string;
 }
 
-interface ObjectValue {
+export interface DeviceValue {
   type: string;
   id: string;
   value: string;
 }
 
-export interface ObjectValueCollectorNoValue<T extends ObjectValueCollectorTypes> {
+export interface PhoneNumberInputValue {
+  countryCode: string;
+  phoneNumber: string;
+}
+
+interface PhoneNumberOutputValue {
+  countryCode?: string;
+  phoneNumber?: string;
+}
+
+export interface ObjectOptionsCollectorWithStringValue<
+  T extends ObjectValueCollectorTypes,
+  V = string,
+> {
+  category: 'ObjectValueCollector';
+  error: string | null;
+  type: T;
+  id: string;
+  name: string;
+  input: {
+    key: string;
+    value: V;
+    type: string;
+  };
+  output: {
+    key: string;
+    label: string;
+    type: string;
+    options: DeviceOptionNoDefault[];
+  };
+}
+
+export interface ObjectOptionsCollectorWithObjectValue<
+  T extends ObjectValueCollectorTypes,
+  V = Record<string, string>,
+  D = Record<string, string>,
+> {
   category: 'ObjectValueCollector';
   error: string | null;
   type: T;
   id: string;
   name: string;
   input: {
     key: string;
-    value: string | null;
+    value: V;
     type: string;
   };
   output: {
     key: string;
     label: string;
     type: string;
-    options: ObjectOptionNoValue[];
+    options: DeviceOptionWithDefault[];
+    value?: D | null;
   };
 }
 
-export interface ObjectValueCollectorWithValue<T extends ObjectValueCollectorTypes> {
+export interface ObjectValueCollectorWithObjectValue<
+  T extends ObjectValueCollectorTypes,
+  IV = Record<string, string>,
+  OV = Record<string, string>,
+> {
   category: 'ObjectValueCollector';
   error: string | null;
   type: T;
   id: string;
   name: string;
   input: {
     key: string;
-    value: ObjectValue | null;
+    value: IV;
     type: string;
   };
   output: {
     key: string;
     label: string;
     type: string;
-    options: ObjectOptionWithValue[];
+    value?: OV | null;
   };
 }
 
@@ -326,24 +369,37 @@ export type InferValueObjectCollectorType<T extends ObjectValueCollectorTypes> =
     ? DeviceAuthenticationCollector
     : T extends 'DeviceRegistrationCollector'
       ? DeviceRegistrationCollector
-      :
-          | ObjectValueCollectorWithValue<'ObjectValueCollector'>
-          | ObjectValueCollectorNoValue<'ObjectValueCollector'>;
+      : T extends 'PhoneNumberCollector'
+        ? PhoneNumberCollector
+        :
+            | ObjectOptionsCollectorWithObjectValue<'ObjectValueCollector'>
+            | ObjectOptionsCollectorWithStringValue<'ObjectValueCollector'>;
 
 export type ObjectValueCollectors =
-  | ObjectValueCollectorWithValue<'DeviceAuthenticationCollector'>
-  | ObjectValueCollectorNoValue<'DeviceRegistrationCollector'>
-  | ObjectValueCollectorWithValue<'ObjectSelectCollector'>
-  | ObjectValueCollectorNoValue<'ObjectSelectCollector'>;
+  | DeviceAuthenticationCollector
+  | DeviceRegistrationCollector
+  | PhoneNumberCollector
+  | ObjectOptionsCollectorWithObjectValue<'ObjectSelectCollector'>
+  | ObjectOptionsCollectorWithStringValue<'ObjectSelectCollector'>;
 
 export type ObjectValueCollector<T extends ObjectValueCollectorTypes> =
-  | ObjectValueCollectorWithValue<T>
-  | ObjectValueCollectorNoValue<T>;
-
-export type DeviceRegistrationCollector =
-  ObjectValueCollectorNoValue<'DeviceRegistrationCollector'>;
-export type DeviceAuthenticationCollector =
-  ObjectValueCollectorWithValue<'DeviceAuthenticationCollector'>;
+  | ObjectOptionsCollectorWithObjectValue<T>
+  | ObjectOptionsCollectorWithStringValue<T>
+  | ObjectValueCollectorWithObjectValue<T>;
+
+export type DeviceRegistrationCollector = ObjectOptionsCollectorWithStringValue<
+  'DeviceRegistrationCollector',
+  string
+>;
+export type DeviceAuthenticationCollector = ObjectOptionsCollectorWithObjectValue<
+  'DeviceAuthenticationCollector',
+  DeviceValue
+>;
+export type PhoneNumberCollector = ObjectValueCollectorWithObjectValue<
+  'PhoneNumberCollector',
+  PhoneNumberInputValue,
+  PhoneNumberOutputValue
+>;
 
 /** *********************************************************************
  * ACTION COLLECTORS
@@ -448,3 +504,16 @@ export type NoValueCollectors =
 export type NoValueCollector<T extends NoValueCollectorTypes> = NoValueCollectorBase<T>;
 
 export type ReadOnlyCollector = NoValueCollectorBase<'ReadOnlyCollector'>;
+
+export type UnknownCollector = {
+  category: 'UnknownCollector';
+  error: string | null;
+  type: 'UnknownCollector';
+  id: string;
+  name: string;
+  output: {
+    key: string;
+    label: string;
+    type: string;
+  };
+};