@coopah/microsoft-sso-react

This package provides a suite of React components designed to integrate Microsoft Identity Platform authentication into your React applications using the Microsoft Authentication Library (MSAL). It simplifies the setup and usage of MSAL to manage user authentication and session management in a scalable way.

This packages works great together with @coopah/microsoft-sso-node!

Installation

To install the package, run the following command in your project directory:

npm

npm install @coopah/microsoft-sso-react

yarn

yarn add @coopah/microsoft-sso-react

Components

The package includes the following components:

1. RoutesWrapper

A provider component that initializes the MSAL instance with custom configurations and wraps the entire part of an application that requires MSAL context.

Props

| Prop | Type | Required | Default | Description | |--------------------------|-------------|----------|------------------|-----------------------------------------------------------------| | clientId | string | Yes | - | Your application's client ID in Azure AD. | | tenantId | string | Yes | - | Your Azure AD tenant ID. | | redirectUri | string | No | /auth-callback | Redirect URI after authentication. | | postLogoutRedirectUri | string | No | /home | URI to navigate after logout. | | cacheLocation | string | No | sessionStorage | Browser storage to cache tokens. | | storeAuthStateInCookie | boolean | No | false | Whether to store the auth state in cookies. | | children | ReactNode | Yes | - | React components that require MSAL context. |

2. AuthCallbackWrapper

This component wraps any child components that require user authentication. It uses MSAL to handle authentication redirects and ensures that the user is logged in before rendering the children.

Props

| Prop | Type | Required | Default | Description | |-----------------|-------------|----------|----------|-------------------------------------------------------------| | handleLogin | function | Yes | - | Function to execute after a successful login. | | loginRoute | string | No | /login | Redirect URI for login. | | errorRoute | string | No | / | Redirect URI for errors. | | children | ReactNode | Yes | - | Child components to render upon successful authentication. |

3. LoginButton

A button component that triggers the MSAL login process when clicked. It displays a styled button that can be customized to match dark or light themes.

Props

| Prop | Type | Required | Default | Description | |-----------------|-------------|----------|----------|-------------------------------------------------------------| | darkMode | boolean | No | true | Indicating whether to use dark mode styling. |

How to use

1. RoutesWrapper

This should be in the file where your routes are located. Probably this will be App.jsx

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";
import { RoutesWrapper } from "@coopah/microsoft-sso-react";
import Login from "./pages/Login";
import AuthCallback from "./pages/AuthCallback";
import Home from "./pages/Home";

function PrivateRoute() {
  // Custom authentication logic
  const isAuth = true;

  if (!isAuth) return <Navigate to="/login" />;

  return <Outlet />;
}

function PublicRoute() {
  return <Outlet />;
}

function App() {
  //Best to store them in an .env file
  //These are required
  const tenantId = ""
  const clientId = ""

  return (
    <BrowserRouter>
      <RoutesWrapper clientId={clientId} tenantId={tenantId}>
        <Routes>
          <Route element={<PublicRoute />}>
            <Route path="/login" element={<Login />} />
            <Route path="/auth-callback" element={<AuthCallback />} />
          </Route>
          <Route element={<PrivateRoute />}>
            <Route path="/home" element={<Home />} />
          </Route>
        </Routes>
      </RoutesWrapper>
    </BrowserRouter>
  );
}

export default App;

2. AuthCallbackWrapper

AuthCallback Page

import React from "react";
import { AuthCallbackWrapper } from "@coopah/microsoft-sso-react";

export default function AuthCallback() {
  const handleLogin = async (token) => {
    try {
      const response = await axios.post(`/auth/microsoft_login`, {
        token,
      });

      //Handle response
    } catch (error) {
      //Handle error
    }
  };

  //handleLogin prop is required

  return (
    <AuthCallbackWrapper handleLogin={handleLogin}>
      <div>AuthCallback</div>
    </AuthCallbackWrapper>
  );
}

3. LoginButton

Login Page

import { LoginButton } from '@coopah/microsoft-sso-react'

export default function Login() {
  return (
    <div>
        <LoginButton />
    </div>
  )
}