title: Returning email address as part of AAD B2C msal.js code
body: <p>How do I correctly configure and code a call to AAD B2C using msal.js that returns email address in the response?</p>
  
  <h1>Background</h1>
  
  <p>I'm looking to write a javascript integration into Shiny, the R dashboard solution, which needs JavaScript integrations of authentication solutions. The dashboard must authenticate against Azure Active Directory B2C. Shiny essentially works as a SPA application.</p>
  
  <h1>AAD B2C config</h1>
  
  <p>I have an AAD B2C user flow:</p>
  
  <pre><code>name: B2C_1_signup_signin
  identity providers: email signup
  user attributes: email address
  application claims:
    email addresses
    identity provider
  </code></pre>
  
  <p>I have an AAD B2C Application:</p>
  
  <pre><code>name: bigdashboard
  app id: a0cfc440-c766-43db-9ea8-40a1efbe22ac
  include web app / web api: yes
  allow implicit flow: yes
  app id uri: https://lduceademo.onmicrosoft.com/big
  include native client: no
  api access:
    Access the user's profile: (All available options selected)
      Acquire an id_token for users (openid)
      Acquire a refresh_token for users (offline access)
    bigdashboard:
      read (read)
      Access this app on behalf of the signed-in user (user_impersonation)
  published scopes:
       read
       user_impersonation
  </code></pre>
  
  <p>Additionally, I've used the App Registrations (preview) to add some api permissions for Microsoft Graph and all have been granted admin consent.</p>
  
  <pre><code>Microsoft Graph:
    User.Read
    email
    offline_access
    openid
    profile
  </code></pre>
  
  <h1>Current JavaScript</h1>
  
  <p>Code amended from the following samples:</p>
  
  <ul>
  <li><a href="https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp" rel="nofollow noreferrer">AAD B2C JS MSAL SPA</a></li>
  </ul>
  
  <p>The <a href="https://alcdn.msauth.net/lib/1.1.3/js/msal.js" rel="nofollow noreferrer">MSAL.js lib v1.1.3</a> is being used to support the below bespoke code.</p>
  
  <pre><code>
      // The current application coordinates were pre-registered in a B2C tenant.
      var appConfig = {
        b2cScopes: ["profile","email","openid", "https://lduceademo.onmicrosoft.com/big/read"]
      };
  
  
      // configuration to initialize msal
      const msalConfig = {
          auth: {
              clientId: "a0cfc440-c766-43db-9ea8-40a1efbe22ac", //This is your client ID
              authority: "https://lduceademo.b2clogin.com/lduceademo.onmicrosoft.com/B2C_1_signup_signin", //This is your tenant info
              validateAuthority: false
          },
          cache: {
              cacheLocation: "localStorage",
              storeAuthStateInCookie: true
          }
      };
  
      // instantiate MSAL
      const myMSALObj = new Msal.UserAgentApplication(msalConfig);
  
      // request to signin - returns an idToken
      const loginRequest = {
          scopes: appConfig.b2cScopes
      };
  
      // request to acquire a token for resource access
      const tokenRequest = {
          scopes: appConfig.b2cScopes
      };
  
      // signin and acquire a token silently with POPUP flow. Fall back in case of failure with silent acquisition to popup
      function signIn() {
          myMSALObj.loginPopup(loginRequest).then(function (loginResponse) {
              getToken(tokenRequest).then(updateUI);
          }).catch(function (error) {
              console.log(error);
          });
      }
  
      //acquire a token silently
      function getToken(tokenRequest) {
          return myMSALObj.acquireTokenSilent(tokenRequest).catch(function(error) {
            console.log("aquire token popup");
            // fallback to interaction when silent call fails
            return myMSALObj.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
            }).catch(function(error){
              console.log("Failed token acquisition", error);
          });
        });
      }
  
      // updates the UI post login/token acqusition
      function updateUI() {
        const userName = myMSALObj.getAccount().name;
        console.log(myMSALObj.getAccount());
        console.log("User '" + userName + "' logged-in");
  
            $('.signin').toggleClass('hidden', true);
          $('.signout').toggleClass('hidden', false);
  
         Shiny.setInputValue('message', userName);
  }
  
      // signout the user
      function logout() {
        // Removes all sessions, need to call AAD endpoint to do full logout
        myMSALObj.logout();
      }
  </code></pre>
  
  <h1>Current response</h1>
  
  <p>From this I get back an Account object that shows up in the console like:</p>
  
  <pre><code>accountIdentifier: "ddc90829-f331-4214-8df1-0cf6052f4b61"
  environment: "https://lduceademo.b2clogin.com/c1138a05-4442-4003-afc7-708629f4554c/v2.0/"
  homeAccountIdentifier: "ZGRjOTA4MjktZjMzMS00MjE0LThkZjEtMGNmNjA1MmY0YjYxLWIyY18xX3NpZ251cF9zaWduaW4=.YzExMzhhMDUtNDQ0Mi00MDAzLWFmYzctNzA4NjI5ZjQ1NTRj"
  idToken:
    aud: "a0cfc440-c766-43db-9ea8-40a1efbe22ac"
    auth_time: 1575368495
    exp: 1575372095
    iat: 1575368495
    iss: "https://lduceademo.b2clogin.com/c1138a05-4442-4003-afc7-708629f4554c/v2.0/"
    nbf: 1575368495
    nonce: "0933fc11-e24f-4ce2-95e2-0afe9bcc1d72"
    sub: "ddc90829-f331-4214-8df1-0cf6052f4b61"
    tfp: "B2C_1_signup_signin"
    ver: "1.0"
  name: undefined
  sid: undefined
  userName: undefined
  </code></pre>