Orchestration SDKs

Trying the DaVinci module sample app for JavaScript

PingOne JavaScript

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 DaVinci flow.

This flow allows users to register, authenticate, and verify their email address with PingOne.

What functionality does the reactjs-todo-davinci sample demonstrate?
Feature Supported by sample

Orchestration

  • PingOne - DaVinci flows

Implementation

  • Embedded

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.

javascript angular todo davinci sample

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 <Form /> 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

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

Step 1. Download the samples

To start this tutorial, you need to download the SDK sample apps repo, which contains the projects you will use.

Start step 1

Step 2. Install the dependencies

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

Step 3. Configure connection properties

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

Step 4. Test the app

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