How to retrieve the optional claims of enterprise connection(azure app) - reactjs

Question

in this article its mentioned how it can add optional claims to an azure application
so I enabled the family_name, given_name in following way
then how It can retrieve this in the application side?
in auth0 sample application it's sharing the following details only
import React from "react";
import { Container, Row, Col } from "reactstrap";
import Highlight from "../components/Highlight";
import Loading from "../components/Loading";
import { useAuth0, withAuthenticationRequired } from "#auth0/auth0-react";
export const ProfileComponent = () => {
const { user } = useAuth0();
return (
<Container className="mb-5">
<Row className="align-items-center profile-header mb-5 text-center text-md-left">
<Col md={2}>
<img
src={user.picture}
alt="Profile"
className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
/>
</Col>
<Col md>
<h2>{user.name}</h2>
<p className="lead text-muted">{user.email}</p>
</Col>
</Row>
<Row>
<Highlight>{JSON.stringify(user, null, 2)}</Highlight>
</Row>
</Container>
);
};
export default withAuthenticationRequired(ProfileComponent, {
onRedirecting: () => <Loading />,
});

Answer 1

I tried to reproduce the same in my environment via Postman and got below results:
I created one Azure AD application and assigned API permissions like below:
In Token configuration, I added both family_name and given_name like below:
Before generating the access token, please check whether the user has both attributes updated or not like below:
To get code for access token, I used below authorization request:
https://login.microsoftonline.com/<tenantID>/oauth2/v2.0/authorize?
client_id=<application_id>
&response_type=code
&redirect_uri=https://jwt.ms
&response_mode=query
&scope=openid profile user.read
&state=12345
When I ran the above request in browser, I got code in address bar after authenticating successfully like below:
I generated the access token via Postman using below parameters:
POST https://login.microsoftonline.com/<tenantID>/oauth2/v2.0/token
client_id:<application_id>
grant_type:authorization_code
scope:openid profile user.read
client_secret:secret
redirect_uri:https://jwt.ms
code: code from above request
Response:
I decoded the above access token in jwt.ms and got below claims:
When I used the above token to get user's profile with this query, I got both family_name and given_name like below:
GET https://graph.microsoft.com/oidc/userinfo
Response:
In your case, make sure whether the signed in user has both family_name and given_name properties updated in their profiles or not.
Please check whether the access token includes family_name and given_name claims or not by decoding it.