SDKS-5067: Standardize SDK Configuration

javascript/reactjs-todo-davinci/.env.example

@@ -1,14 +1,15 @@
-WELLKNOWN_URL=
-WEB_OAUTH_CLIENT=
 API_URL=http://localhost:9443
 DEBUGGER_OFF=true
 DEVELOPMENT=true
 PORT=8443
-SCOPE="openid profile email phone name revoke"
 
 # INIT_PROTECT (optional) - bootstrap | flow
 # 'bootstrap' will initialize protect at app bootstrap time
 # 'flow' relies on the PingOne Protect collector for initialization
 INIT_PROTECT=
 # PINGONE_ENV_ID - required when ProtectCollector is present
 PINGONE_ENV_ID=
+
+# SDK configuration (clientId, discoveryEndpoint, scopes, redirectUri) is no
+# longer sourced from environment variables. Copy config.example.json to
+# config.json and fill in your values.

javascript/reactjs-todo-davinci/.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+config.json
 /test-results/
 /playwright-report/
 /blob-report/

javascript/reactjs-todo-davinci/README.md

@@ -50,20 +50,36 @@ Once you have the requirements above met, we can build the project.
 
 1. DaVinci Policies: Select your DaVinci application
 
-### Configure Your `.env` File
+### Configure SDK Credentials
+
+Copy `config.example.json` to `config.json` at the app root and fill in your values:
+
+```sh
+cp config.example.json config.json
+```
+
+`config.json` (gitignored):
+
+```json
+{
+  "oidc": {
+    "clientId": "<your-oauth-client-id>",
+    "discoveryEndpoint": "https://<your-domain>/.well-known/openid-configuration",
+    "scopes": ["openid", "profile", "email"],
+    "redirectUri": "https://localhost:8443/callback.html"
+  }
+}
+```
 
-Change the name of `.env.example` to `.env` and replace the dummy values (e.g. `$CLIENT_ID`) with your values.
+### Configure Your `.env` File
 
-Example with annotations:
+Change the name of `.env.example` to `.env` and set the remaining runtime values:
 
 ```text
-WELLKNOWN_URL=<<PingOne wellknown url>>
-WEB_OAUTH_CLIENT=<<PingOne application client id>>
 API_URL=http://localhost:9443
 DEBUGGER_OFF=true
 DEVELOPMENT=true
 PORT=8443
-SCOPE="openid profile email phone name revoke"
 ```
 
 ### Installing Dependencies

javascript/reactjs-todo-davinci/client/components/davinci-client/hooks/create-client.utils.js

@@ -9,6 +9,7 @@
  */
 
 import { davinci } from '@forgerock/davinci-client';
