AuthCodeMSALBrowserAuthenticationProvider.md

Creating an instance of AuthCodeMSALBrowserAuthenticationProvider for a browser application

Note: The AuthCodeMSALBrowserAuthenticationProvider is introduced in version 3.0.0 of Microsoft Graph Client Library

Links for more information -

• npm - @azure/msal-browser
• github - @azure/msal-browser

Steps to use AuthCodeMSALBrowserAuthenticationProvider;

1. Using npm: npm install @azure/msal-browser @microsoft/microsoft-graph-client

   Using html:
   ```html
   <!--Using script tag to include the bundled file or the CDN source-->
   <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.15.0/js/msal-browser.min.js"></script>
   <script src="graph-js-sdk.js"></script>
   <script src="graph-client-msalBrowserAuthProvider.js"></script>
   ```
   

   Reference : MSAL Browser CDN usage

2. Initialize the msal-browserPublicClientApplication instance: Learn more how to initialize msal

3. Following sample shows how to initialize a Microsoft Graph SDK Client instance,

Using npm:

import{PublicClientApplication,InteractionType,AccountInfo}from"@azure/msal-browser";import{AuthCodeMSALBrowserAuthenticationProvider,AuthCodeMSALBrowserAuthenticationProviderOptions}from"@microsoft/microsoft-graph-client/authProviders/authCodeMsalBrowser";constoptions:AuthCodeMSALBrowserAuthenticationProviderOptions: {account: account,// the AccountInfo instance to acquire the token for.interactionType: InteractionType.PopUp,// msal-browser InteractionTypescopes: ["user.read","mail.send"]// example of the scopes to be passed}// Pass the PublicClientApplication instance from step 2 to create AuthCodeMSALBrowserAuthenticationProvider instanceconstauthProvider: newAuthCodeMSALBrowserAuthenticationProvider(publicClientApplication,options),// Initialize the Graph clientconstgraphClient=Client.initWithMiddleware({
authprovider
});

Using CDN or script:

constmsalClient=newmsal.PublicClientApplication(msalConfig);constauthProvider=newMSGraphAuthCodeMSALBrowserAuthProvider.AuthCodeMSALBrowserAuthenticationProvider(msalClient,{
account,// the AccountInfo instance to acquire the token forscopes: ["user.read","mail.send"],interactionType: msal.InteractionType.Popup,});// Initialize the Graph clientconstgraphClient=MicrosoftGraph.Client.initWithMiddleware({ authProvider });