Help with getting groups from accountInfo.account.IdTokenClaims

[Reverendheat]

trafficstars

Library versions "msal": "^1.3.1", "react-aad-msal": "^2.3.5",

Describe the bug I don't know if this is exactly a bug, but using the example here https://github.com/syncweek-react-aad/react-aad/blob/master/samples/react-typescript/src/App.tsx, how do you go about getting the groups out of accountInfo.account.idTokenClaims?

Expected behavior In the below component, I should can access things like accountInfo.account.userName, but can't figure out how to iterate over the idTokenClaims. Is there a good example for this?

import React from 'react'
import { observer } from 'mobx-react-lite'
import { Container, Header } from 'semantic-ui-react';
import {
    AzureAD,
    AuthenticationState,
    IAzureADFunctionProps
  } from "react-aad-msal";
import { authProvider } from '../../../app/auth/authProvider';
import { StringDict } from 'msal/lib-commonjs/MsalTypes';
import { stringify } from 'querystring';
import { keys } from 'mobx';

const PurchasePipelineDashboard = () => {
    return (
        <AzureAD provider={authProvider} >
        {({
          accountInfo,
          authenticationState,
          error
        }: IAzureADFunctionProps) => {
          return (
            <React.Fragment>
              {authenticationState === AuthenticationState.Unauthenticated && (
                  <h1>uh oh!</h1>
              )}
                <Container style={{marginTop:50}}>
                    {Object.entries(accountInfo?.account.idTokenClaims).forEach(
                                 ([key, value]) => console.log(key, value);}
                </Container>
            </React.Fragment>
          );

        }}
      </AzureAD>
    )   
}

export default observer(PurchasePipelineDashboard);

To Reproduce

Desktop (please complete the following information): Windows Chrome Version 83.0.4103.97

[thiagomeireless]

This works fine for me:

const claims = Object.entries(accountInfo.account.idTokenClaims);
claims.map(claim => console.log(claim));

Full snippet of my AzureAD:

<AzureAD provider={authProvider} reduxStore={Store}>
  {({login, logout, accountInfo, authenticationState}) => {
    const isInProgress = authenticationState === AuthenticationState.InProgress;
    const isUnauthenticated = authenticationState === AuthenticationState.Unauthenticated;

    if (isUnauthenticated || isInProgress) {
      return (
          <React.Fragment>
              <button className="btn-purple" onClick={login} disabled={isInProgress}>
                LOGIN
              </button>
          </React.Fragment>
      );
    }

    const claims = Object.entries(accountInfo.account.idTokenClaims);
    claims.map(claim => console.log(claim));

    return (
        <React.Fragment>
          <p>Autenticado como: {accountInfo.account.name}</p>
          <button type="button" className="btn-purple" onClick={logout}>
            LOGOUT
          </button>
        </React.Fragment>
    );
  }}
</AzureAD>