I want to implement a register/login system with webauthn. My server is running NodeJS(express) and my frontend is React. I am using the fido2-lib library on my backend. The problem is that when I call navigator.credentials.create, I get the error: DOMException: The operation failed for an unknown transient reason with absolutely no info about what went wrong, or where to look for errors, so I have no idea what to do at this point.. Here's all the code I currently have, please note that this is just a proof of concept so the code is all over the place, please excuse that.

Backend:

const fido = new Fido2Lib({
  attestation: 'none',
  authenticatorAttachment: 'platform',
  authenticatorRequireResidentKey: false,
  authenticatorUserVerification: 'required',
  challengeSize: 128,
  cryptoParams: [-7, -257],
  rpIcon: <absolute url to a .png>,
  rpId: 'localhost',
  rpName: 'Test',
  timeout: 60000,
});

this.router.post('/register', this.register);

  private register = async (req: Request, res: Response, next: NextFunction) => {
    function toBuffer(ab: any) {
      // ArrayBuffer to Buffer
      const buf = Buffer.alloc(ab.byteLength);
      const view = new Uint8Array(ab);
      for (let i = 0; i < buf.length; ++i) {
        buf[i] = view[i];
      }
      return buf;
    }

    // Returns an User object which is saved in the database
    const user = await this.dao.createUser(
      {
        email: req.body.email,
      },
      'user',
    );

    const registrationOptions = await fido.attestationOptions();

    console.log(user.id);

    (registrationOptions.user as any) = {
      id: user.id,
      name: user.email,
      displayName: user.email.split('@')[0],
    };

    registrationOptions.challenge = toBuffer(registrationOptions.challenge);

    console.log(registrationOptions);

    return res.status(200).json(registrationOptions);
  };

Frontend:

  function bufferToArrayBufferSlice(buffer: any) {
    const b = Buffer.from(buffer);
    return b.slice(b.byteOffset, b.byteOffset + b.byteLength);
  }

  async function register() {
    function str2ab(str: string) {
      var buf = new ArrayBuffer(str.length);
      var bufView = new Uint16Array(buf);
      for (var i = 0, strLen = str.length; i < strLen; i++) {
        bufView[i] = str.charCodeAt(i);
      }
      return buf;
    }

    if (!window.PublicKeyCredential) {
      return alert("PLATFORM NOT SUPPORTED.");
    }
    const { data } = await axios.post(
      "/register",
      {
        email,
      }
    );

    console.log("Before decode");
    console.log(data);

    data.challenge = bufferToArrayBufferSlice(data.challenge);
    data.user.id = str2ab(data.user.id);

    console.log("after decode");
    console.log(data);

    navigator.credentials
      .create({ publicKey: data })
      .then(function (att) {
        console.log("SUCCESS");

        console.log(att);
      })
      .catch(function (err) {
        console.log("ERROR");

        console.log(err);
      });
  }