Azure-Samples / ms-identity-ciam-javascript-tutorial

CIAM JavaScript samples
MIT License
26 stars 37 forks source link

fixed an issue to enable claim to display, if it contains an array value #72

Open juhaalhojoki opened 8 months ago

juhaalhojoki commented 8 months ago

Purpose

I noticed that when I setup my custom authentication provider to return an array of values in a claim, the SPA App did not display them causing some confusion that my custom authentication provider is doing something that is not allowed. Custom roles missin: image However when checking the token with jwt.ms, I noticed that the claim is there with the values the custom claims provider added: image Figured out why the React SPA App was not showing a claim with an array value and was able to fix it: image

Does this introduce a breaking change?

[ ] Yes [X] No

Pull Request Type

What kind of change does this Pull Request introduce?

[X] Bugfix [ ] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Documentation content changes [ ] Other... Please describe:


## How to Test
*  Get the code
*  Setup a custom claims provider to return multiple customRoles like the sample in this article illustrates
https://learn.microsoft.com/en-us/entra/identity-platform/custom-extension-get-started?context=%2Fazure%2Factive-directory%2Fexternal-identities%2Fcustomers%2Fcontext%2Fcustomers-context&tabs=entra-admin-center%2Chttp at 1.2 Edit the function
![image](https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial/assets/17412854/a386374a-f6e1-40eb-a445-b8f3a830b428)
*  Notice that the React SPA App now is able to display the customRoles with a comma separated values of the array. Just like the jwt.ms displays the claim.

git clone [repo-address] cd [repo-name] git checkout [branch-name] npm install


* Test the code
<!-- Add steps to run the tests suite and/or manually test -->


## What to Check
Verify that the following are valid
* ...

## Other Information
<!-- Add any other helpful information that may be needed here. -->