How to Implement User Authentication in React Using Okta

Do you want to integrate user authentication into your React applications using Okta? This guide provides a straightforward process for you.

Getting Started with Okta in React

Okta is an identity and access management platform that offers secure authentication and authorization services. Integrating Okta can improve the security and user experience of your app.

To begin, sign up for an Okta Developer account for free on the Okta Developer website. Once registered, create a new application in the Okta Dashboard to obtain the necessary configuration values for your React project.

Setting Up the React App

Next, create a new React app using Create React App, or you can integrate Okta into an existing React project. Install the Okta React SDK by running this command in your project directory:

BashCopy code
npm install @okta/okta-react

Then, configure the Okta React SDK. Create a new file called oktaConfig.js and add the following code:

JavascriptCopy code
import { OktaAuth } from '@okta/okta-auth-js';

const oktaAuth = new OktaAuth({
  issuer: 'https://your-okta-domain.okta.com/oauth2/default',
  clientId: 'your-client-id',
  redirectUri: window.location.origin + '/login/callback',
});

export default oktaAuth;

Replace your-okta-domain and your-client-id with the values from your Okta application configuration. Update your App.js file to include the Okta Security component:

JavascriptCopy code
import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
import oktaAuth from './oktaConfig';

function App() {
  return (
    <Security oktaAuth={oktaAuth}>
      <SecureRoute path="/profile" component={Profile} />
      <Route path="/login/callback" component={LoginCallback} />
      <Route path="/" component={Home} />
    </Security>
  );
}

In this code snippet, the Security component wraps the routes. The SecureRoute component ensures users can access the /profile route only if they are authenticated. The LoginCallback component handles the redirect after a successful login.

Adding User Authentication

Now, let’s add user authentication to our React app. Create a new component called LoginButton.js with the following code:

JavascriptCopy code
import React from 'react';
import { useOktaAuth } from '@okta/okta-react';

const LoginButton = () => {
  const { oktaAuth, authState } = useOktaAuth();

  if (authState.isPending) {
    return <div>Loading...</div>;
  }

  const login = async () => {
    oktaAuth.signInWithRedirect();
  };

  const logout = async () => {
    oktaAuth.signOut();
  };

  return authState.isAuthenticated ? (
    <button onClick={logout}>Logout</button>
  ) : (
    <button onClick={login}>Login</button>
  );
};

export default LoginButton;

In the LoginButton component, the useOktaAuth hook provides access to the Okta authentication state. Users can click the "Login" button to start the sign-in process or the "Logout" button to sign out.

Protecting Routes with Authentication

To protect routes and ensure users are authenticated, you can use the SecureRoute component. Modify your App.js file to include the SecureRoute component for secure routes:

JavascriptCopy code
import { Security, SecureRoute, LoginCallback } from '@okta/okta-react';
import oktaAuth from './oktaConfig';

function App() {
  return (
    <Security oktaAuth={oktaAuth}>
      <SecureRoute path="/profile" component={Profile} />
      <Route path="/login/callback" component={LoginCallback} />
      <Route path="/" component={Home} />
    </Security>
  );
}

In this updated App.js, the SecureRoute component is used for the /profile route. This ensures that only authenticated users can access that route.

This article outlined how to implement user authentication in a React app using Okta. Following these steps allows you to enhance security and user experience in your applications with Okta’s robust authentication services.

Start integrating Okta into your React projects and strengthen your app's security.