How to integrate OKTA with a React app

Published in

NE Digital

5 min readOct 13, 2021

Seamless integration of OKTA with client-side React application

In NEDigital security and audit is one of the essential parts of the product lifecycle. We are working continuously to improve our processes around security and audit while ensuring a seamless user experience on our platforms. Previously our internal application was using the traditional login method using username and passwords. This resulted in a different set of challenges for end-users and the core team maintaining the internal platforms.

Difficulty in managing credentials across various applications for the user.
Inconsistent login experience across multiple internal applications.
The tedious onboarding process for new employees.
Redundant challenges related to authentication and authorization while setting up a new application.
Challenges while auditing the internal application as per various organisational processes and having consistent password policies.

In order to overcome these challenges, we decided to implement a ‎Single Sign-On (SSO) for providing a consistent login experience for our multiple applications. We did POC with various applications and found OKTA most suitable for our use case.

In this article, we will discuss how we have integrated OKTA with one of our react based client-side applications.

Okta is the identity platform that manages the process of authentication for us. There are different ways of integrating your application with OKTA but for the scope of this document, we will discuss OIDC — OpenID Connect as the Sign-in method.

In this setup, we first need to initialize the application by connecting with OKTA either using an NPM package or a CDN hosted file.

# Run this command in your project root folder.
# yarn
yarn add @okta/okta-auth-js

# npm
npm install --save @okta/okta-auth-js

The built library bundle is also available on our global CDN. Include the following script in your HTML file to load before your application script:

<script src="https://global.oktacdn.com/okta-auth-js/5.2.2/okta-auth-js.min.js" type="text/javascript"></script>

Then you can create an instance of the OktaAuth object, available globally.

However, if you’re using a bundler like Webpack or Browserify, you can simply import the module or require using CommonJS.

While initializing the application we need to pass a config object which contains the following key attributes.

clientId: A string that uniquely identifies your Okta application.
Issuer: You may use the URL for your Okta organization as the issuer. This will apply a default authorization policy and issue tokens scoped at the organization level.
redirectUri: The URL that is redirected to when using token.getWithRedirect. This must be listed in your Okta application’s Login redirect URIs. If no redirectUri is provided, defaults to the current origin (window.location.origin).
scopes: Specify what information to make available in the returned id_token or access_token. For OIDC, you must include OpenID as one of the scopes. Defaults to [‘openid’, ‘email’]
pkce: Default value is true which enables the PKCE OAuth Flow.

This is how we initialize the application.

Once we have initialized our application, second step is to allow user to log in using OKTA.

For this flow, we are using the token class method getWithRedirect to get tokens while passing a state string which can be any random string. At this part of the flow, the user will be redirected to the OKTA issuer domain.

If key parameters like redirect URL and scopes define correctly user will see the login screen else there will be an error page pointing to the parameter that needs to be corrected.

Once the user logs in, he will be redirected to the callback URL and we need to handle this redirect request on our application. We will invoke the tokenManager class method parseFromURL() which will read the token from the URL and generate a response with id and access tokens.

We will store both tokens inside the token manager using this method

authClient.tokenManager.setTokens(tokens)

Post this we will read accessToken and store it in cookies using this code snippet.

This is the entire method to process the redirect URL and process tokens.

The token we get from OKTA has an expiration time and once the token expires we can either ask the user to log in again or we need to renew the token. In order to renew the token, we need to subscribe to the expired event of tokenManager like the code snippet below.

Once the token is about to get expired, we can request for renewal of accessToken.

Meanwhile, we can subscribe to the renewed event and whenever tokens get renewed we can update the token in our cookie or store it in memory.

Pro Tip: Avoid storing token in localstorage as this can expose your application to a possible XSS attack. An XSS attack happens when an attacker can run JavaScript on your website. This means that the attacker can just take the access token that you stored in your localStorage.

LocalStorage vs Cookies: All You Need To Know About Storing JWT Tokens Securely in The Front-End

JWT Tokens are awesome, but how do you store them securely in your front-end? We'll go over the pros and cons of…

dev.to

The last part of OKTA flow is signout where we first revoke the access token and await till the token is revoked. Once the token is revoked we call the signout method.

Summary

To integrate OKTA with your react or javascript application you can use either an npm package or a built library bundle via CDN. Initialise the auth client by passing the config object. Call getWithRedirect() method to trigger login flow, it will redirect the user to the Okta login page for your organisation. Once logged in user will be redirected back to your redirect URL. Handle the redirect request by calling the parseFromUrl() method to parse the URL parameter and generating the token to be stored either in cookie or in-memory.

Hopefully, this article provides you with a clear approach for integrating Okta with your react application. By using Okta at NEDigital we were able to resolve all key challenges associated with the traditional login approach, Further aligned with key stakeholders for a consistent user experience. Another add-on benefit of integrating with Okta is audit logs which is essential for supporting the organisational audit policies.

Thank you for reading!

How to integrate OKTA with a React app

LocalStorage vs Cookies: All You Need To Know About Storing JWT Tokens Securely in The Front-End

JWT Tokens are awesome, but how do you store them securely in your front-end? We'll go over the pros and cons of…

Summary

References

Further Read

Written by Varun Chauhan