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.

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

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

• javascript
• reactjs
• keycloak

2 Answers 2

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

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