Finding Azure/AD groups with React-AAD-MSAL

Question

I have integrated basic authentication with the React-Aad-MSAL client into a my react-app which allows me to get things like the users name and email successfully. Here in a component I wanted to check the users groups before displaying some data.

import React, { useContext } 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 { RootStoreContext } from '../../../app/stores/rootStore';

const PurchasePipelineDashboard: React.FC = () => {
    const rootStore = useContext(RootStoreContext)
    const {
        idTokenClaimsAction } = rootStore.serverCatalogStore;

    return (
        // <Container style={{marginTop:'7em'}}>
        //     <Header content="Purchase Pipeline" />
        // </Container>
        <AzureAD provider={authProvider} >
        {({
          accountInfo,
          authenticationState,
          error
        }: IAzureADFunctionProps) => {
          return (
            <React.Fragment>
              {authenticationState === AuthenticationState.Unauthenticated && (
                  <h1>Oooo weee!</h1>
              )}
            </React.Fragment>
          );

        }}
      </AzureAD>
    )   
}

export default observer(PurchasePipelineDashboard);

My question is; how would I go about gathering what groups the user is in? I have checked the accountInfo.account.idTokenClaims, but none of those return tokens. I see other tutorials using Graph, but do I actually need both libraries? Any help would be greatly appreciated!

score 1 · Accepted Answer · answered Jun 10 '20 at 18:21

1

You have two options here, you can either add them to the claims in the token as per here: https://learn.microsoft.com/en-us/azure/active-directory/develop/active-directory-optional-claims#configuring-groups-optional-claims but there are limitations, such as it will only return something like 150-200 groups max.

or you can make a separate graph api call to get users groups. Here's an example of how to call graph with react https://github.com/microsoftgraph/msgraph-training-reactspa

You would be looking at the getmembergroups endpoint of graph for this: https://learn.microsoft.com/en-us/graph/api/user-getmembergroups?view=graph-rest-1.0&tabs=http

answered Jun 10 '20 at 18:21

alphaz18

2,610
1
5
5

So I have configured per your first link, and am still getting undefined on the accountInfo.jwtaccesstoken. From what I'm reading I need to be using MSAL 2.0 for auth flow, does React-AAD-MSAL support that out of the box? Looking at the "Notes about authorization flow" https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration#redirect-uri-msaljs-20-with-auth-code-flow – Parakoopa Jun 11 '20 at 19:55
i don't think react-aad-msal is from microsoft. https://github.com/syncweek-react-aad/react-aad/tree/5015337ef1eaa6d29822b207ddd2efeedc28caef#cd-sample-applications I followed the sample there, to run with yarn, the sample shows basically some diagnostics, you can log in, then it gives you the id token, you can take the id token and plug it into jwt.ms it decodes the token and shows you the claims, I tested it and it does show the group claims if you set it up in the app registration for the group claim. strangely enough I can't get accesstoken from the sample too. Try accountInfo.jwtIdToken – alphaz18 Jun 12 '20 at 03:08
I think our users have too many groups - we don't see any groups just "hasgroups:true". – Parakoopa Jun 12 '20 at 13:44
ya, according to here: https://stackoverflow.com/questions/45501568/azure-jwt-with-property-hasgroups-true-instead-of-groups-property-object apparently if using authorization code/ implicit grants, then limit is 6. if using others its like 150-200. – alphaz18 Jun 12 '20 at 13:59
looks like next easiest thing you can do is going the graph route – alphaz18 Jun 12 '20 at 14:00
So I need to use just the standard MSAL library, then make calls to Graph? – Parakoopa Jun 12 '20 at 14:13
that's what I'd do, but there is likely a way to do it with that react-aad-msal wrapper, as per here you can retrieve the token https://www.npmjs.com/package/react-aad-msal#refreshing-access-tokens – alphaz18 Jun 12 '20 at 14:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215823/discussion-between-parakoopa-and-alphaz18). – Parakoopa Jun 12 '20 at 14:29

Finding Azure/AD groups with React-AAD-MSAL

1 Answers1