Okta is an identity manager, with features such as single sign-on and multi-factor authentication. Okta can be used to secure the identities of customers and workforces. In this tutorial, we are going to learn how to use Okta for authentication in a React application. We’ll understand the core concepts of Okta, use cases, and why you should use it in your next React application.
When we’re building an application, one essential factor is authentication. For many developers, building an authentication architecture is straightforward. Still, teams have to consider security and ease of integration with third-party platforms such as Google and Facebook. Soon enough, building your own authentication system becomes complex.
This tutorial will be helpful to readers who are interested in learning how to authenticate users with Okta or an alternative in their React applications. This article requires a basic understanding of React and JavaScript.
Authentication In React Applications
Most React applications are a mixture of pages that are available to everyone and pages that require some form of authentication. React developers need to validate user-specific details to determine whether a user is authenticated and then assign a role to that user. Roles range from simple client access to more sophisticated admin access. Users generally need to do the following:
- Sign up
This can be done with an email address, phone number, and password, and you would save the user’s information for when they next want to access those private pages. - Log in
Authenticated users need to be able to log in to their own private pages.
Authentication in a React application can be done in a variety of ways, including native authentication methods (for example, token-based authentication tools like JSON Web Tokens (JWTs)), libraries such as Stormpath, and authentication managers such as Auth0, Okta, and OneLogin.
How Does Okta Work?
Like many authentication managers, Okta allows developers to control access to a React application using the OAuth 2.0 specification. Okta can be used as an authorization server to store all user information and issue user tokens for authentication and authorization.
With Okta, all of the user’s data and authentication information is stored securely in the cloud by Okta and can be managed from the Okta admin dashboard.
To retrieve user data from Okta, you’ll need to access it using Okta’s getUser method on OktaAuthService. More information is available in the documentation.
What Is Okta?
Okta is an enterprise-level identity-as-a-service cloud platform that is used for authorization by individuals and organizations. Unlike several other identity platforms, Okta works perfectly with on-premises applications and cloud applications.
With Okta, project and IT managers can manage access to employees on all resources and applications in the organization. Okta runs effectively in the cloud on a secured platform and integrated with on-premises directories, applications, and identity-management systems.
The core of Okta includes the following methods and features:
- Okta Identity Engine
This is the core feature of Okta. It allows managers to customize their Okta cloud components to solve a wide range of authorization use cases. Managers can use more than the default authorization features defined by Okta and can create customized solutions to their identity needs. - Single Sign-On (SSO)
With Okta, managers have a single built-in sign-on accessibility feature for cloud and mobile applications. Once you’ve logged in with your Okta account, you will be able to access your application on any other device without needing to re-enter your credentials. You can also integrate Okta with their on-premises and cloud-based applications. - Okta Provisioning
For automating users’ account and management processes, Okta provides advanced lifecycle hooks. Managers can use the built-in Okta integration network or a custom API connection to support users between Okta and cloud. Okta also provides a web API for managing user accounts. - Okta Mobility Management
This feature enhances the management and identities of users. From Okta mobile management, project and product managers can manage access policies from a central cloud-based console. This provides high protection to data, people, and apps from directories to any mobile device. To prevent unauthorized users from accessing some endpoints, Okta allows managers to build contextual user access.
Why Use Okta?
Okta’s main objective is to improve enterprise-level authorization and identity management for IT teams and organizations and to make it easier to manage permission for users.
Okta also provides sign-in widgets and advanced lifecycle-management hooks to authenticate users. The customizations will allow an organization to extend its identity-management needs. Several identity managers are available for React and React Native applications, including Azure AD, OneLogin, and Auth0. The table below shows why Okta is often regarded as a smarter choice for teams and organizations.
| Okta | OneLogin | Azure AD |
|---|---|---|
| Provides 2-factor authentication | Provides 2FA | Provides 2FA |
| Provides batch permissions and access for large organizations | Does not provide batch permissions and access | Provides batch permissions for select admin roles |
| Data import and export for teams and individuals | Does not provide data import and export for teams and individuals | Data import and export for teams and individuals |
| Email and Google Apps integration | Does not provide email and Google Apps integration | Data import and export for teams and individuals |
| Proficient cross-platform capabilities | Limited cross-platform capability | Limited cross-platform capability |
Build An Application With Okta #
Now that we know the core features of Okta, let’s build a rent-management system. This application will allow a landlord to see information about each tenant, the house number, and an image of the room. Using Okta, a landlord and a tenant will be able to log in and see this information.
Without further ado, let’s start!
Set Up Okta
The first requirement is to create an account on Okta. This will allow us to create an application and to onboard users to our Okta admin dashboard. Here, we will assign a sign-in method using “Okta sign-in” and also add an application type in our Okta dashboard. You can see this in the image below.
After clicking on the “Applications” tab, navigate to the “Create App Integration” button.
Here, we selected the “OpenID Connect” sign-in method. This provides us with a sign-in widget from Okta (this is optional — you can also build a custom log-in). Next, we selected our application type, which is a single-page application. Click on the “Next” button after selecting these credentials.
Next, we will specify a sign-in URI and a sign-out URI. We will set our redirect URIs to localhost:3000 for this tutorial, as seen below:
As shown in the image above, we added a sign-in redirect URI to redirect users once they’ve logged in to our application and a sign-out URI to redirect users once they’ve logged out.
In our Okta dashboard, we can configure the type of authentication that we want for users and add sign-in and sign-out routes. Now, we’re ready to create our React application with Okta!
Creating A React Application
Let’s get started with creating a React application using Create React App. Run the command below to create a new project:
Alternatively, you can use Yarn:
Next, cd into the project directory, and start your development server using the command below:
Configure Okta for the React Application
Now, we’ll install the @okta/okta-react, @okta/okta-signin-widget, and @okta/okta-auth-js dependencies in our application.
Use this for npm:
And use this for Yarn:
Next, let’s install the dotenv package, which we’ll use to store our Okta environment variables. We also add styled-components, which we’ll use to style our application.
Using npm:
Using Yarn:
Create a new file, .env, in the root directory of our project, and add the following credentials, provided by Okta:
The BASE_URL includes your log-in email hosted by Okta. It’s a public identifier for OAuth flows provided by Okta. Your CLIENT_ID
can be found in your Okta dashboard under the client credentials. Next,
let’s complete our Okta authentication by setting up a user for our
application.
Configure Okta in React App
To use Okta for our React application, first, we will need to initialize a primary user in our application. Create a new file, config.js, in the root directory of our project application, and in it add the code block below:
In this code block, we’ve created an object named oktaAuthConfig. In that, we created an issuer, our BASE_URL, and a clientID from Okta. The redirectUri is the callback that we set up in our Okta dashboard. You can read more about Okta React configuration in the documentation.
Building App Components
Create a Navbar.js file in the src/components/Navbar directory. We’ll create a functional Navbar component with two Okta-assisted links for logging in and signing out. Let’s do that below:
In the code above, we imported useOktaAuth from Okta. Using the useOktaAuth hook, we get access to our Okta state and oktaAuth object. For logging in, we created a function, login, that will call oktaAuth to sign in a user, and another function, logout, to sign them out.
Next, we created a button. In it, we rendered log-in functionality to the user if they’re not authenticated yet, and we rendered log-out functionality if the user is authenticated.
To complete our component, we will add styles and a navbar menu that contains the name of the landlord’s estate, and a link to a profile page for users. Let’s do that below:
Let’s add styles to our application, export the component, and see the result below:
const Section = styled.nav` width: 90%; margin: 1rem auto; display: flex; align-items: center; justify-content: space-between; h2 { font-style: oblique; } a { text-decoration: none; } & ul { display: flex; justify-content: space-between; align-items: center; & li { list-style-type: none; &:hover { text-decoration: underline; } &:nth-last-child(1) { margin-left: 1rem; } a { color: #333; font-weight: 500; font-size: 1rem; text-decoration: none; } & button { font-size: 1rem; color: #333; font-weight: 500; cursor: pointer; outline: none; border: none; background: transparent; } } } `; export default Navbar;![Advertise with Smashing Magazine]()
Building A Room Card Component
In this section, we will build a Card
component to render each room in the estate. We’ll create a simple
component to render the occupant’s name, room number, and the rent due
date.
Let’s do this by first creating a folder named RoomCard in the components folder. In it, add a new file named RoomCard.js, and in that add the code block below:
Here, we’ve created a component, CardWrapper, that contains our props.
This component will be the skeleton component to render the details of
our occupants. We also created styles with styled-components.
Next, we imported styled-components to style this component. We created a form component that takes roomNo, occupantName, rentDueDate, and coverImg as props.
Creating A Data Table #
Now,
we will create an object containing all of the occupants’ information
in our estate application. In the root directory of our application,
create a new file, data.js, and in it let’s add some occupants and their details as an object:
Here, we’ve added a list of occupants and their details.
Creating A User Authentication Hook
Let’s
create a hook to get the user’s details and authenticate them. To do
this, in the root directory of our application, create a new folder, hooks, and in it create a new file, getUser.js. Add the code below:
To complete our application, we will build our Home and Profile pages using the components that we built in this section. Let’s do that now.
Creating The Home Page
Let’s create the home page using our RoomCard
component. This page will get the user’s information when they log in
and display a welcome message. It will also contain all rooms and
details of occupants.
Create a new folder, pages, in the root directory of our application. In it, create a new directory, home, which will contain the file index.js. We’ll be adding code to it shortly.
To handle authentication, we imported useOktaAuth from okta-react. To style our page, we imported styled-components. Let’s create a data.js
file that contains all of the information to be rendered on this page.
We will create a function to get the user’s details from Okta,
and then set it in our application’s state. Then, we will build a
welcome screen and render a list of all occupants of our estate. Let’s
do that:
In the code above, we are checking whether the user is authenticated. If they are, then we display a welcome message with the user’s name and a list of cards containing all of the information about the estate’s occupants. To finish off our application, let’s add some styles:
Here, we’ve added styles to our home page.
In the next section, we will build the profiles page of our primary user.
Building Profiles Page
In
this section, we will build a profiles page for our application. This
page will render the details of users, including username, email
address, name, and a verified email from Okta. In the pages directory of
our application, create a new folder, Profile, and in it create a new file, index.js, adding the code block below:
Similar
to our home page, here we are getting the user’s details from Okta once
they are logged in to the application. We then created a Wrapper component that displays the logged-in user’s details.
To complete our application, let’s add styles to our page.
We added the wrapper component in the code block above and exported our page as a page.
Our app isn’t complete yet because we haven’t configured our Okta authentication to enable a user to log in. So, we will configure a data table of estate occupants in the next section.
Completing Our Application
To complete our application, let’s add routes to our application. Routes enable Okta to know which users to give specific access to. In our case, we will provide all access to the primary user, who has the email address used to register our Okta application.
Let’s create a file, Routes, in the root directory of our application, and add the code snippet below:
In the code above, we created a function, Routes,
that redirects the user to our application once they’ve logged in using
the Okta sign-in widget. We initialized a new Okta app using Okta config. The storage URL sets our Okta log-in. And the security package from Okta handles authentication in our application.
The log-in route handles the user’s log-in. Next, we added routes for our Home, Profile, and Callback pages. And we imported the security package from Okta.
To complete our application, let’s import the routes to our App.js file, as shown below:
We’ve imported the Routes file, which contains the routes for our application and permissions. Our application should now look like the image below.
Conclusion
Authentication
and authorization are two essential features in web applications. This
article has gone through Okta, an identity-as-a-service platform built
for seamless authentication and authorization. We also went through the
process of building an estate manager’s application with React.
Resources #
- Okta Documentation
- “Add User Authentication to Your React App”, Okta Developer
- “Configuring Okta Authentication for React App”, DataHub
No comments:
Post a Comment