Okta Integration Package

Description

This package provides integration with Okta for authentication and authorization in your applications. It includes parts for both Nest.js and React.

Table of Contents

• Integration Parts
• Prerequisites
• Installation
• Usage
• Configurations

Integration Parts

• Nest.js: Integration with Nest.js framework.
• React Refine: Integration with React Refine library (antd design).

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js version [v16.19.0] or higher
• npm version [8.19.3] or higher
• Configured Okta service see Configurations part

Installation

To install this package, follow these steps for both back-end and front-end parts of your application:

npm install @fintech-solutions/okta

or

yarn add @fintech-solutions/okta

Usage

React Refine

In your index.tsx add configuration and security contexts:

import { OktaAuth, OktaConfigProvider, Security } from '@fintech-solutions/okta/dist/react';
import React from 'react';

import { createRoot } from 'react-dom/client';

import App from './App';

const container = document.getElementById('root') as HTMLElement;
const root = createRoot(container);

const oktaAuth = {
    issuer: 'https://dev-32351592.okta.com/oauth2/default',
    clientId: '0oajes3r1dnA7lwgs5d7',
    redirectUri: window.location.origin + '/login/callback',
    pkce: true,
    scopes: ['openid', 'email', 'profile'],
};

const oktaConfig = {
    ...oktaAuth,
    apiUrl: 'http://localhost:3000',
};

root.render(
    <React.StrictMode>
        <OktaConfigProvider
            config={oktaConfig}
        >
            <Security
                oktaAuth={new OktaAuth(oktaAuth)}
                restoreOriginalUri={async (_oktaAuth, originalUri) => {
                    window.location.href = originalUri || window.location.origin;
                }}
            >
                <App />
            </Security>
        </OktaConfigProvider>
    </React.StrictMode>,
);

Authenticate with Okta only You need to implement the following routes in your App.tsx component:

import { LoginCallback, oktaAuthProvider, OktaLogin } from '@fintech-solutions/okta/dist/react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<OktaLogin />} />
        <Route path="/login/callback" element={<LoginCallback />} />
        {/* Add other routes here */}
      </Routes>
    </Router>
  );
}

export default App;

Set oktaAuthProvider from @fintech-solutions/okta/dist/react package as your authentication provider

<Refine
    {/* Your providers, resources and options */}
    authProvider={oktaAuthProvider}
>

Combine Okta and default authentication You need to implement the following routes in your App.tsx component:

import { LoginCallback, combinedAuthProvider, CombinedLogin } from '@fintech-solutions/okta/dist/react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<CombinedLogin />} />
        <Route path="/login/callback" element={<LoginCallback />} />
        {/* Add other routes here */}
      </Routes>
    </Router>
  );
}

export default App;

Set combinedAuthProvider from @fintech-solutions/okta/dist/react package as your authentication provider

<Refine
    {/* Your providers, resources and options */}
    authProvider={combinedAuthProvider}
>

Nest.js

To use the Okta integration in your Nest.js application, you need to configure the OktaModule in your module file:

import { Module } from '@nestjs/common';
import { OktaModule } from '@fintech-solutions/okta';
import { AdminAuthController } from './admin-auth.controller';
import { CONFIG } from './config';

@Module({
  imports: [
    OktaModule.register({
      Configuration: {
        audience: 'api://default',
        clientId: '0oajes3r1dnA7lwgs5d8',
        issuer: 'https://dev-32351593.okta.com/oauth2/default',
      },
    }),
  ],
  controllers: [AdminAuthController],
})
export class AdminAuthModule {}

This will set up the necessary Okta configuration for your Nest.js application.

Import OktaAuthService and use it to validate your JWT token:

import { OktaAuthService } from '@fintech-solutions/okta';

export class AuthService {
  constructor(private readonly oktaAuthService: OktaAuthService) {}

  async validate(token: string) {
    try {
      const jwt = await this.oktaAuthService.validateToken(token);
    } catch (error) {
      throw new UnauthorizedException('Invalid token');
    }
  }
}

Configurations

1. Visit https://www.okta.com/ and create an account or login to existing one. Install Okta application (if needed) and login to your admin panel.
2. Navigate to Applications -> Applications.
3. Click Create App Integration.
4. Choose OIDC - OpenID Connect then Single-Page Application and click Next.
5. Enter application name, add logo (if needed). Set Authorization Code as Grant type.
6. Enter redirect URIs:

• sign-in: http://localhost:5143/login/callback
• sign-out: http://localhost:5143 You can add as many URIs as you want. For example you can add stage and production URIs here.

7. Choose Assignments and finish this step.
8. Copy Client ID from Client Credentials - you'll use it for your integration.
9. Copy your domain. 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.
10. Be sure that Proof Key for Code Exchange (PKCE) is checked.
11. Go to theAssignments. Click Assign in the left top corner. Choose user or group you want to assign to your App.
12. Go to the Security -> API. You need to configure your Authorization Server.
13. Click on your server's name or click on default server.
14. Copy Audience (exapmple: api://default) from Settings tab.
15. Go to the Access Policies tab. Click Add to add new Policy. If there are already configured policies - you can use them or create your own.
16. Type Policy name, description and assign policy to the clients (all clients by default).
17. Choose your newly created policy and click Add rule.
18. Configure your rule. You can set access and refresh tokens lifetime, scopes, grant types here. Click Create rule after.