SDKS-4738: Migrate Legacy SDK To OIDC Client In Reactjs Davinci Sample App

javascript/reactjs-todo-davinci/README.md

@@ -2,7 +2,7 @@
 
 ## Disclaimers
 
-This sample code is provided "as is" and is not a supported product of Ping Identity. It's purpose is solely to demonstrate how the Ping JavaScript SDK  and DaVinci client can be implemented within a React application. Also, this is not a demonstration of React itself or instructional for _how_ to build a React app. There are many aspects to routing, state management, tooling and other aspects to building a React app that are outside of the scope of this project. For information about creating a React app, [visit React's official documentation](https://reactjs.org/docs/create-a-new-react-app.html).
+This sample code is provided "as is" and is not a supported product of Ping Identity. It's purpose is solely to demonstrate how the Ping OIDC client and DaVinci client can be implemented within a React application. Also, this is not a demonstration of React itself or instructional for _how_ to build a React app. There are many aspects to routing, state management, tooling and other aspects to building a React app that are outside of the scope of this project. For information about creating a React app, [visit React's official documentation](https://reactjs.org/docs/create-a-new-react-app.html).
 
 ## Supported DaVinci Collectors
 - TextCollector

javascript/reactjs-todo-davinci/client/components/davinci-client/alert.js

@@ -3,7 +3,7 @@
  *
  * alert.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/davinci-client/flow-link.js

@@ -3,7 +3,7 @@
  *
  * flow-link.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/davinci-client/form.js

@@ -3,7 +3,7 @@
  *
  * form.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */
@@ -25,7 +25,8 @@ import KeyIcon from '../icons/key-icon';
 import NewUserIcon from '../icons/new-user-icon';
 import Loading from '../utilities/loading.js';
 import { updateProtectCollector } from '../utilities/protect.utils.js';
-import { AppContext } from '../../global-state.js';
+import { OidcContext } from '../../context/oidc.context.js';
+import { ThemeContext } from '../../context/theme.context.js';
 import useDavinci from './hooks/davinci.hook.js';
 import useOAuth from './hooks/oauth.hook.js';
 
@@ -36,14 +37,15 @@ import useOAuth from './hooks/oauth.hook.js';
 export default function Form() {
   /**
    * Compose the state used in this view.
-   * First, we will use the global state methods found in the App Context.
+   * First, we will use OidcContext for auth setters and ThemeContext for theming.
    * Then, we will create local state to manage the login flow.
    *
    * The destructing of the hook's array results in index 0 having the state value,
    * and index 1 having the "setter" methods to set new state values.
    */
 
-  const [{ theme }, methods] = useContext(AppContext);
+  const theme = useContext(ThemeContext);
+  const [, methods] = useContext(OidcContext);
   const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
 
@@ -74,7 +76,7 @@ export default function Form() {
 
   /**
    * If the user successfully authenticates, let React complete
-   * rendering, then complete setting the global state and redirect to home.
+   * rendering, then update OidcContext auth state and redirect to home.
    */
   useEffect(() => {
     async function finalizeAuthState() {
@@ -84,7 +86,7 @@ export default function Form() {
        */
       if (user) {
         /**
-         * Set user state/info on "global state"
+         * Set user state/info on OidcContext
          */
         methods.setUser(`${user.given_name ?? ''} ${user.family_name ?? ''}`);
         methods.setEmail(user.email);

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

@@ -3,7 +3,7 @@
  *
  * create-client.utils.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/davinci-client/hooks/davinci.hook.js

@@ -3,7 +3,7 @@
  *
  * davinci.hook.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/davinci-client/hooks/oauth.hook.js

@@ -3,13 +3,13 @@
  *
  * oauth.hook.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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 { useEffect, useState } from 'react';
-import { TokenManager, UserManager } from '@forgerock/javascript-sdk';
+import { useEffect, useState, useContext } from 'react';
+import { OidcContext } from '../../../context/oidc.context.js';
 import { DEBUGGER } from '../../../constants.js';
 
 /**
@@ -20,6 +20,7 @@ export default function useOAuth() {
   const [user, setUser] = useState(null);
   const [authCode, setAuthCode] = useState(null);
   const [authState, setAuthState] = useState(null);
+  const [{ oidcClient }] = useContext(OidcContext);
 
   /**
    * @function setCode - A function that sets the hook's local authorization state
@@ -42,20 +43,18 @@ export default function useOAuth() {
     async function getOAuth() {
       /** *********************************************************************
        * SDK INTEGRATION POINT
-       * Summary: Get OAuth/OIDC tokens with Authorization Code Flow w/PKCE.
+       * Summary: Exchange authorization code for OAuth/OIDC tokens.
        * ----------------------------------------------------------------------
-       * Details: Since we have successfully authenticated the user, we can now
-       * get the OAuth2/OIDC tokens. We are passing the `forceRenew` option to
-       * ensure we get fresh tokens, regardless of existing tokens.
+       * Details: After a successful login, we receive an authorization
+       * code and state. We pass both to `oidcClient.token.exchange()` to
+       * complete the Authorization Code Flow w/PKCE and store the resulting
+       * tokens via the OIDC client.
        ************************************************************************* */
       if (DEBUGGER) debugger;
-      try {
-        await TokenManager.getTokens({
-          query: { code: authCode, state: authState },
-          forceRenew: true,
-        });
-      } catch (err) {
-        console.error(`Error: get tokens; ${err}`);
+      const tokens = await oidcClient.token.exchange(authCode, authState);
+      if ('error' in tokens) {
+        console.error(`Error: get tokens; ${tokens.error}`);
+        return;
       }
 
       /** *********************************************************************
@@ -67,12 +66,12 @@ export default function useOAuth() {
        * user info in the UI.
        ********************************************************************* */
       if (DEBUGGER) debugger;
-      try {
-        const user = await UserManager.getCurrentUser();
-        setUser(user);
-      } catch (err) {
-        console.error(`Error: get current user; ${err}`);
+      const user = await oidcClient.user.info();
+      if ('error' in user) {
+        console.error(`Error: get current user; ${user.error}`);
         setUser(null);
+      } else {
+        setUser(user);
       }
     }
 

javascript/reactjs-todo-davinci/client/components/davinci-client/object-value.js

@@ -1,9 +1,9 @@
 import React, { useContext, useState } from 'react';
-import { AppContext } from '../../global-state';
+import { ThemeContext } from '../../context/theme.context.js';
 
 export default function ObjectValueComponent({ collector, inputName, updater, submitForm }) {
   const [selected, setSelected] = useState(collector.output.options[0].value);
-  const [state] = useContext(AppContext);
+  const theme = useContext(ThemeContext);
 
   const handleChange = (event) => {
     event.preventDefault();
@@ -18,7 +18,7 @@ export default function ObjectValueComponent({ collector, inputName, updater, su
       <div className="d-flex flex-column align-items-center mt-2 mb-2">
         <label
           htmlFor="device-select"
-          className={`form-label cstm_subhead-text mb-4 fw-bold text-center ${state.theme.textMutedClass}`}
+          className={`form-label cstm_subhead-text mb-4 fw-bold text-center ${theme.textMutedClass}`}
         >
           {collector.output.label || 'select an option'}
         </label>

javascript/reactjs-todo-davinci/client/components/davinci-client/password.js

@@ -3,16 +3,16 @@
  *
  * password.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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 React, { useState, useContext } from 'react';
-import { AppContext } from '../../global-state';
+import { ThemeContext } from '../../context/theme.context.js';
 import EyeIcon from '../icons/eye-icon';
 
 const Password = ({ collector, inputName, updater }) => {
-  const [state] = useContext(AppContext);
+  const theme = useContext(ThemeContext);
   const [isVisible, setVisibility] = useState(false);
   const passwordLabel = collector.output.label;
 
@@ -26,15 +26,15 @@ const Password = ({ collector, inputName, updater }) => {
   return (
     <div className="cstm_form-floating input-group form-floating mb-3">
       <input
-        className={`cstm_input-password form-control border-end-0 bg-transparent ${state.theme.textClass} ${state.theme.borderClass}`}
+        className={`cstm_input-password form-control border-end-0 bg-transparent ${theme.textClass} ${theme.borderClass}`}
         id={inputName}
         name={inputName}
         type={isVisible ? 'text' : 'password'}
         onChange={(e) => updater(e.target.value)}
       />
       <label htmlFor={inputName}>{passwordLabel}</label>
       <button
-        className={`cstm_input-icon border-start-0 input-group-text bg-transparent ${state.theme.textClass} ${state.theme.borderClass}`}
+        className={`cstm_input-icon border-start-0 input-group-text bg-transparent ${theme.textClass} ${theme.borderClass}`}
         onClick={toggleVisibility}
         type="button"
       >

javascript/reactjs-todo-davinci/client/components/davinci-client/protect.js

@@ -3,20 +3,22 @@
  *
  * protect.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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 React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Loading from '../utilities/loading.js';
 import { initProtectApi } from '../../utilities/protect.api.js';
+import { ProtectContext } from '../../context/protect.context.js';
 import { INIT_PROTECT, PINGONE_ENV_ID } from '../../constants.js';
 
 const urlParams = new URLSearchParams(window.location.search);
-const protectInitMode = INIT_PROTECT || urlParams.get('initProtect');
+const protectInitMode = urlParams.get('initProtect') || INIT_PROTECT;
 
 export default function Protect({ collector }) {
   const [loading, setLoading] = useState(true);
+  const [, setProtectApi] = useContext(ProtectContext);
 
   useEffect(() => {
     async function initProtect() {
@@ -39,6 +41,7 @@ export default function Protect({ collector }) {
             console.error(`Error initializing Protect: ${result.error}`);
           } else {
             console.log('PingOne Protect initialized by collector for data collection');
+            setProtectApi(protectApi);
           }
         }
       } catch (err) {

javascript/reactjs-todo-davinci/client/components/davinci-client/social-login-button.js

@@ -3,7 +3,7 @@
  *
  * social-login-button.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/davinci-client/submit-button.js

@@ -3,7 +3,7 @@
  *
  * submit-button.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/davinci-client/text.js

@@ -3,20 +3,20 @@
  *
  * text.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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 React, { useContext } from 'react';
-import { AppContext } from '../../global-state';
+import { ThemeContext } from '../../context/theme.context.js';
 
 const Text = ({ collector, inputName, updater }) => {
-  const [state] = useContext(AppContext);
+  const theme = useContext(ThemeContext);
 
   return (
     <div className={`cstm_form-floating form-floating mb-3`}>
       <input
-        className={`cstm_form-control form-control bg-transparent ${state.theme.textClass} ${state.theme.borderClass}`}
+        className={`cstm_form-control form-control bg-transparent ${theme.textClass} ${theme.borderClass}`}
         id={inputName}
         name={inputName}
         onChange={(e) => updater(e.target.value)}

javascript/reactjs-todo-davinci/client/components/davinci-client/unknown.js

@@ -3,7 +3,7 @@
  *
  * unknown.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/account-icon.js

@@ -3,7 +3,7 @@
  *
  * account-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/action-icon.js

@@ -3,7 +3,7 @@
  *
  * action-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/alert-icon.js

@@ -3,7 +3,7 @@
  *
  * alert-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/apple-icon.js

@@ -3,7 +3,7 @@
  *
  * apple-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/eye-icon.js

@@ -3,7 +3,7 @@
  *
  * eye-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/finger-print-icon.js

@@ -3,7 +3,7 @@
  *
  * finger-print-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/google-icon.js

@@ -3,7 +3,7 @@
  *
  * google-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/home-icon.js

@@ -3,7 +3,7 @@
  *
  * home-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */

javascript/reactjs-todo-davinci/client/components/icons/key-icon.js

@@ -3,7 +3,7 @@
  *
  * key-icon.js
  *
- * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ * Copyright (c) 2026 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.
  */