Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codegouvfr/keycloak-theme-dsfr
Generic Keycloak DSFR theme
https://github.com/codegouvfr/keycloak-theme-dsfr
Last synced: about 1 month ago
JSON representation
Generic Keycloak DSFR theme
- Host: GitHub
- URL: https://github.com/codegouvfr/keycloak-theme-dsfr
- Owner: codegouvfr
- License: mit
- Created: 2023-07-31T00:45:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-28T10:51:21.000Z (7 months ago)
- Last Synced: 2024-05-29T02:20:07.408Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 9.36 MB
- Stars: 15
- Watchers: 2
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Keycloak DSFR Theme
Welcome to the Keycloak DSFR Theme, a Keycloak theme with [react-dsfr](https://github.com/codegouvfr/react-dsfr) and [Keycloakify](https://www.keycloakify.dev/).
To see the theme in action, please visit [the SILL](https://sill-preprod.lab.sspcloud.fr/) 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](https://github.com/codegouvfr/keycloak-theme-dsfr/releases).
- For all Keycloak version prior to 23 use: [retrocompat-keycloak-theme.jar](https://github.com/codegouvfr/keycloak-theme-dsfr/releases/latest/download/retrocompat-keycloak-theme.jar).
- For Keycloak 23: [keycloak-theme.jar](https://github.com/codegouvfr/keycloak-theme-dsfr/releases/latest/download/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](https://docs.keycloakify.dev/importing-your-theme-in-keycloak).
For guidance on how to configure AgentConnect/FranceConnect, you can refer to our comprehensive [setup guide](https://github.com/codegouvfr/sill-docs/blob/main/deploying.md#installing-keycloak).
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](https://github.com/codegouvfr/keycloak-theme-dsfr/blob/9cee4b7f75d9e65dd581c52c8b818048ab6ad1aa/userProfile.json#L12) 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](https://docs.keycloakify.dev/realtime-input-validation).
### Environment Variables
Several environment variables can be used to tailor the theme to your needs:
```env
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:
```yaml
...
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
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](https://github.com/keycloakify/keycloakify-starter) and the [Keycloakify documentation](https://docs.keycloakify.dev) for more information on how to develop a Keycloak theme.
# License
This project is licensed under the [MIT License](LICENSE), courtesy of the Direction interministérielle du numérique.