Ping SDKs

Step 4. Test the app

In the following procedure, you run the sample app that you configured in the previous step. The sample connects to your server and walks through the authentication journey you created in an earlier step.

After successful authentication, the sample obtains an OAuth 2.0 access token and displays the related user information.

  1. In a terminal window, navigate to the sdk-sample-apps/javascript folder.

  2. Use npm to run the sample:

    npm run start:reactjs-todo-dv

  3. Ensure you are NOT currently logged into the PingOne instance.

    If you are logged into the PingOne instance in the browser, the sample will not work.

    Logout of the PingAM instance before you run the sample.

  4. In a web browser, navigate to the URL on which you are running the sample, including the port number you specified in your .env file.

    For example, https://localhost:8443

    The app renders a home page explaining the purpose of the project:

    The first page of the JavaScript DaVinci client sample.
    Figure 1. The first page of the JavaScript DaVinci client sample.

  5. Click Sign In.

    The app displays the first nodes from your selected DaVinci flow:

    The first nodes of the DaVinci flow.
    Figure 2. The first nodes of the DaVinci flow.

  6. Enter your credentials and then click Sign On.

    Upon successful authentication, the app obtains the user’s details and displays a message containing their name on the screen:

    The app displays user info after successful authentication.
    Figure 3. The app displays user info after successful authentication.

  7. Optionally, if you configured the TODO API backend server, you can click Todos to view and manage todo items for the user.

    If you configured the API backend, you can view, edit, update, and delete todo items.
    Figure 4. If you configured the API backend, you can view, edit, update, and delete todo items.

  8. To sign out of the application and revoke tokens, click the user icon, and then click Sign Out.

    Sign out to close the session and revoke tokens.
    Figure 5. Sign out to close the session and revoke tokens.

    The app returns to the home page after signing out and revoking the tokens.