codegouvfr / keycloak-theme-dsfr Goto Github PK

Generic Keycloak DSFR theme

License: MIT License

JavaScript 7.78% HTML 5.78% TypeScript 83.70% CSS 2.74%

keycloak-theme-dsfr's Introduction

Keycloak DSFR Theme

Welcome to the Keycloak DSFR Theme, a Keycloak theme with react-dsfr and Keycloakify.
To see the theme in action, please visit the SILL and attempt to log in.
This theme is configurable at runtime, via providing environnement variable, there is no need to clone this repository.
Simply use the bundled .jar file that is released an asset with every new GitHub Release of this project.

For all Keycloak version prior to 23 use: retrocompat-keycloak-theme.jar.
For Keycloak 23: keycloak-theme.jar.
Keycloak 24 and up: Not yet supported, this theme will be updated shortly.

NOTE: Keycloak 22 (and only this specific version) is not fully supported. In this version, only the Login theme works, not the Account theme.

Preview

Here are some screenshots showcasing the theme:

Setup and Configuration

For instruction on how to load the theme into your Keycloak instance you can refer to this guide.

For guidance on how to configure AgentConnect/FranceConnect, you can refer to our comprehensive setup guide.

We have customized the modern register-user-profile.ftl registration page, which allows you to implement features such as an accept list of email domains for registration. This feature can be highly useful, for instance, if you want to restrict registration to your service to public servants. Here is the regular expression used for the SILL's email domain accept list.

Although the register.ftl page has been somewhat superseded by Keycloak, it remains the default. Hence, we recommend enabling the User Profile feature in Keycloak. Instructions for doing so can be found here.

Environment Variables

Several environment variables can be used to tailor the theme to your needs:

DSFR_THEME_HOME_URL
DSFR_THEME_SERVICE_TITLE
DSFR_THEME_BRAND_TOP
DSFR_THEME_TOS_URL
DSFR_THEME_CONTACT_EMAIL

These variables should be made available to the process running Keycloak on your server.

If you are deploying Keycloak on Kubernetes using Helm, here's how to configure your settings:

  ...
  extraEnv: |
    - name: DSFR_THEME_HOME_URL
      value: https://code.gouv.fr
    - name: DSFR_THEME_SERVICE_TITLE
      value: CodeGouv
    - name: DSFR_THEME_BRAND_TOP
      value: "République<br/>Française"
    - name: DSFR_THEME_TOS_URL
      value: '{ "fr": "https://code.gouv.fr/sill/tos_fr.md", "en": "https://code.gouv.fr/sill/tos_en.md" }'
    - name: DSFR_THEME_CONTACT_EMAIL
      value: [email protected]
    - name: JAVA_OPTS
      value: >-
        -Dkeycloak.profile=preview
    ...

i18n

To enable internationalization in the theme you must first enable it in Keycloak.

The theme is available in French and English but there's no language select provided in the login and registration pages.
It's up to you to redirect your user to the login page in the correct language by adding the ui_locales parameter to the login URL. (e.g.: https://sso.code.gouv.fr/auth/realms/sill/protocol/openid-connect/auth?client_id=sill&redirect_uri=https%3A%2F%2Fsill.code.gouv.fr%2Flogin%2Fcallback&response_type=code&scope=openid&ui_locales=fr)

Development

You can refer to the keycloakify-starter repo and the Keycloakify documentation for more information on how to develop a Keycloak theme.

License

This project is licensed under the MIT License, courtesy of the Direction interministérielle du numérique.

keycloak-theme-dsfr's People

Contributors

Stargazers

Watchers

Forkers

hubm sarabourdon-gouv netsoro tbasset this-is-tobi garronej

keycloak-theme-dsfr's Issues

DSFR Theme not implemented on Account pages

Hi,

The DSFR theme is available on the Realm setting pages to be used on "Account theme".
However, when we use it, pages are not themed with the DSFR. Moreover, some pages are broken like in the screenshot.

Expected

Account pages need to be themed with DSFR, but I think a design work must be done before according to SIG requirements.
Should it help to theme pages ?

Many thanks

update to keycloakify 9 to support keycloak 23 and up

La page "Mot de passe oublié" n'est pas affiché même si le switch est activé dans la config d'un realm.

Hello !
On est en train d'investiguer pour passer la gestion de l'auth de l'app Potentiel aux couleurs dsfr en utilisant le thème dsfr.

J'ai remarqué que le lien de la page "Mot de passe oublié" n'était pas affiché même si j'ai bien coché "Forgot password" dans [realm] > Realm settings > Login > Forgot password

Par contre la page s'affiche bien si je coche le switch "User registration"

Je mets des captures d'écrans en PJ pour que ça soit plus explicite

Question à propos des TOS

Est-ce que les TOS ici (qui semblent correspondre à ceux du SILL) sont utilisés et sont utilisés tels quels (afin de savoir s'il faut mettre à jour l'adresse du SILL à l'intérieur) ?

Accessibility issues

Hello, I have noticed several accessibility issues in the theme which limits its usage for me.

During a conversation, I had the opportunity to discuss this with Julien Dauphant, CTO at beta.gouv, who indicated that it might be possible (subject to approval) to allocate funds or human resources to address these issues, so that this great open-source initiative can benefit everyone.

Could you get in touch with him to see how they can contribute to the project?

Thank you for your work.

Cascading logout page not implemented

Hi,

Context

We just implemented this plugin theme in a Keycloak POC with 2 Drupal frontend application.
Those applications are connected to Keycloak using the "drupal/oidc" module (https://www.drupal.org/project/oidc).

Experimented

When we are connected to both applications, then the logout link will redirect to Keycloak logout page which triggers each front logout process.
In that case, the logout screen is quickly displayed using native Keycloak theme (with grey background colors).

Expected

The logout page should be display with the respect of DSFR theme.

Many thanks

Possibility to hide the email / password form on Login

Hi,
At Social Ministries we use Keycloak on internal apps where users can only connect through a custom identity provider (we don't have AgentConnect).
I customized the theme to add the following :

new extra theme that doesn't display login form
add a new env variable to add custom HTML below the login. We needed it to display a video to explain our users how to log in since our custom identity provider is a bit complicated.
small CSS adjustment to add margin on social provider button
add the displayName property from Keycloak realm as HTML title on the login page

I separated these changes into 4 commits. Do you think some or all of these changes could be added to the repo, or is it too custom ?
I'll make a PR, let me know if there's anything I can clean up.

ASSETS

Jar size

codegouvfr/sill#38