Msal-react-lite NPM

msal-react-lite

A lightweight Higher Order Component to quickly add MSAL to any React Project

Install

npm install --save msal-react-lite

Usage

Add the appropriate environment variables:

REACT_APP_AAD_APP_CLIENTID
REACT_APP_AAD_DIRECTORY_TENANTID
REACT_APP_AAD_REDIRECT_URI
REACT_APP_AAD_SCOPES

(e.g you could use .env)

REACT_APP_FUNCTION_ENDPOINT=http://localhost:7071
REACT_APP_AAD_APP_CLIENTID=<<YOUR CLIENT ID>>
REACT_APP_AAD_DIRECTORY_TENANTID=<<YOUR TENANT ID>>
REACT_APP_AAD_REDIRECT_URI=http://localhost:5000
REACT_APP_AAD_SCOPES=<<app ID URI>>/<<scope>>

Create a file for your MSAL Configuration:

(the following is a sample to help you get started you'll need to customize to your needs)

\src\config\msal-config.tsx

import {MsalProviderPopupConfig, MsalProviderRedirectConfig}  from 'msal-react-lite';
import * as msal from "@azure/msal-browser";

var clientId = process.env.REACT_APP_AAD_APP_CLIENTID??"missing-client-id";
var tenantId = process.env.REACT_APP_AAD_DIRECTORY_TENANTID??"missing-tenant-id";
var redirectUri = process.env.REACT_APP_AAD_REDIRECT_URI??"missing-redirect-uri";
var scopes = process.env.REACT_APP_AAD_SCOPES??"missing-scopes";

const commonAuthority = `https://login.microsoftonline.com/common`; //allows for anyone to register not just AAD accounts

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const tenantAuthority = `https://login.microsoftonline.com/${tenantId}`; // allows ONLY for Other AAD accounts to register

const appAuthority = commonAuthority; //to allow any user to sign up must choose commonAuthority

// eslint-disable-next-line @typescript-eslint/no-unused-vars
var msalProviderPopupConfig : MsalProviderPopupConfig =  {
  type:"popup",
  msalConfig: {
    auth: {
      clientId: clientId,
      authority: appAuthority,
      redirectUri: redirectUri, 
    }
  },
  silentRequestConfig: {
    scopes:[scopes]
  },
  endSessionRequestConfig:{
  },
  loginRequestConfig:{
    scopes:[scopes]
  }
}

var msalProviderRedirectConfig : MsalProviderRedirectConfig =  {
  type:"redirect",
  msalConfig: {
    auth: {
      clientId: clientId,
      authority: tenantAuthority,
      redirectUri: redirectUri, 
    }
  },
  silentRequestConfig: {
    scopes:[scopes]
  },
  endSessionRequestConfig:{
  },
  redirectRequestConfig: {
    scopes:[scopes]
  }
}

var msalProviderConfig = msalProviderRedirectConfig; 

export default msalProviderConfig;

msal-react-lite uses standard MSAL coniguration options, refer to the doucmention links below for help on configuring to meet your specific needs.

msalConfig: See Microsoft's Documentation
silentRequestConfig: See Microsoft's Documentation
endSessionRequestConfig: See Microsoft's Documentation
loginRequestConfig (loginPopup only):See Microsoft's Documentation
redirectRequestConfig (loginRedirect only):See Microsoft's Documentation

\src\index.tsx

Add Imports

/* .. other import statements .. */
import msalConfig from './config/msal-config'
import MsalProvider from 'msal-react-lite'

Wrap the App component with the MsalProvider component

  <MsalProvider config={msalConfig}>
    <App />
  </MsalProvider>

\src\App.tsx

import React from 'react'

/* .. add the import .. */
import {useMsal} from 'msal-react-lite'

const App = () => {
  /* .. reference methods and isLoggedIn property from context ..*/
  const {login,logout,getAuthToken,getAuthResult,isLoggedIn} = useMsal()
  return (
    <div>
      MSAL Example:<br/>
      {/*  .. can selectively display content if logged in or not */}
      <br/>Login Status: {isLoggedIn?<span>Logged In</span> :<span>Logged Out</span>} <br/>

      {/*  .. can execute login/logout and getAuthToken methods */}
      <button onClick={() => login()}>LogIn</button>
      <button onClick={() => logout()}>LogOut</button>      
      <button onClick={async () => await getAuthToken()}>Get Token</button>
      <button onClick={async () => console.log('AuthResult:',await getAuthResult())}>Get msal.AuthResult</button>
    </div>
  )
}

export default App