Ping SDKs

Authentication journey tutorial for ReactJS

In this tutorial you build out a sample ReactJS SPA and make use of a Node.js REST API server sample app.

This guide uses the Ping SDK for JavaScript to implement the following application features:

  • Dynamic authentication form for login.

  • OAuth/OIDC token acquisition through the Authorization Code Flow with PKCE.

  • Protected client-side routing.

  • Resource requests to a protected REST API.

  • Log out - revoke tokens and end session.

The to-do sample app
Figure 1. Screenshot of the to-do page of the sample app

Before you begin

Before you begin this tutorial ensure you have set up your PingOne Advanced Identity Cloud tenant or PingAM server with the required configuration.

For example, you will need to configure CORS, have an OAuth 2.0 client application set up, as well as an authentication journey for the app to navigate.

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. Configure connection properties

Configure both the Todo client app, and the API backend server app to connect to the OAuth 2.0 application you created in PingOne Advanced Identity Cloud or PingAM.

Start step 2

Step 3. Build and run the projects

In this step you build and run the API backend server app, and then the Todo client app.

There are also troubleshooting tips if the apps do not start as expected.

Start step 3

Step 4. Implement authentication using the Ping SDK

In this step you implement the Ping SDK into the Todo client app, so that it authenticates a user and handles the responses from your PingOne Advanced Identity Cloud tenant or PingAM server.

Start step 4

Step 5. Start an OAuth 2.0 flow

In this step you use the session token you received in the previous step to start an Oauth 2.0 flow.

Start step 5

Step 6. Manage access tokens

In this step you implement code to handle the presence of an access token, and getting user info from the OAuth 2.0 endpoint.

Start step 6

Step 7. Handle logout requests

In this step you implement code to terminate the session and revoke tokens.

Start step 7

Step 8. Test the app

In this final step you run the completed sample application.

Test it out