+import { makeDavinciConfig } from '@forgerock/sdk-utilities';
 import { CONFIG } from '../../../constants.js';
 
 /**
@@ -17,7 +18,7 @@ import { CONFIG } from '../../../constants.js';
  */
 export default async function createClient() {
   try {
-    const davinciClient = await davinci({ config: CONFIG });
+    const davinciClient = await davinci({ config: makeDavinciConfig(CONFIG) });
     return davinciClient;
   } catch (error) {
     console.error('Error creating DaVinci client');

javascript/reactjs-todo-davinci/client/constants.js

@@ -8,32 +8,30 @@
  * of the MIT license. See the LICENSE file for details.
  */
 
+/** ***************************************************************************
+ * SDK INTEGRATION POINT
+ * Summary: Configure the DaVinci client
+ * ----------------------------------------------------------------------------
+ * Details: CONFIG uses the unified SDK configuration schema. Pass it to
+ * `makeDavinciConfig(CONFIG)` from `@forgerock/sdk-utilities` before calling
+ * the factory — e.g. `davinci({ config: makeDavinciConfig(CONFIG) })`.
+ *
+ * Local dev: copy config.example.json → config.json and fill in your values.
+ * E2e / CI: set SDK_CONFIG to a JSON string (e.g. from config.test.json).
+ *************************************************************************** */
+import sdkConfigJson from '../config.json';
 export const API_URL = process.env.API_URL;
 // Yes, the debugger boolean is intentionally reversed
 export const DEBUGGER = process.env.DEBUGGER_OFF === 'false';
-export const WEB_OAUTH_CLIENT = process.env.WEB_OAUTH_CLIENT;
-export const SCOPE = process.env.SCOPE;
-export const WELLKNOWN_URL = process.env.WELLKNOWN_URL;
 export const INIT_PROTECT = process.env.INIT_PROTECT;
 export const PINGONE_ENV_ID = process.env.PINGONE_ENV_ID;
-/** ***************************************************************************
- * SDK INTEGRATION POINT
- * Summary: Configure the OIDC client
- * ----------------------------------------------------------------------------
- * Details: The config object below is passed to the `oidc()` initializer in
- * `oidc.context.js` to configure the OIDC client:
- * - clientId: the OAuth 2.0 client ID registered in PingOne
- * - redirectUri: the URI of this app to which the OAuth 2.0 flow redirects
- *   after authentication (points to callback.html for the redirect handler)
- * - scope: the OAuth 2.0 scopes requested from PingOne
- * - serverConfig.wellknown: the OpenID Connect discovery URL for your
- *   PingOne environment, used to resolve authorization/token endpoints
- *************************************************************************** */
+
+const rawConfig = process.env.SDK_CONFIG ? JSON.parse(process.env.SDK_CONFIG) : sdkConfigJson;
+
 export const CONFIG = {
-  clientId: WEB_OAUTH_CLIENT,
-  redirectUri: `${window.location.origin}/callback.html`,
-  scope: SCOPE,
-  serverConfig: {
-    wellknown: WELLKNOWN_URL,
+  ...rawConfig,
+  oidc: {
+    ...rawConfig.oidc,
+    redirectUri: `${window.location.origin}/callback.html`,
   },
 };

javascript/reactjs-todo-davinci/client/context/oidc.context.js

@@ -10,6 +10,7 @@
 
 import { useState, createContext, useEffect } from 'react';
 import { oidc } from '@forgerock/oidc-client';
+import { makeOidcConfig } from '@forgerock/sdk-utilities';
 import { DEBUGGER } from '../constants';
 
 const email = window.sessionStorage.getItem('sdk_email');
@@ -19,7 +20,7 @@ const username = window.sessionStorage.getItem('sdk_username');
  * @function useInitOidcState - A custom hook to get initial OIDC state for managing user authentication
  * @returns {Array} - OIDC client, state values and state methods
  */
-export function useInitOidcState(config) {
+export function useInitOidcState(json) {
   /**
    * Create state properties for "global" OIDC state.
    * The destructing of the hook's array results in index 0 having the state values,
@@ -44,7 +45,7 @@ export function useInitOidcState(config) {
        * but it can be done outside of the React component for better performance.
        ************************************************************************* */
       if (DEBUGGER) debugger;
-      let client = await oidc({ config });
+      let client = await oidc({ config: makeOidcConfig(json) });
       if ('error' in client) {
         console.error(`Error initializing OIDC client: ${client.error}`);
         client = null;

javascript/reactjs-todo-davinci/config.example.json

@@ -0,0 +1,7 @@
+{
+  "oidc": {
+    "clientId": "<your-oauth-client-id>",
+    "discoveryEndpoint": "https://<your-domain>/.well-known/openid-configuration",
+    "scopes": ["openid", "profile", "email"]
+  }
+}

javascript/reactjs-todo-davinci/config.test.fido.json

@@ -0,0 +1,8 @@
+{
+  "oidc": {
+    "clientId": "20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0",
+    "discoveryEndpoint": "https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration",
+    "scopes": ["openid", "profile", "email", "phone", "name", "revoke"],
+    "redirectUri": "http://localhost:5829/callback.html"
+  }
+}

javascript/reactjs-todo-davinci/config.test.json

@@ -0,0 +1,8 @@
+{
+  "oidc": {
+    "clientId": "724ec718-c41c-4d51-98b0-84a583f450f9",
+    "discoveryEndpoint": "https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration",
+    "scopes": ["openid", "profile", "email", "phone", "name", "revoke"],
+    "redirectUri": "http://localhost:8443/callback.html"
+  }
+}

javascript/reactjs-todo-davinci/package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "@forgerock/davinci-client": "latest",
     "@forgerock/oidc-client": "latest",
+    "@forgerock/sdk-utilities": "latest",
     "@forgerock/protect": "latest",
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",

javascript/reactjs-todo-davinci/playwright.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig, devices } from '@playwright/test';
+import testConfig from './config.test.json';
+import testFidoConfig from './config.test.fido.json';
 
 const url = process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:8443';
 
@@ -27,11 +29,8 @@ export default defineConfig({
         DEBUGGER_OFF: 'true',
         DEVELOPMENT: 'false',
         PORT: '8443',
-        WEB_OAUTH_CLIENT: '724ec718-c41c-4d51-98b0-84a583f450f9',
-        SCOPE: 'openid profile email phone name revoke',
-        WELLKNOWN_URL:
-          'https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration',
         PINGONE_ENV_ID: '02fb4743-189a-4bc7-9d6c-a919edfe6447',
+        SDK_CONFIG: JSON.stringify(testConfig),
       },
       ignoreHTTPSErrors: true,
     },
@@ -61,10 +60,7 @@ export default defineConfig({
     //     DEBUGGER_OFF: 'true',
     //     DEVELOPMENT: 'false',
     //     PORT: '5829',
-    //     WEB_OAUTH_CLIENT: '20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0',
-    //     SCOPE: 'openid profile email phone name revoke',
-    //     WELLKNOWN_URL:
-    //       'https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration',
+    //     SDK_CONFIG: JSON.stringify(testFidoConfig),
     //   },
     //   ignoreHTTPSErrors: true,
     // },

javascript/reactjs-todo-davinci/webpack.config.js

@@ -1,4 +1,5 @@
 const dotenv = require('dotenv');
+const fs = require('fs');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
@@ -12,10 +13,8 @@ module.exports = () => {
   const API_URL = process.env.API_URL || localEnv.API_URL;
   const DEBUGGER_OFF = process.env.DEBUGGER_OFF || localEnv.DEBUGGER_OFF;
   const DEVELOPMENT = process.env.DEVELOPMENT || localEnv.DEVELOPMENT;
-  const WEB_OAUTH_CLIENT = process.env.WEB_OAUTH_CLIENT || localEnv.WEB_OAUTH_CLIENT;
-  const SCOPE = process.env.SCOPE || localEnv.SCOPE;
-  const WELLKNOWN_URL = process.env.WELLKNOWN_URL || localEnv.WELLKNOWN_URL;
   const INIT_PROTECT = process.env.INIT_PROTECT || localEnv.INIT_PROTECT;
+  const SDK_CONFIG = process.env.SDK_CONFIG || null;
   const PINGONE_ENV_ID = process.env.PINGONE_ENV_ID || localEnv.PINGONE_ENV_ID;
 
   return {
@@ -101,15 +100,18 @@ module.exports = () => {
     },
     plugins: [
       new MiniCssExtractPlugin(),
+      new webpack.NormalModuleReplacementPlugin(/config\.json$/, (resource) => {
+        if (!fs.existsSync(path.resolve(__dirname, 'config.json'))) {
+          resource.request = resource.request.replace('config.json', 'config.example.json');
+        }
+      }),
       new webpack.DefinePlugin({
         // Inject all the environment variable into the Webpack build
         'process.env.API_URL': JSON.stringify(API_URL),
         'process.env.DEBUGGER_OFF': JSON.stringify(DEBUGGER_OFF),
-        'process.env.WEB_OAUTH_CLIENT': JSON.stringify(WEB_OAUTH_CLIENT),
-        'process.env.SCOPE': JSON.stringify(SCOPE),
-        'process.env.WELLKNOWN_URL': JSON.stringify(WELLKNOWN_URL),
         'process.env.INIT_PROTECT': JSON.stringify(INIT_PROTECT),
         'process.env.PINGONE_ENV_ID': JSON.stringify(PINGONE_ENV_ID),
+        'process.env.SDK_CONFIG': JSON.stringify(SDK_CONFIG),
       }),
     ],
   };

javascript/reactjs-todo-journey/.env.example

@@ -1,17 +1,18 @@
-VITE_WELLKNOWN_URL=
-VITE_WEB_OAUTH_CLIENT=
 VITE_API_URL=http://localhost:9443
 VITE_PORT=8443
 VITE_DEBUGGER_OFF=true
 VITE_DEVELOPMENT=true
-VITE_SCOPE='openid profile email'
 VITE_JOURNEY_LOGIN=Login
 VITE_JOURNEY_REGISTER=Registration
 
 # VITE_INIT_PROTECT (optional) - bootstrap | journey
 # 'bootstrap' will initialize protect at app bootstrap time
 # 'journey' relies on the PingOneProtectEvaluationCallback for initialization
-VITE_INIT_PROTECT= 
+VITE_INIT_PROTECT=
 
 # VITE_PINGONE_ENV_ID - required if VITE_INIT_PROTECT is set
-VITE_PINGONE_ENV_ID= 
+VITE_PINGONE_ENV_ID=
+
+# SDK configuration (clientId, discoveryEndpoint, scopes, redirectUri) is no
+# longer sourced from environment variables. Copy config.example.json to
+# config.json and fill in your values.

javascript/reactjs-todo-journey/.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+config.json
 build/
 /test-results/
 /playwright-report/

javascript/reactjs-todo-journey/README.md

@@ -56,23 +56,38 @@ Once you have the 5 requirements above met, we can build the project.
 WebAuthn type steps for registration and authentication are also supported
 
 
-### Configure Your `.env` File
+### Configure SDK Credentials
+
+Copy `config.example.json` to `config.json` at the app root and fill in your values:
+
+```sh
+cp config.example.json config.json
+```
+
+`config.json` (gitignored):
+
+```json
+{
+  "oidc": {
+    "clientId": "<your-oauth-client-id>",
+    "discoveryEndpoint": "https://<your-domain>/.well-known/openid-configuration",
+    "scopes": ["openid", "profile", "email"],
+    "redirectUri": "https://localhost:8443/callback.html"
+  }
+}
+```
 
-Change the name of `.env.example` to `.env` and fill the environment variables with your values.
+### Configure Your `.env` File
 
-Example with annotations:
+Change the name of `.env.example` to `.env` and set the remaining runtime values:
 
 ```text
-VITE_WELLKNOWN_URL=<<<Wellknown URL to your AM instance>>>
-VITE_WEB_OAUTH_CLIENT=<<<Your Web OAuth client name/ID>>>
 VITE_API_URL=http://localhost:9443
 VITE_PORT=8443
 VITE_DEBUGGER_OFF=true
 VITE_DEVELOPMENT=true
-VITE_SCOPE='openid profile email'
 VITE_JOURNEY_LOGIN=Login
 VITE_JOURNEY_REGISTER=Registration
-VITE_REALM_PATH=<<<Realm path of AM>>>
 ```
 
 ### Installing Dependencies and Run Build

javascript/reactjs-todo-journey/client/components/journey/journey.hook.js

@@ -13,6 +13,7 @@ import { CONFIG, DEBUGGER } from '../../constants.js';
 import { htmlDecode } from '../../utilities/decode.js';
 import { OidcContext } from '../../context/oidc.context.js';
 import { callbackType, journey } from '@forgerock/journey-client';
+import { makeJourneyConfig } from '@forgerock/sdk-utilities';
 
 /**
  * @function isGenericError - Helper function to determine if a step is a GenericError
@@ -69,7 +70,7 @@ export default function useJourney({ formMetadata, resumeUrl }) {
        ********************************************************************* */
       if (DEBUGGER) debugger;
       try {
-        const client = await journey({ config: CONFIG });
+        const client = await journey({ config: makeJourneyConfig(CONFIG) });
         setJourneyClient(client);
 
         if (resumeUrl) {
@@ -253,7 +254,11 @@ export default function useJourney({ formMetadata, resumeUrl }) {
           const previousCallbacks = prev?.callbacks;
           const previousPayload = prev?.payload;
 
-          if (stepCount.current === 1 && newStep.type === 'Step' && newStep.getStage() === previousStage) {
+          if (
+            stepCount.current === 1 &&
+            newStep.type === 'Step' &&
+            newStep.getStage() === previousStage
+          ) {
             newStep.callbacks = previousCallbacks;
             newStep.payload = {
               ...previousPayload,
@@ -286,12 +291,7 @@ export default function useJourney({ formMetadata, resumeUrl }) {
     if (submissionStep && journeyClient) {
       setStep(submissionStep);
     }
-  }, [
-    formMetadata.tree,
-    submissionStep,
-    journeyClient,
-    authorize,
-  ]);
+  }, [formMetadata.tree, submissionStep, journeyClient, authorize]);
 
   /**
    * @function redirect - Redirects the user to the specified URL in the step