revert: web/flow: cleanup WebAuthn helper functions (goauthentik#14460)" (goauthentik#15172)

Revert "web/flow: cleanup WebAuthn helper functions (goauthentik#14460)"

This reverts commit e86c40a.

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

# Conflicts:
#	web/package-lock.json

Author: BeryJu

web/package-lock.json

@@ -108,6 +108,7 @@
         "@sentry/browser": "^9.30.0",
         "@spotlightjs/spotlight": "^3.0.1",
         "@webcomponents/webcomponentsjs": "^2.8.0",
+        "base64-js": "^1.5.1",
         "change-case": "^5.4.4",
         "chart.js": "^4.4.9",
         "chartjs-adapter-date-fns": "^3.0.0",
@@ -139,7 +140,6 @@
         "trusted-types": "^2.0.0",
         "ts-pattern": "^5.7.1",
         "unist-util-visit": "^5.0.0",
-        "webauthn-polyfills": "^0.1.7",
         "webcomponent-qr-code": "^1.2.0",
         "yaml": "^2.8.0"
     },

web/package.json

@@ -11,11 +11,11 @@
     },
     "dependencies": {
         "@goauthentik/api": "^2024.6.0-1719577139",
+        "base64-js": "^1.5.1",
         "bootstrap": "^4.6.1",
         "formdata-polyfill": "^4.0.10",
         "jquery": "^3.7.1",
-        "weakmap-polyfill": "^2.0.4",
-        "webauthn-polyfills": "^0.1.7"
+        "weakmap-polyfill": "^2.0.4"
     },
     "devDependencies": {
         "@goauthentik/core": "^1.0.0",

web/packages/sfe/package.json

@@ -1,7 +1,7 @@
+import { fromByteArray } from "base64-js";
 import "formdata-polyfill";
 import $ from "jquery";
 import "weakmap-polyfill";
-import "webauthn-polyfills";
 
 import {
     type AuthenticatorValidationChallenge,
@@ -257,9 +257,47 @@ class AutosubmitStage extends Stage<AutosubmitChallenge> {
     }
 }
 
+export interface Assertion {
+    id: string;
+    rawId: string;
+    type: string;
+    registrationClientExtensions: string;
+    response: {
+        clientDataJSON: string;
+        attestationObject: string;
+    };
+}
+
+export interface AuthAssertion {
+    id: string;
+    rawId: string;
+    type: string;
+    assertionClientExtensions: string;
+    response: {
+        clientDataJSON: string;
+        authenticatorData: string;
+        signature: string;
+        userHandle: string | null;
+    };
+}
+
 class AuthenticatorValidateStage extends Stage<AuthenticatorValidationChallenge> {
     deviceChallenge?: DeviceChallenge;
 
+    b64enc(buf: Uint8Array): string {
+        return fromByteArray(buf).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+    }
+
+    b64RawEnc(buf: Uint8Array): string {
+        return fromByteArray(buf).replace(/\+/g, "-").replace(/\//g, "_");
+    }
+
+    u8arr(input: string): Uint8Array {
+        return Uint8Array.from(atob(input.replace(/_/g, "/").replace(/-/g, "+")), (c) =>
+            c.charCodeAt(0),
+        );
+    }
+
     checkWebAuthnSupport(): boolean {
         if ("credentials" in navigator) {
             return true;
@@ -272,6 +310,98 @@ class AuthenticatorValidateStage extends Stage<AuthenticatorValidationChallenge>
         return false;
     }
 
+    /**
+     * Transforms items in the credentialCreateOptions generated on the server
+     * into byte arrays expected by the navigator.credentials.create() call
+     */
+    transformCredentialCreateOptions(
+        credentialCreateOptions: PublicKeyCredentialCreationOptions,
+        userId: string,
+    ): PublicKeyCredentialCreationOptions {
+        const user = credentialCreateOptions.user;
+        // Because json can't contain raw bytes, the server base64-encodes the User ID
+        // So to get the base64 encoded byte array, we first need to convert it to a regular
+        // string, then a byte array, re-encode it and wrap that in an array.
+        const stringId = decodeURIComponent(window.atob(userId));
+        user.id = this.u8arr(this.b64enc(this.u8arr(stringId)));
+        const challenge = this.u8arr(credentialCreateOptions.challenge.toString());
+
+        return Object.assign({}, credentialCreateOptions, {
+            challenge,
+            user,
+        });
+    }
+
+    /**
+     * Transforms the binary data in the credential into base64 strings
+     * for posting to the server.
+     * @param {PublicKeyCredential} newAssertion
+     */
+    transformNewAssertionForServer(newAssertion: PublicKeyCredential): Assertion {
+        const attObj = new Uint8Array(
+            (newAssertion.response as AuthenticatorAttestationResponse).attestationObject,
+        );
+        const clientDataJSON = new Uint8Array(newAssertion.response.clientDataJSON);
+        const rawId = new Uint8Array(newAssertion.rawId);
+
+        const registrationClientExtensions = newAssertion.getClientExtensionResults();
+        return {
+            id: newAssertion.id,
+            rawId: this.b64enc(rawId),
+            type: newAssertion.type,
+            registrationClientExtensions: JSON.stringify(registrationClientExtensions),
+            response: {
+                clientDataJSON: this.b64enc(clientDataJSON),
+                attestationObject: this.b64enc(attObj),
+            },
+        };
+    }
+
+    transformCredentialRequestOptions(
+        credentialRequestOptions: PublicKeyCredentialRequestOptions,
+    ): PublicKeyCredentialRequestOptions {
+        const challenge = this.u8arr(credentialRequestOptions.challenge.toString());
+
+        const allowCredentials = (credentialRequestOptions.allowCredentials || []).map(
+            (credentialDescriptor) => {
+                const id = this.u8arr(credentialDescriptor.id.toString());
+                return Object.assign({}, credentialDescriptor, { id });
+            },
+        );
+
+        return Object.assign({}, credentialRequestOptions, {
+            challenge,
+            allowCredentials,
+        });
+    }
+
+    /**
+     * Encodes the binary data in the assertion into strings for posting to the server.
+     * @param {PublicKeyCredential} newAssertion
+     */
+    transformAssertionForServer(newAssertion: PublicKeyCredential): AuthAssertion {
+        const response = newAssertion.response as AuthenticatorAssertionResponse;
+        const authData = new Uint8Array(response.authenticatorData);
+        const clientDataJSON = new Uint8Array(response.clientDataJSON);
+        const rawId = new Uint8Array(newAssertion.rawId);
+        const sig = new Uint8Array(response.signature);
+        const assertionClientExtensions = newAssertion.getClientExtensionResults();
+
+        return {
+            id: newAssertion.id,
+            rawId: this.b64enc(rawId),
+            type: newAssertion.type,
+            assertionClientExtensions: JSON.stringify(assertionClientExtensions),
+
+            response: {
+                clientDataJSON: this.b64RawEnc(clientDataJSON),
+                signature: this.b64RawEnc(sig),
+                authenticatorData: this.b64RawEnc(authData),
+                userHandle: null,
+            },
+        };
+    }
+
     render() {
         if (this.challenge.deviceChallenges.length === 1) {
             this.deviceChallenge = this.challenge.deviceChallenges[0];
@@ -375,18 +505,24 @@ class AuthenticatorValidateStage extends Stage<AuthenticatorValidationChallenge>
             `);
         navigator.credentials
             .get({
-                publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(
-                    this.deviceChallenge?.challenge as PublicKeyCredentialRequestOptionsJSON,
+                publicKey: this.transformCredentialRequestOptions(
+                    this.deviceChallenge?.challenge as PublicKeyCredentialRequestOptions,
                 ),
             })
             .then((assertion) => {
                 if (!assertion) {
                     throw new Error("No assertion");
                 }
                 try {
+                    // we now have an authentication assertion! encode the byte arrays contained
+                    // in the assertion data as strings for posting to the server
+                    const transformedAssertionForServer = this.transformAssertionForServer(
+                        assertion as PublicKeyCredential,
+                    );
+
                     // post the assertion to the server for verification.
                     this.executor.submit({
-                        webauthn: (assertion as PublicKeyCredential).toJSON(),
+                        webauthn: transformedAssertionForServer,
                     });
                 } catch (err) {
                     throw new Error(`Error when validating assertion on server: ${err}`);