Demo Application

We’ll now put together a React application with an Okta-hosted sign-in page to allow users to sign in and sign out of the application. After signing in, the user will be able to view their profile information. This process is completed through the authorization code flow where the user is redirected to the Okta-hosted sign-in page. After the user is authenticated, they are redirected to the application with an access code that is then exchanged for an access token.

Run the application

Click the “Run” button below. Then, click the URL next to “Your app can be found at:” in the widget below to open the application in a new tab.

Once the application is up and running, you’ll see a login page. When you click the “Login to Okta” button, you’ll be redirected to the Okta-hosted sign-in page. Enter your username and password to sign in.

We can sign in using the same username and password as for our developer organization, or we can use a known username and password from our Okta Directory.

Note: In case we are currently using our developer console, we will be automatically logged into our application as the same user that is using the developer console. This is because we already have an SSO session for our organization. In case we want to test the flow from the beginning, we’ll need to log out of the developer console.

Once you’ve successfully signed in, you’ll be redirected to the home page that’ll display your name and email address. You’ll also be provided a button each to view your complete profile and sign out of the application.