Is there a way to verify login/challenge signature in the browser?

[unicomp21]

verifyAttestationResponse in browser, having this ability could be useful for other stuff ...

[MasterKale]

@unicomp21 I mean, there's nothing Node-specific in @simplewebauthn/server anymore since v8...

import { verifyRegistrationResponse, verifyAuthenticationResponse } from '@simplewebauthn/server';
import { isoBase64URL, isoCrypto } from '@simplewebauthn/server/helpers';

import './style.css'
import typescriptLogo from './typescript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.ts'
import { registration, authentication } from './responses.ts';

(async () => {
  const challenge = await isoCrypto.getRandomValues(new Uint8Array(16));
  const challengeString = isoBase64URL.fromBuffer(challenge);

  /**
   * Verify responses
   */
  const verifiedReg = await verifyRegistrationResponse({
    // @ts-ignore
    response: registration.response,
    expectedChallenge: registration.expectedChallenge,
    expectedOrigin: registration.expectedOrigin,
    expectedRPID: registration.expectedRPID,
  });

  const verifiedAuth = await verifyAuthenticationResponse({
    // @ts-ignore
    response: authentication.response,
    expectedChallenge: authentication.expectedChallenge,
    expectedOrigin: authentication.expectedOrigin,
    expectedRPID: authentication.expectedRPID,
    authenticator: {
      credentialID: verifiedReg.registrationInfo!.credentialID,
      credentialPublicKey: verifiedReg.registrationInfo!.credentialPublicKey,
      counter: verifiedReg.registrationInfo!.counter,
    },
  })

  /**
   * Render stuff
   */
  document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="${viteLogo}" class="logo" alt="Vite logo" />
      </a>
      <a href="https://www.typescriptlang.org/" target="_blank">
        <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
      </a>
      <h1>Vite + TypeScript</h1>
      <div class="card">
        <button id="counter" type="button"></button>
      </div>
      <p class="read-the-docs">
        Click on the Vite and TypeScript logos to learn more
      </p>
      <p>
        Challenge (w/isoCrypto + isoBase64URL helpers): ${challengeString}
      </p>
      <p>
        verifyRegistrationResponse(): ${verifiedReg.verified}
      </p>
      <p>
        verifyAuthenticationResponse(): ${verifiedAuth.verified}
      </p>
    </div>
  `

  setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
})();

[unicomp21]

Thanks!

[unicomp21]

Just realized, authentication response is what I need, I owe ya!