Retrieve Custom Attribute from JavaScript (using Javascript Adapter) Keycloak

Question

I have a keycloak user with custom attributes like below.

I use Reactjs for front-end. I want to retrieve the custom attribute from the javascript side. Like this answer states.

https://stackoverflow.com/a/32890003/2940265

But I can't find how to do it on the javascript side.

I debugged in Chrome but I can't find a suitable result for custom attributes.

Please help

score 13 · Accepted Answer · answered Nov 12 '18 at 12:34

I found the answer.

I will post here, because someone may find it useful.

Well, You can add custom attributes to the user but you need extra configurations to retrieve it from the javascript side. For Beginner ease, I will write the answer from Adding customer to retrieving the attribute from javascript (in my case react js).

Let's add custom attributes to a user.

login into keycloak and choose your realm (if you have multiple realms unless you will automatically login to realm)

After that select Users -> View all users Select your user in my case it's Alice Select Attributes and add custom attributes (in my case I added custom attribute call companyId like below)

Now click Save

Now we have to Map Custom attribute with our keycloak client. To front end to use keycloak you must have client in Clients (left side bar) If you haven't you have to configure a client for that. In my case my client is test-app

Therefor select Clients -> test-app -> Mappers Now we have to create Mapper. Click Create

For Token Claim Name you should give your custom attributes key (in my case it is companyId) for my ease, I use companyId for Name, Realm Role prefix, Token Claim Name. You should choose User Attribute in Mapper Type and String for Claim JSON Type

After that click Save. Now you can get your custom attribute from javascript.

let say your keycloak JavaScript object is keycloak, you can get companyId using keycloak.

let companyId = keyCloak.idTokenParsed.companyId;

sample code would be like below (my code in react.js)

keyCloak.init({
    onLoad: 'login-required'
}).success(authenticated => {
    if (authenticated) {
        if (hasIn(keyCloak.tokenParsed, 'realm_access')) {
            if (keyCloak.tokenParsed.realm_access.roles === []) {
                console.log("Error: No roles found in token")
            } else {
                let companyId = keyCloak.idTokenParsed.companyId;
            }
        } else {
            console.log("Error: Cannot parse token");
        }
    } else {
        console.log("Error: Authentication failed");
    }
}).error(e => {
    console.log("Error: " + e);
    console.log(keyCloak);
});

Hope somebody find this answer useful, because I could find an answer for JavaScript. Happy coding :)

can you please tell me how to get keycloak instance? Is that also available in version 14.x.x or higher? — xbmono, Aug 26 '21 at 22:59

score 4 · Answer 2 · answered May 21 '19 at 13:32

4

The attributes can be retrieved via the user profile:

keycloak = ... // Keycloak instance

keycloak.loadUserProfile().success(function(profile) {
    let companyId = profile.attributes.companyId[0];
    alert('Company Id: ' + companyId);
}).error(function() {
    alert('Failed to load user profile');
});

Each attribute is an array of strings. So unless you have several company IDs, the array will have a length of 1 and the relevant data is in element 0.

In addition to custom attrbutes, the following elements are available as part of the user profile:

id
username
email
firstName
lastName
enabled
emailVerified
totp
createdTimestamp

answered May 21 '19 at 13:32

Codo

75,595
17
168
206

Hi codo, is there a mapper for the attribute to be return in value instead of array? Such as companyId instead of companyId[0] – cYee Nov 02 '21 at 05:36
1

If you retrieve the attribute via the profile as shown in my answer, no mapper is involved. So it's always an array. That's how the Keycload data model is. But I don't see why this is a problem. If you want to retrieve the attribute via ID or access token, then a mapper is needed and it add the attribute as a value (instead of an array). See Menuka Ishan's answer for details. – Codo Nov 02 '21 at 07:41
It is not a problem,just that I have a mapper for token which return value, and admin is returning array, which maybe confusing. still Thanks for that. – cYee Nov 02 '21 at 15:09
Hi, Codo. Mind if I ask do you know the answer for this? https://stackoverflow.com/questions/60300891/keycloak-api-best-way-to-get-users-by-a-list-of-ids – cYee Nov 07 '21 at 16:14
How do you think it is related to this question? – Codo Nov 07 '21 at 22:31
Nope, it does not link, just wonder that you might have an answer for that. – cYee Nov 08 '21 at 01:59

Retrieve Custom Attribute from JavaScript (using Javascript Adapter) Keycloak

2 Answers2

Linked