title: Get list of Microsoft Azure AD group names using MSAL library in Angular 8
body: <p>I am working on an Angular 8 application that is trying to retrieve list of all the Microsoft AD groups available to the logged in user.
  Previously, I was working on authenticating a user using MSAL library and was successfully able to get the following values:</p>
  <ul>
  <li>access token</li>
  <li>idToken</li>
  <li>homeIdentifier</li>
  <li>expiresIn</li>
  </ul>
  <p>My MSAL configuration is as under:</p>
  <pre><code>export function MSALAngularConfigFactory(): MsalAngularConfiguration {
    var isIE = window.navigator.userAgent.indexOf(&quot;MSIE &quot;) &gt; -1 ||
      window.navigator.userAgent.indexOf(&quot;Trident/&quot;) &gt; -1;
    return {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
        'group.Read.All'
      ],
      unprotectedResources: ['https://www.microsoft.com/en-us/'],
      protectedResourceMap: [
        ['https://graph.microsoft.com/v1.0/me', ['user.read']],
        ['https://graph.microsoft.com/v1.0/groups', ['group.read.all']]
      ]
    };
  }
  </code></pre>
  <pre><code>export function MSALConfigFactory(): Configuration {
    var isIE = window.navigator.userAgent.indexOf(&quot;MSIE &quot;) &gt; -1 ||
      window.navigator.userAgent.indexOf(&quot;Trident/&quot;) &gt; -1;
    return {
      auth: {
        clientId: environment.clientId,
        authority: environment.authority,
        validateAuthority: true,
        redirectUri: environment.redirectUrl,
        postLogoutRedirectUri: environment.redirectUrl,
        navigateToLoginRequestUrl: true,
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE,
      }
    };
  }
  </code></pre>
  <p>When I call <strong>getAccount().idTokenClaims['groups']</strong> method of MSAL, it returns me the array of groups with just some identifier values which is not my requirement. I need an array of AD group names.</p>
  <p>I implemented MicrosoftGraph Library too for getting groups using the following API:</p>
  <pre><code>fetch('https://graph.microsoft.com/v1.0/groups', {
       headers: {
           'Authorization': 'Bearer ' + {access_token},
           'Content-Type': 'application/json',
       }
   }).then(res =&gt; { console.log(res); });
  </code></pre>
  <p>The above code always results in error stating :
  <strong>401 (Unauthorized)</strong></p>
  <p>I have tried multiple solutions from Microsoft Graph including the following:</p>
  <pre><code>const msalConfig = {
        auth: {
          clientId: clientId, // Client Id of the registered application
          redirectUri: &quot;https://localhost:4200&quot;,
        }
   };
   const graphScopes = [&quot;user.read&quot;, &quot;group.read.all&quot;]; // An array of graph scopes
   const msalApplication = new UserAgentApplication(msalConfig);
   const options = new MSALAuthenticationProviderOptions(graphScopes);
   const authProvider = new ImplicitMSALAuthenticationProvider(msalApplication, options);
  
   this.subscription1 = broadcast.subscribe(&quot;msal:loginSuccess&quot;,
        (result) =&gt; {
          //The result has accessToken as null.
          fetch('https://graph.microsoft.com/v1.0/groups', {
            headers: {
              'Authorization': 'Bearer ' + {accessToken},
              'Content-Type': 'application/json',
            }
          }).then(response =&gt; { console.log(response);});
  </code></pre>
  <p>The above code snippet returns an error too stating that :</p>
  <p><strong>CompactToken parsing failed with error code: 80049217</strong></p>
  <p>I have tried a few more solutions but nothing worked for me. I am stuck in it from yesterday.</p>
  <p>Can someone help me find out what can be the best solution for it. Any help will be highly appreciated.</p>
  <p>Thanks in advance.</p>