Display application name on keycloak login page

Question

I have two applications App1 and App2 which interacts with keycloak for authentication of users.

I want to display application name on keycloak login page.

Eg.: if the user is logging into App1, the keycloak login page should display "Log in to App1". Same should happen for App2 also.

How can this be achieved.?

Answer 1

If you are using a custom login theme, you can access the client name or the client ID in your Freemarker templates as ${client.name} or ${client.clientId} respectively. The client name is probably the best fit for this case: just set it to the name of the app through the Keycloak admin console.

The available Freemarker variables are not well documented unfortunately. You can look through Keycloak's source code (the FreemarkerLoginFormsProvider class in particular) to find what other variables are made available. Look for calls to attributes.put.

Answer 2

If you want to keep both in the same realm, just add the javascript code to a custom theme login page. The client_id is passed as a request parameter to the login page. For instance:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

$(window).load(function(){ 
    var clientName = getParameterByName('client_id');
    var title = document.getElementById('title');
    title.innerHTML += clientName;
});

See also:

• How can I get query string values in JavaScript?
• How to append data to div using JavaScript?
• JavaScript that executes after page load