question

MathewJames-8093 avatar image
0 Votes"
MathewJames-8093 asked MathewJames-8093 answered

Implementing Azure AD Authentication - React App calling Web API through Azure API management (and with validate-jwt policy)

I am having tough time in implementing Azure AD authentication Successfully for the following scenario. Appreciate your help.

Here is the scenario :- 1) React App --> Utilizing MSAL.js 2.0 --> Calling Azure AD --> Get the Token leveraged this link @azure/msal-react - npm (npmjs.com) - https://www.npmjs.com/package/%40azure/msal-react

2) Validate the token in APIM using validate-jwt policy.

Steps Followed:-

1) Completed two App registrations (One representing SPA and other representing API)
2) Exposed Scope in API-app registration
3) Gave permissions to scope in Client App registration
4) Changed accessTokenAcceptedVersion:2, for getting the v2.0 tokens
5) In Client App registration, in the Authentication Configuration, type is set to SPA (and not to Web)

Here is my problem :- Whenever I make browse my React Client application, after redirecting to Azure AD and after login and when it redirects to my redirect URI, I get the token (F12).

But when I check in jwt.io I can see that my token issuer is sts.windows.net (and not login.microsoftonline.com) and also the version is 1.0 (and not 2.0)

Where am I going wrong ? Please help me.

Couple of other questions:- Will the token generation is affected due to my Web API like CORS in Web API or anything (Or do I need to worry about this step right now ?) Please help me in getting the correct token. Thanks


Here is my Client App registration Manifest :-


{
"id": "9e73f0b1-35d7-49a6-9a77-b81770489c10",
"acceptMappedClaims": null,
"accessTokenAcceptedVersion": 2,
"addIns": [],
"allowPublicClient": true,
"appId": "1685a94-8218-45dd-b88b-d94fc3fc3835",
"appRoles": [],
"oauth2AllowUrlPathMatching": false,
"createdDateTime": "2021-02-26T18:28:25Z",
"disabledByMicrosoftStatus": null,
"groupMembershipClaims": null,
"identifierUris": [],
"informationalUrls": {
"termsOfService": null,
"support": null,
"privacy": null,
"marketing": null
},
"keyCredentials": [],
"knownClientApplications": [],
"logoUrl": null,
"logoutUrl": "https://my-spa-appservice.azurewebsites.net/logout",
"name": "ui-appregistration",
"oauth2AllowIdTokenImplicitFlow": true,
"oauth2AllowImplicitFlow": true,
"oauth2Permissions": [
{
"adminConsentDescription": "User.Read",
"adminConsentDisplayName": "User.Read",
"id": "565546f3-9990-4679-b891-2b819ad65f7f",
"isEnabled": true,
"lang": null,
"origin": "Application",
"type": "User",
"userConsentDescription": "User.Read",
"userConsentDisplayName": "User.Read",
"value": "User.Read"
}
],
"oauth2RequirePostResponse": false,
"optionalClaims": null,
"orgRestrictions": [],
"parentalControlSettings": {
"countriesBlockedForMinors": [],
"legalAgeGroupRule": "Allow"
},
"passwordCredentials": [
{
"customKeyIdentifier": null,
"endDate": "2022-03-05T16:17:04.942Z",
"keyId": "96ecf805-4c67-4cfe-bb12-0832654a7d23",
"startDate": "2021-03-05T16:17:23.684Z",
"value": null,
"createdOn": "2021-03-05T16:17:57.8194561Z",
"hint": "705",
"displayName": "uiappregistration"
}
],
"preAuthorizedApplications": [],
"publisherDomain": "mjtgmail.onmicrosoft.com",
"replyUrlsWithType": [
{
"url": "https://my-spa-appservice.azurewebsites.net",
"type": "Spa"
},
{
"url": "https://my-spa-appservice.azurewebsites.net1",
"type": "Web"
}
],
"requiredResourceAccess": [
{
"resourceAppId": "c0cc9690-695d-4dfb-9495-a9f86c0a1052",
"resourceAccess": [
{
"id": "ad34218f-8a30-4af2-9712-7d2149e88d6b",
"type": "Scope"
}
]
},
{
"resourceAppId": "00000003-0000-0000-c000-000000000000",
"resourceAccess": [
{
"id": "e1fe6dd8-ba31-4d61-89e7-88639da4683d",
"type": "Scope"
}
]
}
],
"samlMetadataUrl": null,
"signInUrl": "https://dev-spa-appservice.azurewebsites.net",
"signInAudience": "AzureADMyOrg",
"tags": [],
"tokenEncryptionKeyId": null
}






azure-ad-msalazure-ad-app-development
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

RahulMetangale-9479 avatar image
0 Votes"
RahulMetangale-9479 answered MathewJames-8093 commented

Hi @MathewJames-8093

try changing Authority string, ref: https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/560

.AddJwtBearer(options => { options.Authority = $"https://login.microsoftonline.com/{Configuration["AzureAd:TenantId"]}/v2.0"; options.Audience = Configuration["AzureAd:ClientId"];

I hope this helps

· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@MathewJames-8093
I just wanted to check in and see if you had any other questions or if you were able to resolve this issue?

0 Votes 0 ·

Not really JamesTran. Also thank you @Rahul for the response.

Can you please help me to cross this hurdle first. Need help on getting version 2.0 token and issuer as https://login.microsoftonline.com/{my-tenant-id}/v2.0.

Let me simplify things.

I have just one App registration. In the Authentication blade I have configured SPA (and not Web). I have changed accessTokenAcceptedVersion = 2 (instead of null).
I have a React app utilizing Azure AD authentication using MSAL.js 2.0 against this Client ID and tenant ID.

After successful sign in, I always get token version as 1.0 and issuer as sts.windows.net (which is not what I wanted). We are using 2.0 for authorize and token end points.

Another issue which I have noticed is when i get the token my scope says User.Read, profile, openid. Why i get all these scopes ? Are these default for 2.0 token ?

I have been struggling to get the 2.0 token. Please please please help me.....


Thanks in advance.

-Mathew




0 Votes 0 ·

I spent some more time and realized that For access token it has issuer as sts.windows.net . But for ID token i get the issuer as https://login.microsoftonline.com/{my-tenant-id}/v2.0.

In my App registration i have Exposed permission for graph API. Here are the scopes defined in Graph ["openid", "profile", "offline_access", "User.Read"].

Although we are passing the same scopes from React App (in MSAL JS Authcofig), while getting the token we get the scopes as ["openid", "profile", "email", "User.Read"].

its not matching No idea how email is added and offline_access is deleted.

Experts - can you please help me...

0 Votes 0 ·
MathewJames-8093 avatar image
0 Votes"
MathewJames-8093 answered

I have finally resolved the issue. It was mostly the scope mismatch. I would say the format of representing the scope in React Application.

Thanks!
-Mathew

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.