paf-auth-wrapper v1.5.2

Introduction

This package is used for ParkAvenue Finance products only.

The package uses ReactJS and also supports Typescript. It contains 1 ReactJS component <AuthenticationProvider> which helps to acquire token and also refresh token 10 minutes before expired.

It takes 3 steps to set up and use this package.

1. Create application on Azure Portal:

You have to create application following this link.

Note: at step 9 in document, the homepage URL is the domain that your application is being served. For example:

• In dev, it can be: http://localhost:3000
• In staging, it can be: https://hercules.phunh.com
• In production tenant, it can be: https://herculesrisk.com

2. Proxy/Rewrites configuration:

1. For dev server (dev and staging environment: NextJS, Vite, etc):
   1. Source: /api/v1/set-ssid => Destination: https://auth.phunh.com/api/v1/set-ssid
   2. Source: /api/v1/get-token-by-session => Destination: https://auth.phunh.com/api/v1/get-token-by-session
2. For gateway (production environment: K8s Ingress, nginx, etc):
   1. Source: /api/v1/set-ssid => Destination: https://auth.pafportal.com/api/v1/set-ssid
   2. Source: /api/v1/get-token-by-session => Destination: https://auth.pafportal.com/api/v1/get-token-by-session

Example:

vercel.json

{
  "rewrites": [
    {
      "source": "/api/v1/set-ssid",
      "destination": "https://auth.pafportal.com/api/v1/set-ssid" // For production
      // "destination": "https://auth.phunh.com/api/v1/set-ssid" // For staging)
    },
    {
      "source": "/api/v1/get-token-by-session",
      "destination": "https://auth.pafportal.com/api/v1/get-token-by-session" // For production
      // "destination": "https://auth.phunh.com/api/v1/get-token-by-session" // For staging
    }
  ]
}

nextjs.config.js

// nextjs.config.js

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/v1/set-ssid',
        destination: 'https://auth.phunh.com/api/v1/set-ssid', // For dev env
      },
      {
        source: '/api/v1/get-token-by-session',
        destination: 'https://auth.phunh.com/api/v1/get-token-by-session', // For dev env
      },
    ];
  },
};

3. Package configuration:

Wrap this component at the top level of your React Application.

This component requires 5 props: AUTH_DOMAIN, CLIENT_ID, ENV, DOMAINS and REDIRECT_URL. Please check the example below for more details on each prop.

Use useAuthentication hook to get tokenData, login and logout from state.

Here is an example:

// example.js

import { AuthenticationProvider, useAuthentication } from 'paf-auth-wrapper';

// This props can only be set if env is "development". if no value provided, https://auth.phunh.com will be used.
// For "staging" env: https://auth.phunh.com
// For "production" env: https://auth.pafportal.com
const AUTH_DOMAIN = undefined;

// client id of application registered in AD B2C tenant:
// tenant for staging/dev: pafb2cdev.onmicrosoft.com
// tenant for production: parkavenuefinanceb2c.onmicrosoft.com
const CLIENT_ID = '';

// Environment mode, can be "development", "staging" or "production"
const ENV = 'development';

// List of domains that cookies will be applied to.
// Available only if env is "development" and is optional.
// If no domains provided, all homepage URL of Azure applications will be used to set cookies.
// Note: This props should be use if you are in development env when you serve your app on localhost
const DOMAINS = [];

// redirect URL that's configured in your Azure AD B2C Application.
// User will be redirected back to this URL after finish authentication.
const REDIRECT_URL = '';

function App() {
  return (
    <AuthenticationProvider
      authDomain={AUTH_DOMAIN}
      clientId={CLIENT_ID}
      redirectUrl={REDIRECT_URL}
      loadingElement={<div>Loading ...</div>} // This props is optional
      env={ENV}
      domains={DOMAINS}
    >
      <MainContent />
    </AuthenticationProvider>
  );
}

export default App;

const MainContent = () => {
  const { login, logout, tokenData } = useAuthentication();
  const onClickLogin = () => {
    login();
  };

  const onClickLogout = () => {
    logout();
  };

  const isAuthenticated = useMemo(() => {
    // Apply your own logic here to check authentication
    if (tokenData) return true;
    return false;
  }, [tokenData]);

  return isAuthenticated ? (
    <div>
      <span>Private Content</span>
      <button onClick={onClickLogout}>Logout</button>
    </div>
  ) : (
    <div>
      <span>Public Content</span>
      <button onClick={onClickLogin}>Login</button>
    </div>
  );
};