feat: make frontend configurable via backend API

MasterEvarior · web-flow · commit 7381cd237637 · 2026-07-12T13:49:15.000+02:00
* feat: implement runtime env var configuration via config.js file # Conflicts: # frontend/nginx.conf * chore: ignore missing import for linting * docs: update README.md * refactor: move frontend configuration to env vars instead of /configuration endpoint * "revert: move frontend configuration to env vars instead of /configuration endpoint" This reverts commit 104eca9. * feat: remove docker specific code and entrypoint * feat: configure frontend via backend endpoint again * test: add missing configuration options * test: add test for ConfigurationMapper * test: add test for auth.service.ts * docs: remove obsolete README section * docs: fix typo
diff --git a/backend/src/main/java/ch/puzzle/pcts/configuration/KeycloakConfiguration.java b/backend/src/main/java/ch/puzzle/pcts/configuration/KeycloakConfiguration.java
@@ -0,0 +1,10 @@
+package ch.puzzle.pcts.configuration;
+
+import jakarta.validation.constraints.NotBlank;
+import org.springframework.boot.context.properties.ConfigurationProperties;
+import org.springframework.validation.annotation.Validated;
+
+@Validated
+@ConfigurationProperties(prefix = "pcts.frontend.keycloak")
+public record KeycloakConfiguration(@NotBlank String url, @NotBlank String realm, @NotBlank String clientId) {
+}
diff --git a/backend/src/main/java/ch/puzzle/pcts/dto/configuration/ConfigurationDto.java b/backend/src/main/java/ch/puzzle/pcts/dto/configuration/ConfigurationDto.java
@@ -4,5 +4,9 @@
 import java.util.List;
 
 public record ConfigurationDto(
-        @Schema(description = "All roles that are allowed to access admin functionality in the frontend", example = "org_hr") List<String> adminAuthorities) {
+        @Schema(description = "Keycloak configuration for frontend authentication") KeycloakDto keycloak) {
+
+    public record KeycloakDto(String url, String realm, String clientId,
+            @Schema(description = "All roles that are allowed to access admin functionality in the frontend", example = "org_hr") List<String> adminAuthorities) {
+    }
 }
diff --git a/backend/src/main/java/ch/puzzle/pcts/mapper/ConfigurationMapper.java b/backend/src/main/java/ch/puzzle/pcts/mapper/ConfigurationMapper.java
@@ -1,12 +1,22 @@
 package ch.puzzle.pcts.mapper;
 
 import ch.puzzle.pcts.configuration.AuthorizationConfiguration;
+import ch.puzzle.pcts.configuration.KeycloakConfiguration;
 import ch.puzzle.pcts.dto.configuration.ConfigurationDto;
 import org.springframework.stereotype.Component;
 
 @Component
 public class ConfigurationMapper {
+    private final KeycloakConfiguration keycloakConfig;
+
+    public ConfigurationMapper(KeycloakConfiguration keycloakConfig) {
+        this.keycloakConfig = keycloakConfig;
+    }
+
     public ConfigurationDto toDto(AuthorizationConfiguration authConfig) {
-        return new ConfigurationDto(authConfig.adminAuthorities());
+        return new ConfigurationDto(new ConfigurationDto.KeycloakDto(keycloakConfig.url(),
+                                                                     keycloakConfig.realm(),
+                                                                     keycloakConfig.clientId(),
+                                                                     authConfig.adminAuthorities()));
     }
 }
diff --git a/backend/src/main/resources/application-dev.properties b/backend/src/main/resources/application-dev.properties
@@ -34,4 +34,9 @@ spring.security.oauth2.resourceserver.jwt.jwk-set-uri=http://localhost:8544/real
 # Authentication & JWT
 pcts.security.authentication.display-name-claim=name
 pcts.security.authorization.admin-authorities=org_hr,org_gl
-pcts.security.authorization.authorities-spel-expression=[pitc][roles]
+pcts.security.authorization.authorities-spel-expression=[pitc][roles]
+
+# Keycloak config exposed to frontend
+pcts.frontend.keycloak.url=http://localhost:8544
+pcts.frontend.keycloak.realm=pitc
+pcts.frontend.keycloak.client-id=pcts-dev
diff --git a/backend/src/main/resources/application-e2e-test.properties b/backend/src/main/resources/application-e2e-test.properties
@@ -24,4 +24,9 @@ app.member-sync.password=
 # Authentication & JWT
 pcts.security.authentication.display-name-claim=name
 pcts.security.authorization.admin-authorities=org_hr,org_gl
