@corbit/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 @corbit/microsoft-sso-node!

Installation

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

npm

npm install @corbit/microsoft-sso-react

yarn

yarn add @corbit/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 "@corbit/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 "@corbit/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 '@corbit/microsoft-sso-react'

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