|
1 | | -<p align="center"> |
2 | | - <i>🚀 <a href="https://keycloakify.dev">Keycloakify</a> v11 starter 🚀</i> |
3 | | - <br/> |
4 | | - <br/> |
5 | | -</p> |
| 1 | +# Keycloak DSFR Theme |
6 | 2 |
|
7 | | -This starter is based on Vite. There is also [a Webpack based starter](https://github.com/keycloakify/keycloakify-starter-webpack). |
| 3 | +Welcome to the Keycloak DSFR Theme, a Keycloak theme with [react-dsfr](https://github.com/codegouvfr/react-dsfr) and [Keycloakify](https://www.keycloakify.dev/). |
| 4 | +To see the theme in action, please visit [the SILL](https://sill-preprod.lab.sspcloud.fr/) and attempt to log in. |
| 5 | +This theme is configurable at runtime, via providing environnement variable, there is no need to clone this repository. |
| 6 | +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). |
8 | 7 |
|
9 | | -# Quick start |
| 8 | +> NOTE: Keycloak 22 (and only this specific version) is not fully supported. In this version, only the Login theme works, not the Account theme. |
10 | 9 |
|
11 | | -```bash |
12 | | -git clone https://github.com/keycloakify/keycloakify-starter |
13 | | -cd keycloakify-starter |
14 | | -yarn install # Or use an other package manager, just be sure to delete the yarn.lock if you use another package manager. |
15 | | -``` |
| 10 | +## Preview |
16 | 11 |
|
17 | | -# Testing the theme locally |
| 12 | +Here are some screenshots showcasing the theme: |
18 | 13 |
|
19 | | -[Documentation](https://docs.keycloakify.dev/testing-your-theme) |
| 14 | + |
| 15 | + |
| 16 | + |
20 | 17 |
|
21 | | -# How to customize the theme |
| 18 | +## Setup and Configuration |
22 | 19 |
|
23 | | -[Documentation](https://docs.keycloakify.dev/customization-strategies) |
| 20 | +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). |
24 | 21 |
|
25 | | -# Building the theme |
| 22 | +For guidance on how to configure ProConnect/FranceConnect, you can refer to our comprehensive [setup guide](https://github.com/codegouvfr/sill-docs/blob/main/deploying.md#installing-keycloak). |
26 | 23 |
|
27 | | -You need to have [Maven](https://maven.apache.org/) installed to build the theme (Maven >= 3.1.1, Java >= 7). |
28 | | -The `mvn` command must be in the $PATH. |
| 24 | +### Environment Variables |
29 | 25 |
|
30 | | -- On macOS: `brew install maven` |
31 | | -- On Debian/Ubuntu: `sudo apt-get install maven` |
32 | | -- On Windows: `choco install openjdk` and `choco install maven` (Or download from [here](https://maven.apache.org/download.cgi)) |
| 26 | +Several environment variables can be used to tailor the theme to your needs: |
33 | 27 |
|
34 | | -```bash |
35 | | -npm run build-keycloak-theme |
| 28 | +```env |
| 29 | +DSFR_THEME_HOME_URL |
| 30 | +DSFR_THEME_SERVICE_TITLE |
| 31 | +DSFR_THEME_BRAND_TOP |
| 32 | +DSFR_THEME_TOS_URL |
| 33 | +DSFR_THEME_CONTACT_EMAIL |
36 | 34 | ``` |
37 | 35 |
|
38 | | -Note that by default Keycloakify generates multiple .jar files for different versions of Keycloak. |
39 | | -You can customize this behavior, see documentation [here](https://docs.keycloakify.dev/targeting-specific-keycloak-versions). |
| 36 | +These variables should be made available to the process running Keycloak on your server. |
| 37 | + |
| 38 | +If you are deploying Keycloak on Kubernetes using Helm, here's how to configure your settings: |
| 39 | + |
| 40 | +```yaml |
| 41 | + ... |
| 42 | + extraEnv: | |
| 43 | + - name: DSFR_THEME_HOME_URL |
| 44 | + value: https://code.gouv.fr |
| 45 | + - name: DSFR_THEME_SERVICE_TITLE |
| 46 | + value: CodeGouv |
| 47 | + - name: DSFR_THEME_BRAND_TOP |
| 48 | + value: "République<br/>Française" |
| 49 | + - name: DSFR_THEME_TOS_URL |
| 50 | + value: '{ "fr": "https://code.gouv.fr/sill/tos_fr.md", "en": "https://code.gouv.fr/sill/tos_en.md" }' |
| 51 | + - name: DSFR_THEME_CONTACT_EMAIL |
| 52 | + |
| 53 | + - name: JAVA_OPTS |
| 54 | + value: >- |
| 55 | + -Dkeycloak.profile=preview |
| 56 | + ... |
| 57 | +``` |
40 | 58 |
|
41 | | -# Initializing the account theme |
| 59 | +## i18n |
42 | 60 |
|
43 | | -```bash |
44 | | -npx keycloakify initialize-account-theme |
45 | | -``` |
| 61 | +To enable internationalization in the theme you must first enable it in Keycloak. |
46 | 62 |
|
47 | | -# Initializing the email theme |
| 63 | +The theme is available in French and English but there's no language select provided in the login and registration pages. |
| 64 | +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`) |
48 | 65 |
|
49 | | -```bash |
50 | | -npx keycloakify initialize-email-theme |
51 | | -``` |
| 66 | +## Development |
52 | 67 |
|
53 | | -# GitHub Actions |
| 68 | +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. |
54 | 69 |
|
55 | | -The starter comes with a generic GitHub Actions workflow that builds the theme and publishes |
56 | | -the jars [as GitHub releases artifacts](https://github.com/keycloakify/keycloakify-starter/releases/tag/v10.0.0). |
57 | | -To release a new version **just update the `package.json` version and push**. |
| 70 | +# License |
58 | 71 |
|
59 | | -To enable the workflow go to your fork of this repository on GitHub then navigate to: |
60 | | -`Settings` > `Actions` > `Workflow permissions`, select `Read and write permissions`. |
| 72 | +This project is licensed under the [MIT License](LICENSE), courtesy of the Direction interministérielle du numérique. |
0 commit comments