keycloak-dsfr

⚠️ UPDATE:

A more recent KeyCloak-DSFR is provided by the SILL.

You can download it here: https://github.com/codegouvfr/keycloak-theme-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.

⚠️ Before digging into the code, please read keycloakify documentation.

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