What Aud field indicates in JWT Token? - reactjs

Question

Hi I have SPA application and .Net core web API. I have registered two applications in azure AD. Below is my adal config in react app.
/* istanbul ignore file */
import { adalGetToken, AuthenticationContext, UserInfo } from 'react-adal';
import { UserProfile } from '../common/models/userProfile';
class AdalContext {
private authContext: AuthenticationContext | any;
private appId: string = '';
public initializeAdal(adalConfig: any) {
this.authContext = new AuthenticationContext(adalConfig);
this.appId = adalConfig.clientId;
}
get AuthContext() {
return this.authContext;
}
public getToken(): Promise<string | void | null> {
return adalGetToken(this.authContext, this.appId).catch((error: any) => {
if (error.msg === 'login_required' || error.msg === 'interaction_required') {
this.authContext.login();
}
});
}
public acquireToken(callback: Function) {
let user = this.AuthContext.getCachedUser();
if (user) {
this.authContext.config.extraQueryParameter = 'login_hint=' + (user.profile.upn || user.userName);
}
adalGetToken(this.authContext, this.appId).then(
(token) => {
callback(token);
},
(error) => {
if (error) {
if (error.msg === 'login_required') this.authContext.login();
else {
console.log(error);
alert(error);
}
}
}
);
}
public getCachedToken(): string {
return this.authContext.getCachedToken(this.authContext.config.clientId);
}
public getCachedUser(): UserInfo {
return this.authContext.getCachedUser();
}
public getUserProfileData(): UserProfile {
const user = this.authContext.getCachedUser();
const userProfileData = new UserProfile();
if (user) {
userProfileData.name = user.profile.name;
userProfileData.firstName = user.profile.given_name;
userProfileData.surname = user.profile.family_name;
userProfileData.emailAddress = user.userName;
userProfileData.userProfileName = user.profile.name || user.userName;
}
return userProfileData;
}
public logOut() {
this.authContext.logOut();
}
}
const adalContext: AdalContext = new AdalContext();
export default adalContext;
export const getToken = () => adalContext.getToken();
I am able to redirect to Azure AD and able to get token. I token first there is Aud field which has value of client id of azure ad app registered for Front End SPA app.
Below is my code for validating code in .Net core API.
services.AddAuthentication(x =>
{
x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
x.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
options.SaveToken = true;
options.RequireHttpsMetadata = true;
options.Authority = $"{authSettingsWebAPI.Instance}/{authSettingsWebAPI.TenantId}";
options.Audience = azureAuthSettings.ClientId; //client id of Azure AD front end SPA APP
options.TokenValidationParameters = new TokenValidationParameters
{
ValidateAudience = true,
ValidateLifetime = true,
ValidateIssuer = true,
ValidateIssuerSigningKey = false,
ValidateActor = false,
};
});
My Aud field has vale client id of SPA app. I am bit confused here.
Aud should be value of SPA app registered in azure AD or client id of
Web API app registered in azuure AD?
The point here I am confused because I have third App(I would call it Protected API) recently came where my API calls another web API app(Protected API) and I want to have authentication from web API app to protected api app using on behalf of flow.
When we want to implement on behalf of flow I will have url like below
POST https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token
grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer
&client_id={client_id of Web API Gateway application}
&client_secret={client_secret}
&assertion={access token from previous step}
&scope={permission for Protected API application}
&requested_token_use=on_behalf_of
In above url assertion is 1st token I received for SPA and client id is my API app client id. If I pass api app client id and token received from SPA then It gives me error
Azure AD image
Client ID and Aud value in token should be same but In aud I am getting value of client id for SPA application. Can someone help me to understand Aud field I am receiving in token is proper or above url I am framing in wrong way? Can someone help me regarding this? Any help would be appreciated. Thank you
Below is my configurations for ToDoListAPI API Permission
Below is configurations for ToDoListAPI Expose API
Below is configurations for SPA
Postman

Answer 1

Since the access token is for your web API app, you need to specify the scope as api://{client id of the Web API app}/.default for V2.0.
Then the aud in access token whill be {client id of the Web API app}.
You can get the access token in Postman like this:
In my experience, adal is using V1.0 so we don't need to put .default. You should specify the scope in the adalConfig like:
export const adalConfig = {
tenant: '{tenant id}',
clientId: '{client id}',
endpoints: {
api: '{client id of the Web API app}',
},
cacheLocation: 'localStorage',
};
Here is a sample for your reference.