Orchestration SDKs

Step 3. Test the app

PingOne JavaScript

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:

      npm install

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

      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
    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.
    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
    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
    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.