keycloak-dsfr
This template has been made thanks to keycloakify. It follows the french design system Système de Design de l'État. You can find guideline here.
Download the theme
The theme is generated from the CI build. You can find the latest version here. Otherwise, you can download the theme manually from the repository.
Run the code locally
Firstly, you have to clone the repository.
git clone https://github.com/SocialGouv/keycloak-dsfr.git # to clone the reposiroy
Secondly, you have to install dependencies.
yarn # to install dep
Then, inside src/kcContext.ts, you will find that file.
export const { kcContext } = getKcContext<
| {
pageId: "register.ftl";
/**
* Defined when you use the keycloak-mail-whitelisting keycloak plugin
* (https://github.com/micedre/keycloak-mail-whitelisting)
*/
authorizedMailDomains: string[];
}
| {
pageId: "login.ftl";
}
>({
/* Uncomment to test outside of keycloak, ⚠️ don't forget to run 'yarn keycloak' at least once */
// mockPageId: "register.ftl",
mockData: [
{
pageId: "register.ftl",
authorizedMailDomains: ["*.gouv.fr"],
},
],
});
You just have to uncomment mockPageId, now you can run the code locally :
yarn start
Add a new page to the theme
If you want to override the default theme, you have to override src/KcApp.tsx, by adding your components in the switch statement.
switch (kcContext.pageId) {
case "login.ftl":
return <Login {...{ kcContext, ...kcProps }} />;
case "register.ftl":
return <Register {...{ kcContext, ...kcProps }} />; // your component
default:
return <KcAppBase {...{ kcContext, ...kcProps }} />;
}
To build and generate the theme, you need to run :
yarn keycloak
You will find the build in the ./build_keycloak/target folder. You also will find different way to test it in the output of the command.
Don't forget to comment mockPageId in src/kcContext.ts if you build the project.
Add the theme to your keycloak instance
You just have to had it to your manifest file.
value.yaml:
extraInitContainers: |
- name: realm-ext-provider
image: curlimages/curl
imagePullPolicy: IfNotPresent
command:
- sh
args:
- -c
- curl -L -f -S -o /extensions/keycloak-dsfr-1.0.1.jar https://github.com/SocialGouv/keycloak-dsfr/releases/latest/download/keycloak-theme.jar
volumeMounts:
- name: extensions
mountPath: /extensions
extraVolumeMounts: |
- name: extensions
mountPath: /opt/keycloak/providers
extraEnv: |
- name: KEYCLOAK_USER
value: admin
- name: KEYCLOAK_PASSWORD
value: xxxxxxxxx
- name: JAVA_OPTS
value: -Dkeycloak.profile=preview
84 Jan 6, 2023
11 Jul 21, 2022
4 Jan 15, 2022
1 Jan 2, 2022
11.6k Jan 3, 2023
3.4k Dec 29, 2022
5.2k Dec 31, 2022
412 Dec 3, 2022
996 Dec 26, 2022
1.5k Dec 31, 2022
398 Jan 8, 2023
1 Jan 29, 2022
10 Aug 5, 2022
113 Jan 6, 2023
10 Dec 22, 2022
184 Jan 5, 2023
3.9k Dec 21, 2022
2.2k Nov 12, 2022
69 Dec 26, 2022