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

* pass #1

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

* pass #2

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

* add polyfill

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

---------

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

Author: BeryJu

web/package-lock.json

@@ -105,7 +105,6 @@
         "@sentry/browser": "^9.28.1",
         "@spotlightjs/spotlight": "^3.0.0",
         "@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",
@@ -137,6 +136,7 @@
         "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"
+        "weakmap-polyfill": "^2.0.4",
+        "webauthn-polyfills": "^0.1.7"
     },
     "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,47 +257,9 @@ 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;
@@ -310,98 +272,6 @@ 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];
@@ -505,24 +375,18 @@ class AuthenticatorValidateStage extends Stage<AuthenticatorValidationChallenge>
             `);
         navigator.credentials
             .get({
-                publicKey: this.transformCredentialRequestOptions(
-                    this.deviceChallenge?.challenge as PublicKeyCredentialRequestOptions,
+                publicKey: PublicKeyCredential.parseRequestOptionsFromJSON(
+                    this.deviceChallenge?.challenge as PublicKeyCredentialRequestOptionsJSON,
                 ),
             })
             .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: transformedAssertionForServer,
+                        webauthn: (assertion as PublicKeyCredential).toJSON(),
                     });
                 } catch (err) {
                     throw new Error(`Error when validating assertion on server: ${err}`);