Try the ReactJS Todo Login Widget sample

PingOne Advanced Identity Cloud PingAM Login Widget

In this tutorial you configure and run the ReactJS Todo Login Widget sample application.

The sample demonstrates how to use the Advanced Identity Cloud/PingAM Login Widget in a ReactJS web application. It includes Login and Registration journeys, a protected Todo application, and a Node.js REST API server. The sample uses Webpack and the npm workspaces in the SDK Sample Apps repository.

This tutorial is for ReactJS web applications that run in a browser. It does not cover React Native, which is a separate framework for building native mobile applications.

Download or view the source code in the ReactJS Todo Login Widget sample repository.

Before you begin

Before you begin, prepare your PingOne Advanced Identity Cloud or PingAM server, OAuth 2.0 clients, CORS policy, and local development environment.

Complete prerequisites

Step 1. Download the samples

Download the SDK Sample Apps repository and identify the React client and shared Todo API workspaces.

Start step 1

Step 2. Configure connection properties

Configure the sample’s public and confidential OAuth 2.0 clients and its React and API server environment files.

Start step 2

Step 3. Test the app

Run the client and API server, authenticate a user, access protected Todo data, and sign out.

Try it out

What the sample demonstrates

Configuring the Advanced Identity Cloud/PingAM Login Widget before the React application renders.
Mounting the modal form factor in a static HTML element.
Starting a named Login or Registration journey from React.
Updating React state from Advanced Identity Cloud/PingAM Login Widget observable events.
Calling a protected Todo API with an access token.
Revoking tokens and ending the user session when the user signs out.

For a from-scratch Vite integration that explains the widget APIs without using this sample, see Integrate the Login Widget into a React app.