Setting Azure AD B2C Extension in React App using MSAL-react

Question

I have a react app that is using Azure B2C for Authentication. I have set a custom string Extension attribute in the User Flow named 'Partner' I want to assign a value to Partner but have not been able to do it.

I can read all the values for the user with this code:

    const { instance } = useMsal();
    const activeAccount = instance.getActiveAccount();
    console.log('Email Address is  ' + activeAccount.idTokenClaims['emails']);

But I have tried different variations of update or set and cannot find the correct one.

How do I set and update a value of an attribute?

Answer 1

I created one custom extension attribute named Partner and added it in User flow like below:

You can make use of Microsoft Graph API to update value of custom attribute in Azure AD B2C.

I ran below PATCH request in Graph Explorer by signing in with B2C user account like this:

PATCH https://graph.microsoft.com/v1.0/users/<userID>
{
    "extension_<b2cExtensionsAppIDwithouthyphen>_Partner": "partner_value"
}

Response:

You can find the AppID of b2c-extensions app from here:

Now, acquire access token with User.ReadWrite.All permission and use below sample code to run PATCH request on user:

const getResponse = async () => {
const accessToken="eyJ0eXAiOiJKV1QiLCJub2xxxxxxxxxxxxxxxxxxxxx";
const userObjectId = "0cde1630-33d8-4cbe-9fd4-xxxxxxxxxxx";
const requestUrl = `https://graph.microsoft.com/v1.0/users/${userObjectId}`;

const requestBody = {
  "extension_008249d555b3462a8xxxxxxxx_Partner": "partner_value"
};

const requestOptions = {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${accessToken}`
  },
  body: JSON.stringify(requestBody)
};

const response = await fetch(requestUrl, requestOptions);
return response;
}

async function main() {
    const response = await getResponse();
    console.log("Response:",response.status);
  }
  
main();

Response:

To confirm that, I ran user flow by selecting Partner in Application Claim like below:

I got extension_Partner claim successfully in decoded token claims after signing in like below:

To read this value for user, you can add below line in your code like this:

const { instance } = useMsal();
    const activeAccount = instance.getActiveAccount();
    console.log('Email Address is  ' + activeAccount.idTokenClaims['emails']);
    console.log('Partner is  ' + activeAccount.idTokenClaims['extension_Partner']);