Customize login page
You can customize the login page for an FA application: replace the title, company name, logo and favicon, define the page styling and change the login options.
Contact customer support
Start by contacting FA customer support and specifying the following details in the ticket:
The FA application for which you want to create a login page.
The login options that you want to display on the login page. For example, Swedish BankID, Norwegian BankID, or similar.
You need user access to the Login themes view in the FA Developer app (in test and production environments).
These details help customer support enable a custom login page in your test environment. After receiving a confirmation, you can start customizing the login page in your test environment. When the customization is done and tested, you can apply it to production.
Modify and test the login page
Each custom login page is represented by a folder in the Authentication → Login themes view in FA Developer app. To customize the login page, you can modify the files in the existing folders. Adding new login theme folders is currently not supported.
The /login/login.ftl file reflects what you see on the login page. The FreeMarker template language (FTL) is similar to HTML but it also supports syntax to use conditionals, iterate lists, and so on. Edit this file to change the login page content.
When testing your changes in the login theme folders, remember to click the Reload themes button to apply the changes.
Title and company name
Title and company name are defined as variables at the start of the file. Change them to modify the browser tab title and the login form title.
<#assign company = "FA">
<#assign title = "Log in to ${company}">Username and password fields
The username and password fields can be found in the <div id="kc-form-wrapper"> element. If you want to hide these login options, remove this div and its content.
Third-party identity provider login options
Third-party identity provider login buttons are rendered in the <#list social.providers as p> tag.
By default, active identity provider options are rendered in the #else statement. However, they can modify the code to render them conditionally:
Remove the
#elseclause and specify an#elseif p.alias = "identityProviderAlias"clause for each option, as illustrated below.Replace
identityProviderAliasin the#elseifclauses with the actual aliases of specific identification methods. Thep.aliasandp.displayNameof the identification provider are defined in Keycloak. Request them from FA customer support via a ticket. Note that identity provider aliases in the test and production environments can differ. Make sure you request both and update thelogin.ftlwith the production aliases before deploying to production.
The existing #if and #elseif render “© FA Solutions Oy” admin login options. Don't remove them, as they are needed for the support of your application.
<#if realm.password && social.providers??>
<div id="kc-social-providers" class=" ${properties.kcFormSocialAccountClass!}" style="margin-top: 20px">
<#-- <div id="kc-social-providers" class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"> -->
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 4>${properties.kcFormSocialAccountDoubleListClass!}</#if>">
<#list social.providers as p>
<!-- Do not remove the if clause for the admin login option-->
<#if p.alias = "oidc-auth0">
<li class="${properties.kcFormSocialAccountListLinkClass!}">
<a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId} faAuth"
style="position: fixed; z-index: 1000; right: 20px; bottom: 20px; border: none; box-shadow: none; background: none; height: 20px; width: 160px; opacity: 0.5; transform: translateX(0); font-family: Muli,sans-serif; text-align: right">
© FA Solutions Oy
</a>
</li>
<!-- Add first identity provider option with alias identityProviderAlias-->
<#elseif p.alias = "identityProviderAlias">
<li class="${properties.kcFormSocialAccountListLinkClass!}">
<a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId} ID"
style="position: fixed; z-index: 1000; right: 20px; bottom: 20px; border: none; box-shadow: none; background: none; height: 20px; width: 160px; opacity: 0.5; transform: translateX(0); font-family: Muli,sans-serif; text-align: right">
© FA Solutions Oy
</a>
</li>
<!-- Add second identity provider option with alias identityProviderAlias-->
<#elseif p.alias = "identityProviderAlias">
<li class="${properties.kcFormSocialAccountListLinkClass!}">
<a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId} providerID2"
style="position: fixed; z-index: 1000; right: 20px; bottom: 20px; border: none; box-shadow: none; background: none; height: 20px; width: 160px; opacity: 0.5; transform: translateX(0); font-family: Muli,sans-serif; text-align: right">
© FA Solutions Oy
</a>
</li>
<!-- Do not remove the elseif clause for the admin login option-->
<#elseif p.alias = "oidc-okta">
<li class="${properties.kcFormSocialAccountListLinkClass!}">
<a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId} okta"
style="position: fixed; z-index: 1000; right: 20px; bottom: 20px; border: none; box-shadow: none; background: none; height: 20px; width: 160px; opacity: 0.5; transform: translateX(0); font-family: Muli,sans-serif; text-align: right">
© FA Solutions Oy
</a>
</li>
<!--Remove the else statement if needed-->
<#-- <#else>
<li class="${properties.kcFormSocialAccountListLinkClass!}"><a href="${p.loginUrl}" id="zocial-${p.alias}" class="zocial ${p.providerId}"> <span>${p.displayName}</span></a></li>-->
</#if>
</#list>
</ul>
</div>
</#if>Styling
The login.ftl is styled by the /login/resources/css/login.css. In many cases, it uses CSS variables defined in a separate file – /login/resources/js/theme.js. The theme.js file keeps track of whether the user selected dark or light mode anywhere in the application and updates the CSS variables accordingly. Therefore, you might also need to update the theme.js file to affect the styling of login.ftl.
Logo and favicon
The logo for the login page is specified in the login.css file. To replace the logo, upload a new file to /login/resources/img and change the URL path in login.css to match the path of your uploaded image.
The favicon is located in /login/resources/img. Replace the favicon in this folder with the one of your choice. Note that favicons are cached by the browser. You might need to clear your browser cache to make it load the new favicon.
Text and translations
The login.ftl file gets texts dynamically from the files in the /login/messages folder. The files in this folder are named messages_<lang>.properties, where <lang> refers to a language code (en, sv, fi, nb, or similar). The .properties files contain key-value pairs of codes and translations. You can modify them, and you can also create new files to add new languages.
The file that is used by login.ftl depends on the language of the user. For example, for an English-language user, ${msg("username")} in login.ftl imports the value for the “username” key from the messages_en.properties file.
Apply changes to production
When your changes to the login theme folder are done, and you verified that they are working as expected in your test environment, you are ready to deploy them to production. Double-check that the identity provider aliases that are used in the login.ftl file (if any) match the ones in your production environment.
To deploy the changes to production:
Make sure to backup both your new login theme folder and any current custom login theme folders deployed in production before proceeding.
In your production environment, open the Authentication → Login themes view in the FA Developer app.
Upload the new login theme folder to the root folder. Alternatively, replace the content of an existing (in-use) folder.
Click Reload themes in the upper-right corner.
Contact FA customer support. Inform them that the new folder is deployed and ask them to apply it to the target application client in Keycloak.