Orchestration SDKs

Step 3. Test the app

PingOne React Native

In the following procedure, you run the sample app that you configured in the previous step. The app performs a centralized login on your PingOne instance.

All commands should be run from the sdk-sample-apps/reactnative/reactnative-oidc directory unless otherwise specified.

Starting the Metro bundler

Metro is the JavaScript bundler for React Native.

Start it from the project root in a terminal window, and leave it running:

yarn start

Running on Android

In a separate terminal window, make sure you are in the project root, and run the sample app on an Android emulator or a connected device:

yarn android

Running on iOS

In a separate terminal window, make sure you are in the project root, and run the app on the iOS simulator:

yarn ios

Select the Configuration to use

  1. On the home screen, tap settings Configuration under the SETUP section.

    The app displays the servers you set up in the .env file:

    Configuration screen in the 'reactnative-oidc' sample app, listing the servers defined in the .env file
    Figure 1. Configuration screen in the 'reactnative-oidc' sample app

  2. Select the server you want to connect to, and then tap the back arrow (arrow_back) to return to the home screen.

Log in as a demo user

  1. On the home screen, tap lock OIDC Login under the AUTHENTICATION section.

    The app displays the OIDC Demo page:

    OIDC Demo page in the 'reactnative-oidc' sample app, showing the Authorize button before authentication
    Figure 2. OIDC Demo page in the 'reactnative-oidc' sample app before authentication

  2. Click Authorize.

    The app launches the browser and opens the sign-on page:

    Starting the OIDC login flow in the 'reactnative-oidc' sample app
    Figure 3. Starting the OIDC login flow in the 'reactnative-oidc' sample app

  3. Sign on as a demo user:

    • Name: demo

    • Password: Ch4ng3it!

    If authentication is successful the app displays the authenticated user screen:

    OIDC Demo page in the 'reactnative-oidc' sample app after successful authentication, showing the Logout, Token, Refresh, Userinfo, and Revoke actions
    Figure 4. Authenticated state in the 'reactnative-oidc' sample app

  4. Tap Userinfo to view a summary of the details returned from the server:

    Userinfo Summary section in the 'reactnative-oidc' sample app, showing the authenticated user’s name, email, and subject identifier
    Figure 5. Userinfo summary in the 'reactnative-oidc' sample app

  5. Tap Token to view the access, refresh, and ID tokens, if available:

    Tokens section in the 'reactnative-oidc' sample app, displaying the raw access, refresh, and ID token values
    Figure 6. Tokens section in the 'reactnative-oidc' sample app

  6. Tap Logout to sign the user out of PingOne, revoke the tokens, and clear them from secure storage on the device.

    To verify the user is signed out:

    1. In the PingOne administration console, navigate to Directory > Users.

    2. Select the user you signed in as.

    3. From the Services dropdown, select Authentication:

      pingone sessions en
      Figure 7. Checking a user’s sessions in PingOne.

      The Sessions section displays any existing sessions the user has, and whether they originate from a mobile device.