Best way to authorize User against Azure AD Group in SPA (React JS)

Question

We want to authorize User against Azure AD group in SPA (React JS); i.e. User allows to access API from SPA if he/she belongs to a Particular group (e.g. testgroup). Found sample code in Msal.JS.

I'm following

• Create UserAgentApplication object
• Call Loginpopup (here graph scope is - "Directory.Read.All")
• Call acquireTokenSilent (get access token to call MS Graph Api)

• Call MS Graph to retrieve all AD Groups where User belong to

  Url to get AD Groups - https://graph.microsoft.com/v1.0/me/memberOf

• After receiving the Ad Groups (user belong to), validating whether User belong to that AD groups ( here - testgroup)

Please suggest me whether I am going in Right direction or any other options are available.

Thanks for your suggestion.

Regards,

Deb

Answer 1

Rather than using msal.js, I used react-aad-msal. It is msal wrapper library and it went much smoother.

I would try this
https://ahsanshares.wordpress.com/2019/10/19/react-app-consuming-microsoft-graph/