---
title: Step 3. Test the app
description: PingOne Advanced Identity Cloud PingAM JavaScript
component: orchsdks
page_id: orchsdks:journey:try-it-out/javascript/03_run_the_samples
canonical_url: https://developer.pingidentity.com/orchsdks/journey/try-it-out/javascript/03_run_the_samples.html
revdate: Mon, 3 Jul 2023 18:00:37 +0100
keywords: ["PingOne Advanced Identity Cloud", "PingAM", "Journeys", "Setup & Configuration", "Source Code", "Tutorial", "SDK"]
section_ids:
  troubleshooting: Troubleshooting
---

# Step 3. Test the app

[icon: circle-check, set=far]PingOne Advanced Identity Cloud [icon: circle-check, set=far]PingAM [icon: js, set=fab]JavaScript

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

* [Download](01_download_samples.html)

* [Configure](02_configure_samples_for_journeys.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-journey
      ```

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](../../_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 data retrieved from the `/userinfo` OAuth 2.0 endpoint.

   ![react journey user info](../../_images/sample-apps/javascript/react-journey-user-info.png)Figure 2. Screenshot of a user signed in to the home page, with `userinfo` data in the console.

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](../../_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.

Congratulations, you just built a protected app with ReactJS.

## 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-journey` command.

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