Webauthn: ReferenceError: Can't find variable: PublicKeyCredential

Question

I'm trying to set up Webauthn in a TypeScript React app and I'm running into some trouble in my Playwright tests.

This is the code I'm using:

  const isSupported =
    await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();

And, in Webkit on linux, I'm getting this error:

 ReferenceError: Can't find variable: PublicKeyCredential

Chrome and Firefox on linux are fine, and Chrome, Firefox, and Webkit are all fine on macOS as well.

So how do I work around this? What's a safe way to ensure that PublicKeyCredential is available?

Answer 1

You can put the safety checks if "PublicKeyCredential" and "isUserVerifyingPlatformAuthenticatorAvailable" are available or not. Something like following.

const isWebauthnAvailable =
  typeof PublicKeyCredential !== 'undefined' &&
  typeof PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable === 'function';

if (isWebauthnAvailable) {
  const isWebauthnSupported = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
} else {
  console.error('WebAuthn is not supported in this environment.');
}