Integrate Graph API toolkit avoiding Login component with existing application authenticated with Azure AD using "@azure/msal-angularjs": "^0.1.1"

Question

I am trying to integrate the React based Graph API toolkit with existing application build on Angular JS 1.x . The React application is deployed as a web component in the existing Angular Application.

The existing Angular application is authenticated with Azure AD using "@azure/msal-angularjs": "^0.1.1" , when I integrate my react application having MGT controls in it, they don't work until and unless I explicitly use the Login Component and after Logging In they react application works.

I want to avoid Login Component from my react application as the users are already logged in to the existing angular application using Azure AD.

I did try to use the Simple Provider but no luck. Can someone please share some sample code and provide the right approach to achieve the same. Below the authentication code of the existing Angular Application.

 window.msalApplicationConfig = {
          scopes: ['ChannelMessage.Send','Chat.Read','Chat.ReadWrite','Directory.Read.All','email','Group.Read.All','GroupMember.Read.All','openid','profile','Sites.Manage.All','Sites.Read.All','Sites.ReadWrite.All','Team.ReadBasic.All','TeamSettings.Read.All','TeamSettings.ReadWrite.All','User.Read','User.Read.All','User.ReadBasic.All','User.ReadWrite.All']
        };

        msalAuthenticationServiceProvider.init({
          clientID: appConfig.authContextConfig.clientId,
          redirectUri: window.location.origin + '/#/',
          authority: appConfig.authContextConfig.instance + appConfig.authContextConfig.tenant,
          postlogoutRedirectUri: window.location.origin + '/' + appConfig.authContextConfig.postLogoutRedirectUri
        });

function msalLoginSuccess(config, defer) {
      return function (loginToken) {
        msalAuthenticationService.acquireTokenSilent(window.msalApplicationConfig.scopes).then(function (accessToken) {
          localStorage.setItem('msal_token', accessToken);
          config.extraHeaders[appService.getAuthorizationHeaderName()] = 'Bearer ' + loginToken;
          ajaxService.setGlobalHeader(appService.getAuthorizationHeaderName(), config.extraHeaders[appService.getAuthorizationHeaderName()]);
          defer.resolve();
        });
      }
    }

Simple Provider Code

Providers.globalProvider = new SimpleProvider((scopes:string[]) => { 
    //return accessToken for scopes using your msal instance
    return Promise.resolve(localStorage.getItem('msal_token'));
  
   });

 Providers.onProviderUpdated(()=>{
    if(Providers.globalProvider.state==ProviderState.SignedIn)
{
  console.log("Signed IN");
  setSignedIn(true)

}

Answer 1

Since you are handling authentication, you need to handle state changes of the SimpleProvider when the login state changes. To do this, use the setState setter with the appropriate ProviderState.

Providers.globalProvider.setState(ProviderState.SignedIn)

The components listen for this state and only call the graph when the provider is signed in.