Integrate Okta with ReactJS and NodeJS

Prem — Thu, 10 Aug 2023 09:48:16 GMT

Integrate Okta with ReactJS + NodeJS

Introduction

Any web application needs an authentication layer. Either you can build one yourself or integrate with a managed service like Okta.

What is Okta ? As defined in their blogs, Okta connects any person with any application on any device. It is an enterprise-grade, identity management service, built for the cloud, but compatible with many on-premises applications.

Prerequisites

Before we dive into the integration process, make sure you have the following prerequisites:

Node.js: Ensure you have Node.js installed on your development machine. You can download it from the official website.
React Application: Have a React application set up. You can use Create React App or any other React boilerplate.
Node.js Backend: Set up a basic Node.js backend for your application. This backend will handle communication with Okta and user authentication.

Integration Steps for React

Step 1: Create an Okta SPA Application

Visit https://developer.okta.com/ and create an account if you don’t have one already.
Navigate to “Applications” and click “Create App Integration”
Choose sign-in method as “OIDC” and choose “Single-Page App” as the application type.
Configure the application settings. Check Grant type “Authorization Code” and configure the Sign-In and Sign-Out redirect URIs. If your react app is running on port 3000, then modify the sign-in and sign-out URLs accordingly. You can add URLs for all environments (one for localhost development, one for your staging env, etc..)

Once your app is created, note down the client-id (looks something like 0oaabe9nztqcDQiEC5d7) and domain name (can be fetched from your okta url e.g. if your url is dev-98112532-admin.okta.com, then your domain name is dev-98112532.okta.com i.e. without the admin)

Step 2: Setup React Application

Install the Okta React dependencies

npm install @okta/okta-react @okta/okta-auth-js

In your src folder, create a file called oktaConfig.js with following content. Replace clientId, redirectUri, issuer as per your okta app setting.
Scope defines the information that you would like to pass on in your accessToken

export const oktaConfig = {
    clientId: `your-client-id`,
    issuer: `https://your-okta-domain/oauth2/default`,
    redirectUri: `http://localhost:3000/login/callback`, // this makes it so redirects to login if not logged in for secure routes
    scopes: ["openid", "profile", "email"],
    pkce: true,
    disableHttpsCheck: true,
};

Import the oktaConfig.js into your App.jsx. Below is the sample code.

import React from 'react'
import { Route, Routes, useNavigate } from 'react-router-dom';

import store from './store';
import { Provider } from 'react-redux';

import Authenticated from './components/Authenticated';
import { Security, LoginCallback } from "@okta/okta-react";
import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
import { oktaConfig } from "./oktaConfig";
const oktaAuth = new OktaAuth(oktaConfig);

const App = () => {
  const navigateTo = useNavigate();
  const restoreOriginalUri = async (_oktaAuth, originalUri) => {
    navigateTo(toRelativeUrl(originalUri || "/", window.location.origin));
  };

  return (
    <>
      
        
          
            }>
              } />
            
            
{/* <....other routes that needs to be protected > */}
          
        
      
    
  );
}

export default App

In the above code, you import Security and LoginCallback components from okta-react. Secure all your routes by wrapping the Component with .

Import the oktaConfig and pass it your Security component. Security component also take another parameter called “restoreOriginalUri” which can be used to pass a callback function which gets executed on successful authentication.

We also pass “Authenticated” component to each route that needs to be protected. Below is a sample code. Each time a protected component is called, component will be executed and handles the redirect/authentication flow.

import { useOktaAuth } from '@okta/okta-react';
import React, { useEffect } from 'react';
import { toRelativeUrl } from '@okta/okta-auth-js';
import { Outlet } from 'react-router-dom';

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

  useEffect(() => {
    if (!authState) {
      return;
    }

    if (!authState?.isAuthenticated) {
      const originalUri = toRelativeUrl(window.location.href, window.location.origin);
      oktaAuth.setOriginalUri(originalUri);
      oktaAuth.signInWithRedirect();
    }
  }, [oktaAuth, !!authState, authState?.isAuthenticated]);

  if (!authState || !authState?.isAuthenticated) {
    return (
      
        {/* your loader component*/}
      


    );
  }
  return ();
}

export default Authenticated;

Integration Steps for NodeJS

When you authenticate with Okta on the frontend, you get an accessToken from okta. You need to pass this accessToken on your API calls to the backend. On the backend side, we validate this token and allow for the protected backend routes to be consumed. By this way, we ensure both frontend and backend are protected using Okta.

Step 1: Setup NodeJS backend

Install okta jwt-verifier. Navigate to your NodeJS application folder and execute.

npm install @okta/jwt-verifier

In your nodeJs app’s root folder, create an .env file with the following information (or) add to your existing .env if you have one already. Update the OKTA_DOMAIN, it is the same as what you entered in your react app.

# Okta Config
OKTA_DOMAIN="Your-Okta-Domain"
AUTH_SERVER_ID="default"
AUDIENCE="api://default"

Create a folder named “middleware” and in that create “oktaVerifier.js” with following content.

import OktaJwtVerifier from '@okta/jwt-verifier';
import dotenv from 'dotenv';
dotenv.config()

const OKTA_DOMAIN = process.env.OKTA_DOMAIN;
const AUTH_SERVER_ID = process.env.AUTH_SERVER_ID;

export const oktaJwtVerifier = new OktaJwtVerifier({
  issuer: `https://${OKTA_DOMAIN}/oauth2/${AUTH_SERVER_ID}`
});

Create a file named “authRequired.js” with following content. In this we get the accessToken from Auth Header passed from frontend react. This token is validated using oktaJwtVerifier.

import { oktaJwtVerifier } from './oktaVerifier.js';
import dotenv from 'dotenv';
dotenv.config()

export const oktaAuthRequired = (req, res, next) => {
  const authHeader = req.headers.authorization || '';
  const match = authHeader.match(/Bearer (.+)/);


  if (!match) {
    res.status(401);
    return next('Unauthorized');
  }
  const accessToken = match[1];
  const audience = process.env.AUDIENCE;
  return (
    oktaJwtVerifier
      .verifyAccessToken(accessToken, audience)
      .then((jwt) => {
        req.jwt = jwt;
        next();
      })
      .catch((err) => {
        res.status(401).send(err.message);
      })
  );
};

Pass the authRequired.js as a middleware to all your backend routes in NodeJS. In the below example, we have a backend API called “myApi” which is protected using “oktaAuthRequired” imported from “authRequired.js”

import express from "express";
import { oktaAuthRequired } from "../middleware/authRequired.js";
const router = express.Router();

import { myController } from "../controllers/Controller.js";

router.post("/myApi", oktaAuthRequired, myController)

export default router;

Summary

Here we saw how to integrate Okta with an application that uses React and NodeJS.

To achieve this, we created a SPA app in the Okta developer portal. clientId and redirectURIs created in SPA app are used in the react app. Unauthenticated users are redirected to Okta login page and upon successful authentication, they are redirected to the callback URL (or a landing page) with an okta token (identityToken and accessToken).

To make sure that the backend APIs are protected as well using okta app, in every API call we pass the accessToken. We use okta’s jwt-verifier module to verify the accessToken passed from UI is valid.

By this both ReactJS and NodeJS apps are protected by Okta!

Thank You!

Prem

Follow me here

Stories by Prem on Medium