Use keycloak passkey extension (#79)

Co-authored-by: Johannes Pahle <82645554+ITegs@users.noreply.github.com>

Author: mohamedalaaser

.example.env

@@ -46,3 +46,5 @@ EMBEDDING_MODEL_NAME= sentence-transformers/all-mpnet-base-v2
 CHAT_MODEL_SOURCE = OpenAiChatModel
 EMBEDDING_MODEL_SOURCE = OpenAiEmbeddingModel
 
+KC_PASSKEY_CLIENT_ID=module-management
+KC_ALLOWED_BROWSER_ORIGIN=https?://(localhost|127\.0\.0\.1|\[::1\])(:\d+)?|https://module\.aet\.cit\.tum\.de

Client/src/app/core/security/keycloak.service.ts

@@ -58,42 +58,6 @@ export class KeycloakService {
     return this.keycloak.login({ redirectUri: window.location.origin + (returnUrl ?? '') });
   }
 
-  applyPasskeyTokens(accessToken: string, refreshToken: string): void {
-    const kc = this.keycloak;
-    kc.token = accessToken;
-    kc.refreshToken = refreshToken;
-    kc.idToken = undefined;
-    kc.idTokenParsed = undefined;
-
-    const parsed = this.parseJwtPayload(accessToken);
-    kc.tokenParsed = parsed;
-    kc.refreshTokenParsed = this.parseJwtPayload(refreshToken);
-
-    if (parsed) {
-      kc.subject = parsed.sub;
-      const ext = parsed as KeycloakTokenParsed & { sid?: string; session_state?: string };
-      kc.sessionId = ext.sid ?? ext.session_state;
-      kc.realmAccess = parsed.realm_access;
-      kc.resourceAccess = parsed.resource_access;
-    }
-    kc.timeSkew = 0;
-    kc.authenticated = true;
-  }
-
-  private parseJwtPayload(token: string): KeycloakTokenParsed | undefined {
-    try {
-      const parts = token.split('.');
-      if (parts.length < 2) {
-        return undefined;
-      }
-      const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
-      const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
-      return JSON.parse(atob(padded)) as KeycloakTokenParsed;
-    } catch {
-      return undefined;
-    }
-  }
-
   logout() {
     return this.keycloak.logout({ redirectUri: environment.redirect });
   }

Client/src/app/core/security/passkey-extension.service.ts

@@ -36,6 +36,18 @@ export class PasskeyExtensionService {
     return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
   }
 
+  private async readJsonBody<T>(response: Response): Promise<T | undefined> {
+    const contentType = response.headers.get('content-type') ?? '';
+    if (!contentType.toLowerCase().includes('application/json')) {
+      return undefined;
+    }
+    try {
+      return (await response.json()) as T;
+    } catch {
+      return undefined;
+    }
+  }
+
   /**
    * Register a new passkey for the current user (must already be logged in).
    */
@@ -54,16 +66,13 @@ export class PasskeyExtensionService {
     const parsed = kc.tokenParsed as Record<string, unknown> | undefined;
     const accountId = String(parsed?.['sub'] ?? parsed?.['preferred_username'] ?? '');
     const accountName = String(parsed?.['preferred_username'] ?? parsed?.['email'] ?? '');
-    const displayName = String(
-      parsed?.['name'] ??
-        ([parsed?.['given_name'], parsed?.['family_name']].filter(Boolean).join(' ') || accountName || 'User')
-    );
+    const displayName = String(parsed?.['name'] ?? ([parsed?.['given_name'], parsed?.['family_name']].filter(Boolean).join(' ') || accountName || 'User'));
 
     if (!accountId || !accountName) {
       throw new Error('Missing user identity in token for passkey registration.');
     }
 
-    const challengeRes = await fetch(this.getUrl('challenge'));
+    const challengeRes = await fetch(this.getUrl('challenge'), { credentials: 'include' });
     if (!challengeRes.ok) {
       throw new Error(`Failed to get WebAuthn challenge (${challengeRes.status})`);
     }
@@ -94,11 +103,13 @@ export class PasskeyExtensionService {
       credentialId: this.bufferToBase64Url(credential.rawId),
       rawId: this.bufferToBase64Url(credential.rawId),
       clientDataJSON: this.bufferToBase64Url(response.clientDataJSON),
-      attestationObject: this.bufferToBase64Url(response.attestationObject)
+      attestationObject: this.bufferToBase64Url(response.attestationObject),
+      challenge
     };
 
     const saveRes = await fetch(this.getUrl('save'), {
       method: 'POST',
+      credentials: 'include',
       headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${token}`
@@ -115,15 +126,17 @@ export class PasskeyExtensionService {
   }
 
   /**
-   * Sign in with passkey only (no Keycloak UI redirect). Returns tokens from {@code POST /passkey/authenticate}.
+   * Sign in with passkey only (no Keycloak UI redirect).
+   * The extension endpoint sets the Keycloak login cookie; the SPA should then reload
+   * and let keycloak-js initialize via check-sso.
    */
-  async signInWithPasskey(): Promise<{ access_token: string; refresh_token: string }> {
-    const optionsResponse = await fetch(this.getUrl('get-credential-id'));
-    const res = (await optionsResponse.json()) as { challenge?: string; credentialId?: string; error?: string };
+  async signInWithPasskey(): Promise<void> {
+    const optionsResponse = await fetch(this.getUrl('challenge'), { credentials: 'include' });
+    const res = await this.readJsonBody<{ challenge?: string; credentialId?: string; error?: string }>(optionsResponse);
     if (!optionsResponse.ok) {
       throw new Error(res?.error || `Failed to get passkey options (${optionsResponse.status})`);
     }
-    if (!res.challenge) {
+    if (!res?.challenge) {
       throw new Error('Invalid challenge response from server');
     }
 
@@ -132,9 +145,7 @@ export class PasskeyExtensionService {
       userVerification: 'preferred'
     };
     if (res.credentialId) {
-      publicKey.allowCredentials = [
-        { type: 'public-key', id: this.base64UrlToUint8Array(res.credentialId) as BufferSource }
-      ];
+      publicKey.allowCredentials = [{ type: 'public-key', id: this.base64UrlToUint8Array(res.credentialId) as BufferSource }];
     }
 
     const credential = (await navigator.credentials.get({ publicKey })) as PublicKeyCredential | null;
@@ -154,17 +165,19 @@ export class PasskeyExtensionService {
 
     const authRes = await fetch(this.getUrl('authenticate'), {
       method: 'POST',
+      credentials: 'include',
+      redirect: 'manual',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload)
     });
 
-    const authResult = (await authRes.json()) as { access_token?: string; refresh_token?: string; error?: string };
+    if (authRes.type === 'opaqueredirect') {
+      return;
+    }
+
+    const authResult = await this.readJsonBody<{ error?: string }>(authRes);
     if (!authRes.ok) {
       throw new Error(authResult?.error || `Passkey authentication failed (${authRes.status})`);
     }
-    if (!authResult.access_token || !authResult.refresh_token) {
-      throw new Error('Invalid token response from server');
-    }
-    return { access_token: authResult.access_token, refresh_token: authResult.refresh_token };
   }
 }

Client/src/app/core/security/security-store.service.ts

@@ -90,11 +90,10 @@ export class SecurityStore {
   async signInWithPasskey(): Promise<void> {
     this.isLoading.set(true);
     try {
-      const tokens = await this.passkeyExtension.signInWithPasskey();
-      this.keycloakService.applyPasskeyTokens(tokens.access_token, tokens.refresh_token);
-      await this.loadPasskeys();
-      const user = await firstValueFrom(this.userControllerService.getCurrentUser());
-      this.user.set(user);
+      await this.passkeyExtension.signInWithPasskey();
+      // Passkey authenticate sets the Keycloak login cookie; reload so init(check-sso)
+      // can bootstrap keycloak-js token state through the standard adapter flow.
+      window.location.reload();
     } catch (error) {
       this.messageService.add({ severity: 'error', summary: 'Sign-in', detail: 'Something went wrong' });
       console.error(error);

docker/docker-compose.dev.yaml

@@ -24,8 +24,11 @@ services:
     environment:
       KC_BOOTSTRAP_ADMIN_USERNAME: ${KEYCLOAK_ADMIN:-admin}
       KC_BOOTSTRAP_ADMIN_PASSWORD: ${KEYCLOAK_ADMIN_PASSWORD:-admin}
+      KC_PASSKEY_CLIENT_ID: ${KC_PASSKEY_CLIENT_ID:-module-management}
+      KC_ALLOWED_BROWSER_ORIGIN: ${KC_ALLOWED_BROWSER_ORIGIN:-http://localhost:4200}
     command: start-dev --import-realm
     volumes:
+      - keycloak_data:/opt/keycloak/data
       - ../module-management-realm.json:/opt/keycloak/data/import/module-management-realm.json
       - ../keycloak-themes:/opt/keycloak/themes
     ports:
@@ -69,6 +72,7 @@ services:
 
 volumes:
   postgres_data:
+  keycloak_data:
   hf_cache:
 
 

docker/docker-compose.staging.yaml

@@ -38,6 +38,8 @@ services:
     environment:
       - KC_BOOTSTRAP_ADMIN_USERNAME=${KEYCLOAK_ADMIN_USERNAME}
       - KC_BOOTSTRAP_ADMIN_PASSWORD=${KEYCLOAK_ADMIN_PASSWORD}
+      - KC_PASSKEY_CLIENT_ID=${KC_PASSKEY_CLIENT_ID:-module-management}
+      - KC_ALLOWED_BROWSER_ORIGIN=${KC_ALLOWED_BROWSER_ORIGIN:-http://localhost:4200}
       - KC_DB=postgres
       - KC_DB_URL_HOST=postgres
       - KC_DB_URL_DATABASE=keycloak

keycloak-extension-passkey/pom.xml

@@ -12,19 +12,21 @@
 
   <properties>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-    <keycloak.version>26.1.3</keycloak.version>
+    <keycloak.version>26.5.0</keycloak.version>
   </properties>
 
   <dependencies>
     <dependency>
       <groupId>org.keycloak</groupId>
       <artifactId>keycloak-server-spi</artifactId>
       <version>${keycloak.version}</version>
+      <scope>provided</scope>
     </dependency>
     <dependency>
       <groupId>org.keycloak</groupId>
       <artifactId>keycloak-services</artifactId>
       <version>${keycloak.version}</version>
+      <scope>provided</scope>
     </dependency>
     <dependency>
       <groupId>org.keycloak</groupId>
@@ -36,6 +38,7 @@
       <groupId>org.jboss.resteasy</groupId>
       <artifactId>resteasy-core-spi</artifactId>
       <version>6.2.11.Final</version>
+      <scope>provided</scope>
     </dependency>
     <dependency>
       <groupId>org.projectlombok</groupId>
@@ -51,17 +54,17 @@
     <dependency>
       <groupId>com.fasterxml.jackson.core</groupId>
       <artifactId>jackson-databind</artifactId>
-      <version>2.13.4.2</version>
+      <version>2.18.3</version>
     </dependency>
   </dependencies>
   <build>
     <plugins>
       <plugin>
         <groupId>org.apache.maven.plugins</groupId>
         <artifactId>maven-compiler-plugin</artifactId>
+        <version>3.13.0</version>
         <configuration>
-          <source>16</source>
-          <target>16</target>
+          <release>17</release>
           <annotationProcessorPaths>
             <path>
               <groupId>org.projectlombok</groupId>