---
title: Step 3. Test the app
description: Provides instructions on how to test the sample app for the JavaScript OIDC sign-on module tutorial with PingOne.
component: orchsdks
page_id: orchsdks:oidc:try-it-out/javascript/pingone/03_test_the_app
canonical_url: https://developer.pingidentity.com/orchsdks/oidc/try-it-out/javascript/pingone/03_test_the_app.html
revdate: Thu, 2 Apr 2026 11:33:37 +0100
keywords: ["OAuth 2.0", "OpenID Connect", "Tutorial", "Source Code", "Integration", "SDK", "JavaScript", "PingOne", "test app"]
section_ids:
  troubleshooting: Troubleshooting
---

# Step 3. Test the app

[icon: circle-check, set=far]PingOne [icon: js, set=fab]JavaScript

* [Prepare](00_before-you-begin.html)

* [Download](01_download-sample-repo.html)

* [Configure](02_configure_connection_properties.html)

* **Run**

After completing the previous steps you can run the app end-to-end to see the flow.

1. Ensure that the client and API apps are running, and that you have the dependencies installed:

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

   2. Install the dependencies by using `npm`:

      ```console
      npm install
      ```

   3. Build and run both the TODO API server app, and the ReactJS client app:

      ```console
      npm run start:reactjs-todo-oidc
      ```

2. In your browser, empty the local storage and cache, and then visit the home page of the client app.

   The default URL is https\://localhost:8443.

   The browser displays the initial page of the client app:

   ![react journey first page](../../../../journey/_images/sample-apps/javascript/react-journey-first-page.png)Figure 1. Screenshot of the home page

   |   |                                                                                                          |
   | - | -------------------------------------------------------------------------------------------------------- |
   |   | You may need to dismiss warning from your browser about the self-signed certificate the client app uses. |

3. Click **Sign In**, and enter the credentials of your demo user.

   The app displays a welcome message, and outputs the user name as retrieved from the `/userinfo` OAuth 2.0 endpoint.

   ![Screenshot of a user signed in to the home page.](../../../_images/sample-apps/reactjs-todo-oidc-aic-signed-on.png)Figure 2. Screenshot of a user signed in to the home page

4. Click **Todos**.

   The app opens the protected `/todos` route and inserts the access token as a bearer token in the authorization header. If the access token is valid the app displays an empty list of todo items.

   ![react journey access token](../../../../journey/_images/sample-apps/javascript/react-journey-access-token.png)Figure 3. Screenshot of the todo page and console output showing the bearer token.

5. Optionally, create "Todo" items, and mark them as completed, to test the connection to the backend TODO API server.

6. Click the user icon, and then click **Sign out**.

   ![logout page](../../../../_images/build-reactjs-app/logout-page.png)Figure 4. Screenshot of logout page with spinner

   The app revokes the access token and removes the session cookies from storage. You'll see network calls to the `revoke` and `endSession` endpoints in the developer console in your browser.

## Troubleshooting

If the home page doesn't render due to errors, here are a few tips:

* Visit the TODO API server URL at `http://localhost:9443/healthcheck` in the same browser you use for the ReactJS app to test the API backend is running.

  The API backend should respond with `Ok`.

* Look for error output in the terminal that is running the `npm run start:reactjs-todo-oidc` command.

* Ensure you are not already logged into PingOne in the same browser as the sample app; log out if you are, or use a different browser to test the app.