Account Theme

Deciding if you need an account theme or not

The first question you want to ask yourself is: "Do I really need an account theme?"

If you're looking to create an account theme just to allow your users to change their password, update account information such as email, phone number, favorite pets, etc., or delete their account, then you do not need an account theme.

There are pages in the login theme for those functions. You only need to add a button to redirect your user to the appropriate page in your main app. Here is how to do it with oidc-spa: Documentation.

An added benefit of not having an account theme is that you will reuse the exact same form that you created for the registration page in the login-update-profile.ftl page.

Consider creating an account theme only if you need to provide advanced account management features to your users, such as connection logs, management of active sessions, file uploads, etc.

Here is a video that explains this in detail:

Choosing an account theme type

Keycloakify provide you two ways to create your own account theme.

You can chose between two implementation of the account theme:

Single Page

Screenshot of the Single Page Account theme

The Single Page theme also refered as account v3 is this the default theme that comes with Keycloak 25. But thanks to Keycloakify's compatiblity layer it works with older Keycloak versions down to 19.

Pros

• Get's all the latest features.

• The base code is maintained by the Keycloak team and automatically integrated into Keycloakify. You're using the real thing, not a fork.

• If you're a React developper you'll feel right at home. It's uing i18n-next and react-router

Cons

• Opting for this option will add a lot of dependencies to your project (i18n-next, react-router-dom, patenrnfly and more).

• CSS level customization beyond overidding the Paternfly CSS variables is not practical, you'll have to customize at the React component level.
• No Storybook integration.

• Only available with React (Angular and Svelte not supported)

To get started with the Single-Page account theme:

Single-Page

Multi Page

This is a fork of the Account v1 maintained by the Keycloakify team.

Pros

• Works exactly the same as the login theme, nothing new to learn.

• Available in React, Angular and Svelte

• Storybook support

• CSS level customization support like in the login theme.

• As it's maintained by us, we can guarenty a certain level of stability in future version of Keycloak.

• Compatible with all Keycloak version.

• Does not add any dependency to your project.

Cons

• Don't come with all the feature out of the box yet. You'll have to use the Keycloak Account REST API if you want to implement the missing features.
• It relies on Java code maintained by us, this code uses Keycloak internal API, you have to trust us to keep maintaining it.

• The default look is a bit dated.

To get started with the Multi-Page account theme:

Multi-Page