-pcts.security.authorization.authorities-spel-expression=[pitc][roles]
+pcts.security.authorization.authorities-spel-expression=[pitc][roles]
+
+# Keycloak config exposed to frontend
+pcts.frontend.keycloak.url=http://localhost:8544
+pcts.frontend.keycloak.realm=pitc
+pcts.frontend.keycloak.client-id=pcts-dev
diff --git a/backend/src/main/resources/application-production.properties b/backend/src/main/resources/application-production.properties
@@ -1,2 +1,7 @@
 springdoc.api-docs.enabled=false
 springdoc.show-actuator=true
+
+# Keycloak config exposed to frontend
+pcts.frontend.keycloak.url=https://sso.puzzle.ch/auth
+pcts.frontend.keycloak.realm=pitc
+pcts.frontend.keycloak.client-id=pitc_pcts_staging
diff --git a/backend/src/main/resources/application-staging.properties b/backend/src/main/resources/application-staging.properties
@@ -13,4 +13,9 @@ springdoc.swagger-ui.path=/api/docs
 # Authentication & JWT
 pcts.security.authentication.display-name-claim=name
 pcts.security.authorization.authorities-spel-expression=[pitc][roles]
-pcts.security.authorization.admin-authorities=org_hr,org_gl
+pcts.security.authorization.admin-authorities=org_hr,org_gl
+
+# Keycloak config exposed to frontend
+pcts.frontend.keycloak.url=https://sso.puzzle.ch/auth
+pcts.frontend.keycloak.realm=pitc
+pcts.frontend.keycloak.client-id=pitc_pcts_staging
diff --git a/backend/src/test/java/ch/puzzle/pcts/controller/ConfigurationControllerIT.java b/backend/src/test/java/ch/puzzle/pcts/controller/ConfigurationControllerIT.java
@@ -35,7 +35,10 @@ class ConfigurationControllerIT extends ControllerITBase {
 
     @BeforeEach
     void setUp() {
-        this.configurationDto = new ConfigurationDto(List.of("ADMIN_1", "ADMIN_2"));
+        this.configurationDto = new ConfigurationDto(new ConfigurationDto.KeycloakDto("http://localhost:8544",
+                                                                                      "pitc",
+                                                                                      "pcts-dev",
+                                                                                      List.of("ADMIN_1", "ADMIN_2")));
     }
 
     @DisplayName("Should successfully get configuration")
diff --git a/backend/src/test/java/ch/puzzle/pcts/mapper/ConfigurationMapperTest.java b/backend/src/test/java/ch/puzzle/pcts/mapper/ConfigurationMapperTest.java
@@ -0,0 +1,33 @@
+package ch.puzzle.pcts.mapper;
+
+import static ch.puzzle.pcts.util.TestData.*;
+import static ch.puzzle.pcts.util.TestDataModels.*;
+import static org.junit.jupiter.api.Assertions.*;
+
+import ch.puzzle.pcts.dto.configuration.ConfigurationDto;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.api.Test;
+
+class ConfigurationMapperTest {
+
+    private ConfigurationMapper configurationMapper;
+
+    @BeforeEach
+    void setUp() {
+        configurationMapper = new ConfigurationMapper(KEYCLOAK_CONFIGURATION);
+    }
+
+    @DisplayName("Should return configuration dto with keycloak and authorization details")
+    @Test
+    void shouldReturnConfigurationDto() {
+        ConfigurationDto result = configurationMapper.toDto(AUTHORIZATION_CONFIGURATION);
+
+        assertNotNull(result);
+        assertNotNull(result.keycloak());
+        assertEquals(KEYCLOAK_URL, result.keycloak().url());
+        assertEquals(KEYCLOAK_REALM, result.keycloak().realm());
+        assertEquals(KEYCLOAK_CLIENT_ID, result.keycloak().clientId());
+        assertEquals(ADMIN_AUTHORITIES, result.keycloak().adminAuthorities());
+    }
+}
diff --git a/backend/src/test/java/ch/puzzle/pcts/util/TestData.java b/backend/src/test/java/ch/puzzle/pcts/util/TestData.java
@@ -2,12 +2,19 @@
 
 import java.math.BigDecimal;
 import java.time.LocalDate;
+import java.util.List;
 
 public class TestData {
 
     private TestData() {
     }
 
+    public static final String KEYCLOAK_URL = "https://keycloak.example.com";
+    public static final String KEYCLOAK_REALM = "test-realm";
+    public static final String KEYCLOAK_CLIENT_ID = "test-client";
+    public static final String AUTHORITIES_SP_EL_EXPRESSION = "[pitc][roles]";
+    public static final List<String> ADMIN_AUTHORITIES = List.of("org_hr", "org_admin");
+
     public static final LocalDate DATE_NOW = LocalDate.now();
     public static final LocalDate DATE_YESTERDAY = DATE_NOW.minusDays(1);
     public static final LocalDate DATE_TOMORROW = DATE_NOW.plusDays(1);
diff --git a/backend/src/test/java/ch/puzzle/pcts/util/TestDataModels.java b/backend/src/test/java/ch/puzzle/pcts/util/TestDataModels.java
@@ -2,6 +2,8 @@
 
 import static ch.puzzle.pcts.util.TestData.*;
 
+import ch.puzzle.pcts.configuration.AuthorizationConfiguration;
+import ch.puzzle.pcts.configuration.KeycloakConfiguration;
 import ch.puzzle.pcts.model.calculation.Calculation;
 import ch.puzzle.pcts.model.calculation.CalculationState;
 import ch.puzzle.pcts.model.calculation.Relevancy;
@@ -38,6 +40,13 @@ public class TestDataModels {
     private TestDataModels() {
     }
 
+    public static final KeycloakConfiguration KEYCLOAK_CONFIGURATION = new KeycloakConfiguration(KEYCLOAK_URL,
+                                                                                                 KEYCLOAK_REALM,
+                                                                                                 KEYCLOAK_CLIENT_ID);
+
+    public static final AuthorizationConfiguration AUTHORIZATION_CONFIGURATION = new AuthorizationConfiguration(AUTHORITIES_SP_EL_EXPRESSION,
+                                                                                                                ADMIN_AUTHORITIES);
+
     public static final OrganisationUnit ORG_UNIT_1;
     static {
         ORG_UNIT_1 = OrganisationUnit.Builder.builder().withId(ORG_UNIT_1_ID).withName("OrganisationUnit 1").build();
diff --git a/backend/src/test/resources/application-test.properties b/backend/src/test/resources/application-test.properties
@@ -17,4 +17,9 @@ spring.security.oauth2.resourceserver.jwt.jwk-set-uri=http://localhost:8544/real
 # Authentication & JWT
 pcts.security.authentication.display-name-claim=name
 pcts.security.authorization.admin-authorities=org_hr,org_gl
-pcts.security.authorization.authorities-sp-el-expression=[pitc][roles]
+pcts.security.authorization.authorities-sp-el-expression=[pitc][roles]
+
+# Keycloak config exposed to frontend
+pcts.frontend.keycloak.url=http://localhost:8544
+pcts.frontend.keycloak.realm=pitc
+pcts.frontend.keycloak.client-id=pcts-dev
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
@@ -21,7 +21,7 @@ http {
     sub_filter "CSP_NONCE_PLACEHOLDER" $request_id;
     sub_filter_once off;
 
-    # sha256-mwH/Oz1bMiZ9vHH84YJ6PbP6BpLW5nG9AD9Lad8u1+c= is an inline style for accesbility
+    # sha256-mwH/Oz1bMiZ9vHH84YJ6PbP6BpLW5nG9AD9Lad8u1+c= is an inline style for accessibility
     set $csp_header "script-src 'nonce-$request_id' 'self'; style-src 'self' 'sha256-mwH/Oz1bMiZ9vHH84YJ6PbP6BpLW5nG9AD9Lad8u1+c=' 'nonce-$request_id'; default-src 'self'; object-src 'none'; base-uri 'self'; connect-src 'self' https://sso.puzzle.ch http://localhost:8544; font-src 'self'; frame-src 'self' https://sso.puzzle.ch; img-src 'self'; manifest-src 'self'; media-src 'self'; worker-src 'none';";
 
     add_header Content-Security-Policy $csp_header;
diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
@@ -22,11 +22,11 @@ import {
   INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG, IncludeBearerTokenCondition, includeBearerTokenInterceptor,
   provideKeycloak
 } from 'keycloak-angular';
-import { environment } from '../environments/environment';
 import { provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
 import { de } from 'date-fns/locale/de';
 import { provideAppConfiguration } from './features/configuration/configuration.token';
+import { ConfigurationModel } from './features/configuration/configuration.model';
 
 registerLocaleData(localeDeCH);
 
@@ -35,56 +35,58 @@ const urlCondition = createInterceptorCondition<IncludeBearerTokenCondition>({
   bearerPrefix: 'Bearer'
 });
 
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideKeycloak({
-      config: {
-        url: environment.keycloak.url,
-        realm: environment.keycloak.realm,
-        clientId: environment.keycloak.clientId
+export function buildAppConfig(config: ConfigurationModel): ApplicationConfig {
+  return {
+    providers: [
+      provideKeycloak({
+        config: {
+          url: config.keycloak.url,
+          realm: config.keycloak.realm,
+          clientId: config.keycloak.clientId
+        },
+        initOptions: {
+          onLoad: 'login-required',
+          checkLoginIframe: false
+        }
+      }),
+      {
+        provide: INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG,
+        useValue: [urlCondition]
       },
-      initOptions: {
-        onLoad: 'login-required',
-        checkLoginIframe: false
-      }
-    }),
-    {
-      provide: INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG,
-      useValue: [urlCondition]
-    },
-    provideBrowserGlobalErrorListeners(),
-    provideZonelessChangeDetection(),
-    provideRouter(routes, withComponentInputBinding()),
-    importProvidersFrom(MatSnackBarModule),
-    provideHttpClient(withInterceptors([errorInterceptor,
-      successInterceptor,
-      includeBearerTokenInterceptor])),
-    provideTranslateService({
-      fallbackLang: 'de',
-      loader: provideTranslateHttpLoader({
-        prefix: '/i18n/',
-        suffix: '.json'
-      })
-    }),
-    provideDateFnsAdapter(),
-    {
-      provide: MAT_DATE_LOCALE,
-      useValue: de
-    },
-    provideAppInitializer(() => {
-      const translate = inject(TranslateService);
-      const lang = 'de';
-      return lastValueFrom(translate.use(lang));
-    }),
-    provideI18nPrefix(''),
-    {
-      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
-      useValue: { appearance: 'outline' }
-    },
-    {
-      provide: LOCALE_ID,
-      useValue: 'de-CH'
-    },
-    provideAppConfiguration()
-  ]
-};
+      provideBrowserGlobalErrorListeners(),
+      provideZonelessChangeDetection(),
+      provideRouter(routes, withComponentInputBinding()),
+      importProvidersFrom(MatSnackBarModule),
+      provideHttpClient(withInterceptors([errorInterceptor,
+        successInterceptor,
+        includeBearerTokenInterceptor])),
+      provideTranslateService({
+        fallbackLang: 'de',
+        loader: provideTranslateHttpLoader({
+          prefix: '/i18n/',
+          suffix: '.json'
+        })
+      }),
+      provideDateFnsAdapter(),
+      {
+        provide: MAT_DATE_LOCALE,
+        useValue: de
+      },
+      provideAppInitializer(() => {
+        const translate = inject(TranslateService);
+        const lang = 'de';
+        return lastValueFrom(translate.use(lang));
+      }),
+      provideI18nPrefix(''),
+      {
+        provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+        useValue: { appearance: 'outline' }
+      },
+      {
+        provide: LOCALE_ID,
+        useValue: 'de-CH'
+      },
+      provideAppConfiguration()
+    ]
+  };
+}
diff --git a/frontend/src/app/core/auth/auth.service.spec.ts b/frontend/src/app/core/auth/auth.service.spec.ts
diff --git a/frontend/src/app/core/auth/auth.service.ts b/frontend/src/app/core/auth/auth.service.ts
diff --git a/frontend/src/app/core/auth/guard/auth.guard.spec.ts b/frontend/src/app/core/auth/guard/auth.guard.spec.ts
diff --git a/frontend/src/app/features/configuration/configuration.model.ts b/frontend/src/app/features/configuration/configuration.model.ts
diff --git a/frontend/src/app/features/configuration/configuration.token.ts b/frontend/src/app/features/configuration/configuration.token.ts
diff --git a/frontend/src/app/shared/test/test-data.ts b/frontend/src/app/shared/test/test-data.ts
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
