Ping SDKs

Step 8. Test the app

Once all the previous steps are complete you can run the app end-to-end to see the flow.

  1. In your browser, empty the local storage and cache.

  2. Ensure that the client and API apps are running.

    You can run both apps with a single command:

    npm run start:reactjs-todo

  3. In your browser, visit the home page of the client app at https://localhost:8443.

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

  4. Click Sign In, and enter the credentials of the demo user you created earlier.

    The app displays a welcome message, and outputs the data retrieved from the /userinfo OAuth 2.0 endpoint.

    home page authenticated userinfo
    Figure 2. Screenshot of a user signed in to the home page, with userinfo data in the console.

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

    todos page successful request
    Figure 3. Screenshot of the todo page and console output showing the bearer token.

  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, before returning the user to the home page.

Congratulations, you just built a protected app with ReactJS.