--- title: Trying the DaVinci module sample app for JavaScript description: Provides a step-by-step tutorial for configuring the `reactjs-todo-davinci` sample app to authenticate a user with a PingOne DaVinci flow. component: orchsdks page_id: orchsdks:davinci:try-it-out/javascript/index canonical_url: https://developer.pingidentity.com/orchsdks/davinci/try-it-out/javascript/index.html revdate: Fri, 9 Jan 2026 17:23:51 +0000 keywords: ["DaVinci", "JavaScript", "Tutorial", "reactjs-todo-davinci", "Authentication", "PingOne"] section_ids: before_you_begin: Before you begin step_1_download_the_samples: Step 1. Download the samples step_2_install_the_dependencies: Step 2. Install the dependencies step_3_configure_connection_properties: Step 3. Configure connection properties step_4_test_the_app: Step 4. Test the app --- # Trying the DaVinci module sample app for JavaScript [icon: circle-check, set=far]PingOne [icon: js, set=fab]JavaScript * [Prepare](00_before-you-begin.html) * [Download](01_downloading-forgerocksdk.html) * [Install](02_configuring-forgerocksdk-core-project-js.html) * [Configure](03_configuring-sample-forgerocksdk-js.html) * [Run](04_running-sample-forgerocksdk-js.html) **This tutorial walks you through updating the provided `reactjs-todo-davinci` sample app so that it connects to a PingOne tenant to authenticate a user using the [PingOne sign-on with sessions](https://support.pingidentity.com/s/marketplace-integration/a7iDo00000110R2IAI/pingone-sign-on-with-sessions) DaVinci flow.** This flow allows users to register, authenticate, and verify their email address with PingOne. > **Collapse: What functionality does the sample demonstrate?** > > | Feature | Supported by sample | > | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | > | Orchestration | * PingOne - DaVinci flows | > | Implementation | - Embedded *(tooltip: Provides its own user interface within the app to handle callbacks, rather than redirecting to the Identity Provider UI.)* | > | Language | * ReactJS | > | DaVinci Fields | - Text > > - Password > > - Checkbox > > - Combobox > > - Dropdown > > - Label > > - Phone number | > | DaVinci Buttons | * Flow button > > * Submit button > > * Social sign-on > > * Radio | > | DaVinci Toolbox | - OTP device registration > > - OTP device authentication | The `reactjs-todo-davinci` application is a "To-Do List" single-page application (SPA) built with ReactJS. ![Screenshot of the \`reactjs-todo-davinci\` sample JavaScript app.](../../_images/javascript-angular-todo-davinci-sample.png) Its primary purpose is to demonstrate how to secure a React application by embedding a PingOne DaVinci flow directly into the user experience. Instead of a static login form, the application initiates a DaVinci flow and dynamically renders the necessary UI components based on the collectors it receives from the server. Once a user is authenticated, they can access the protected To-Do list page, showcasing a complete, secure workflow from login to application usage. | | | | - | -------------------------------------------------------------------------------------------------------------------------------------- | | | This sample optionally uses the `javascript/todo-api` sample app to act as the backend API, but will also run without the API backend. | The application showcases several modern, best-practice patterns for integrating the DaVinci module for JavaScript within a React project: **1\. Global State Management with React Context** The application uses React's built-in Context API for managing shared state, which is a lightweight and effective alternative to larger libraries like Redux for this use case. * **Location**: `javascript/reactjs-todo-davinci/client/global-state.js` * **Function**: It defines a custom hook, `useGlobalStateMgmt`, which encapsulates all the logic for managing shared state like `isAuthenticated`, `username`, and `theme`. The `AppContext` then makes this state and its setter functions available to any component wrapped in its provider. The `setAuthenticationWrapper` function couples the application's state with the DaVinci module's functionality. When a component sets the authentication state to `false`, this wrapper interprets it as a logout action and triggers `logout()`, ensuring the user's session is properly terminated PingOne. **2\. Dynamic, View-Based Routing** The application uses `react-router-dom` to manage navigation, with a structure that separates public and private views. * **File**: `javascript/reactjs-todo-davinci/client/router.js` * **Function**: The `Router` component defines all application routes. It makes use of a custom `ProtectedRoute` component to guard access to the `/todos` page. This guard checks the `isAuthenticated` flag from the global context and redirects unauthenticated users to the `/login` page. **3\. Component-Driven DaVinci Flow** The login experience is not hardcoded but is driven by the DaVinci flow itself. * **File**: `javascript/reactjs-todo-davinci/client/views/login.js` * **Function**: The `Login` view acts as a container. It renders a dedicated `
` component (refer to `javascript/reactjs-todo-davinci/client/components/davinci-client/form.js`). This `Form` component is responsible for initiating the DaVinci flow, listening for collectors, and dynamically rendering the appropriate input fields, such as a username and password. This architecture makes the login UI incredibly flexible, as the entire user journey can be modified in the DaVinci flow builder without changing the ReactJS code. ## [Before you begin](00_before-you-begin.html) Before you begin this tutorial ensure you have set up your PingOne instance with the required configuration. For example, you will need an OAuth 2.0 client application set up. [**Complete prerequisites**[icon: chevrons-right, set=fas, size=xs]](00_before-you-begin.html) ## [Step 1. Download the samples](01_downloading-forgerocksdk.html) To start this tutorial, you need to download the SDK sample apps repo, which contains the projects you will use. [**Start step 1**[icon: chevrons-right, set=fas, size=xs]](01_downloading-forgerocksdk.html) ## [Step 2. Install the dependencies](02_configuring-forgerocksdk-core-project-js.html) The sample projects need a number of dependencies that you can install by using the `npm` command. For example, the Orchestration SDK for JavaScript itself is one of the dependencies. [**Start step 2**[icon: chevrons-right, set=fas, size=xs]](02_configuring-forgerocksdk-core-project-js.html) ## [Step 3. Configure connection properties](03_configuring-sample-forgerocksdk-js.html) In this step, you configure the "reactjs-todo-davinci" sample app to connect to the OAuth 2.0 application you created in PingOne Advanced Identity Cloud or PingAM. [**Start step 3**[icon: chevrons-right, set=fas, size=xs]](03_configuring-sample-forgerocksdk-js.html) ## [Step 4. Test the app](04_running-sample-forgerocksdk-js.html) The final step is to run the sample app. The sample connects to your server and walks through your authentication journey or tree. After successful authentication, the sample obtains an OAuth 2.0 access token and displays the related user information. [**Test app**[icon: chevrons-right, set=fas, size=xs]](04_running-sample-forgerocksdk-js.html)