I am securing my React Apps and I want to use the wrapper function below to insure that the app only gets rendered when there is a successful login. I am separating the Login from future MSAL token requests because I perceive Login to be a boolean in that you are logged in or you are not logged in. If a later MSAL request requires my user to "re-login" I will call this function to reload the app:


This code is for React Apps only. I am only securing the app not the endpoints. This code may be used in apps that only access public endpoints.

Sample Usage:

import { WrapWithMSAL } from './MSAL_Utils'

// Will handle Auth and then render App
WrapWithMSAL(() =>
    <App />

This is the Wrapper function:

    import { Configuration, UserAgentApplication, AuthenticationParameters,
    AuthResponse, Logger, LogLevel, } from 'msal'

    // Hold the render CBR while Authenticating
    let appRender:CallableFunction = ()=>{}

    // Wrapper function to secure the Rendering of the React App
    export const WrapWithMSAL = (callbackRtn:CallableFunction) => {
      appRender = callbackRtn;
      if (!MSALAuthAgent.getAccount())
        // Set the MSAL CBR specifically to Login Handler
        const msalAuthParams: AuthenticationParameters = {
          scopes: regScopes
        // Popup AD B2C Login, 
      else // Login was retrieved from Session Cache
        appRender(); // Start the app
    // Callbacks passed to MSAL
    * Called when the user has successfully logged in
    * (the account object is created at the time of successful login)
    * or null when no state is found
    * @returns {@link Account} - the account object stored in MSAL
    const msalLoginResultCallback = (error: any, response: any) => {
      if (error) {
      else {
        appRender(); // Start the app

    // MSAL Specifications
    const configuration: Configuration = {
      auth: {
        clientId: "AZURE_APPLICATION_ID",
        redirectUri: "https://myspa.mysite.com",
        validateAuthority: false,
      cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: true,
      system: {
        logger: new Logger((logLevel, message, containsPii) => {
          console.log("[MSAL]: ", message)
        }, {
          level: LogLevel.Verbose,
          piiLoggingEnabled: false

   const regScopes : ['read.scope'];
   const MSALAuthAgent = new UserAgentApplication(configuration);
   export default MSALAuthAgent;

My question is does this approach secure my app?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.