8 easy steps to add Okta authentication to your React app
Tags: javascript, react, tutorial
Published: 2019-04-04 15:18:20

---
title: 8 easy steps to add Okta authentication to your React app
published: true
description: In this article I'll go over 8 easy steps to adding Okta authentication to your React application.
tags: javascript, react, tutorial
canonical_ur: https://linguinecode.com/post/add-okta-authentication-to-react-app
cover_image: https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02183948/okta-api-menu-tab.png
---

_original post @ [Linguine Blog](https://linguinecode.com/post/add-okta-authentication-to-react-app)_

Okta has been growing over 45% year over year since 2017, and it doesn't seem to be slowing down.

Big and small companies are using Okta for their external and internal software tools.

Okta is a user authentication management tool that helps businesses manage their employees software accounts with their company software tools.

For example, let's say I own a cat store and I use Slack, Jira, and Github.

If I hire an engineer, I'll have to create multiple accounts for that specific engineer.

And if that engineer leaves, I'll have to go through each tool and remove that person account. This is a problem.

Instead of doing all that manual work, you can integrate all those software tools to an Okta account and assign an Okta user to a software tool.

That means you can create 1 Okta user to your Okta account, and Okta will handle adding and removing an account for all your software tools that you've integrated with.

The neat part about Okta is that you can implement it to your own internal applications.

In this article I'll go over 8 easy steps to adding Okta authentication to your React application.

## Step 1: Create Okta account

First step is to head over to the [okta.com](http://okta.com) and create an account.

You can create a free 30 day trial account to test on. But if you have one already go to step 2.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02181543/creating-okta-account-1024x914.png)

<figcaption>  
</figcaption>

</figure>

That’s pretty easy.

You will than receive an email with your log in credentials, and a link to the log in page.

Go ahead and log in, and set your new password.

## Step 2: Create an Okta app

Once you’re logged in, you’ll need to head over to the application page.

You can find that under the Application menu tab when you hover over it.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02182431/okta-application-menu-1024x326.png)</figure>

There is also a shortcut link to add a new application on the right side.

But if you’re in the application page then click **Add Application** next.

Then click on **Create New App**. It should be a green button on the left hand side.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02182759/okta-create-app-bttn-1024x412.png)</figure>

A popup will be presented, and you’ll need to add the following configuration to fit your React application.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02182943/okta-app-platform-type-1024x427.png)</figure>

You will than be prompted to add some basic setting configuration about your app.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02183336/okta-app-general-settings-1024x875.png)</figure>

For the moment you can add your current localhost and port number for for your test app.

Click **Save** once those are added.

In the bottom page of your Okta app you’ll find your Client ID.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02183559/client-id-okta-1024x382.png)</figure>

Click on the right button to copy it to your clipboard.

## Step 3: Assign user to Okta app

The next step is to assign a user to your Okta app.

If a Okta user is not assigned to that app, they will get denied.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/04131158/okta-user-denied.jpg)</figure>

That’s okay too if you want. But at least add yourself!

Go back to the application page and click on the **Assign Application** button.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/04131458/okta-assign-user-1024x558.jpg)</figure>

Select your application and the user you want to assign it too and click **Next**.

And click the confirmation button right after.

## Step 4: Add trusted origin to Okta

The last configuration that you need to do in your Okta account is to add your trusted origins.

This will make sure we can avoid any CORS issues.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02183948/okta-api-menu-tab-1024x623.png)</figure>

Hover over the **Security** menu and select the **API** sub menu item.

The first tab you’ll see in the page is about tokens, but we want to change that to Trusted Origins tab.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02184157/okta-trusted-origin-page-1024x399.png)</figure>

And select **Add Origin** next.

Add the following field values onto the form and click **Save**.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/02184341/okta-add-trusted-origin-1024x642.png)</figure>

The boring stuff has been completed. Now the coding begins.

## Step 5: Create React app

To keep this example guide simple I’m going to use Create React App tooling to help us get quicker to the important part of this guide.

Let’s create a directory called **okta-sample**.

Inside our new directory, create a **package.json** file and add the following.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/03150516/okta-react-package-json-602x1024.png)</figure>

Now you may install those dependencies by running <mark>npm install</mark>.

Let’s also create a directory called **public** and **src** in the root of the project.

Inside the **public** directory let’s add an **index.html** file.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/03151139/okta-react-html-1024x802.png)</figure>

The **index.html** file will serve as a basic skeleton for the app.

In the **src** directory, all of your React code will live in there.

Inside **src**, create 2 files called **index.js**, and **App.js**. You’ll also need to add a **pages** directory inside the **src** directory.

<div class="wp-block-image">

<figure class="aligncenter is-resized">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/03152109/okta-react-folder-structure.png)</figure>

</div>

Go ahead and run <mark>npm start</mark>. It should boot up a browser window pointed to localhost:3000.

And the web page should blank.

## Step 6: Create the index file

In this file we’re doing a handful of actions here.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/03153508/okta-index-file1-1024x958.png)</figure>

We’re initializing the Browser router and adding Okta’s Security component.

Which allows you to supply your Okta configurations to your React app.

_P.S. don’t hardcode production configurations like in this example._

The **issuer** property is just the base URL to your Okta page. Don’t forget to add the slash <mark>**/**</mark> in the end.

The **redirect_uri**, and **client_id** can be grabbed from the Okta application page.

If you’re running your app locally during this step you might see your application broken.

That’s because **App.js** hasn’t been created or the routes. Let’s do that next.

## Step 7: Create App.js file

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/03211817/okta-react-app-1024x786.png)</figure>

In this file you’ll see how will put the pieces together.

The first step is to import React, React Router DOM modules called Route, and Link.

Route is going to help us define public routes.

And we’re going to use Link to help us build an easy 2 menu item navigation.

The first link will be pointing to the home page page which is the log in page.

The second link will help you go to the admin dashboard page.

The other important part to this file is the <mark>SecureRoute</mark> component that is provided by Okta.

This component helps you do the logic whether the user is allowed to enter the pag. This is determined if the user is authenticated or not.

The last important piece to this file is the <mark>ImplicitCallback</mark> Okta React component.

This component helps handle the response after Okta tells React if the user has successfully signed in or not.

## Step 8: Creating the admin dashboard & login page

The admin dashboard will be a file in the pages directory called **AdminDashboard.js**.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/03212616/okta-admin-dashboard.png)</figure>

It’s a very simple and plain functional React component.

The next file to create is for our home page. Which will display a sign in button.

<figure class="wp-block-image">![](https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2019/04/03212804/okta-login-page-react-1024x975.png)</figure>

In the login importing Okta’s HOC(higher order component) called <mark>withAuth</mark>.

And I’m wrapping it around the React class component <mark>LoginPage</mark>.

This will be needed because withAuth provides a

<mark>withAuth</mark> provides new property to the React component called user **auth**.

In the example above you can see that I’m using a method called login inside a <mark>onClick</mark> event for the button.

Inside the <mark>componentDidMount</mark> lifecycle you can see that I’m testing some of the other functionality that comes with <mark>withAuth</mark> such as checking if the user is authenticated, and getting the user information.

<mark>withAuth</mark> also provides other functionality such as:

*   getIdToken
*   logout
*   getAccessToken
*   handleAuthentication

## Conclusion

Congratulations you’ve added Okta authentication to your React application!

Here’s the link to the source code. And if you found it interesting and helpful please give it a start!

[Github source link](https://github.com/rleija703/react-examples/tree/master/examples/with-okta)