Search code examples
reactjsazureazure-active-directoryauth0auth0-connection

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

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

enter image description here

then how It can retrieve this in the application side?

in auth0 sample application it's sharing the following details only

enter image description here

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 />,
});
Solution

  • 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:

    enter image description here

    In Token configuration, I added both family_name and given_name like below:

    enter image description here

    Before generating the access token, please check whether the user has both attributes updated or not like below:

    enter image description here

    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:

    enter image description here

    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:

    enter image description here

    I decoded the above access token in jwt.ms and got below claims:

    enter image description here

    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:

    enter image description here

    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.