PublicKeyCredential

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2021⁩.

* Some parts of this feature may have varying levels of support.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

ThePublicKeyCredential interface provides information about a public key / private key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password. It inherits fromCredential, and is part of theWeb Authentication API extension to theCredential Management API.

Note:This API is restricted to top-level contexts. Use from within an<iframe> element will not have any effect.

Instance properties

PublicKeyCredential.authenticatorAttachmentRead only: A string that indicates the mechanism by which the WebAuthn implementation is attached to the authenticator at the time the associatednavigator.credentials.create() ornavigator.credentials.get() call completes.
PublicKeyCredential.idRead only: Inherited fromCredential and overridden to be thebase64url encoding ofPublicKeyCredential.rawId.
PublicKeyCredential.rawIdRead only: AnArrayBuffer that holds the globally unique identifier for thisPublicKeyCredential. This identifier can be used to look up credentials for future calls tonavigator.credentials.get().
PublicKeyCredential.responseRead only: An instance of anAuthenticatorResponse object. It is either of typeAuthenticatorAttestationResponse if thePublicKeyCredential was the results of anavigator.credentials.create() call, or of typeAuthenticatorAssertionResponse if thePublicKeyCredential was the result of anavigator.credentials.get() call.
PublicKeyCredential.typeRead only: Inherited fromCredential. Always set topublic-key forPublicKeyCredential instances.

Static methods

PublicKeyCredential.getClientCapabilities(): Returns aPromise that resolves with an object that can be used to check whether or not particular WebAuthn capabilities andextensions are supported.
PublicKeyCredential.isConditionalMediationAvailable(): Returns aPromise which resolves totrue if conditional mediation is available.
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(): Returns aPromise which resolves totrue if an authenticator bound to the platform is capable ofverifying the user.
PublicKeyCredential.parseCreationOptionsFromJSON(): Convenience method for deserializing server-sent credential registration data whenregistering a user with credentials.
PublicKeyCredential.parseRequestOptionsFromJSON(): Convenience method for deserializing server-sent credential request data whenauthenticating a (registered) user.
PublicKeyCredential.signalAllAcceptedCredentials(): Signals to the authenticator all of the validcredential IDs that therelying party server still holds for a particular user.
PublicKeyCredential.signalCurrentUserDetails(): Signals to the authenticator that a particular user has updated their user name and/or display name.
PublicKeyCredential.signalUnknownCredential(): Signals to the authenticator that acredential ID was not recognized by therelying party server, for example because it was deleted.

Instance methods

PublicKeyCredential.getClientExtensionResults(): If any extensions were requested, this method will return the results of processing those extensions.
PublicKeyCredential.toJSON(): Convenience method for creating a JSON string representation of aPublicKeyCredential for sending to the server whenregistering a user with credentials andauthenticating a registered user.

Examples

Creating a new instance of PublicKeyCredential

Here, we usenavigator.credentials.create() to generate a new credential.

const createCredentialOptions = {  publicKey: {    challenge: new Uint8Array([      21, 31, 105 /* 29 more random bytes generated by the server */,    ]),    rp: {      name: "Example CORP",      id: "login.example.com",    },    user: {      id: new Uint8Array(16),      name: "canand@example.com",      displayName: "Carina Anand",    },    pubKeyCredParams: [      {        type: "public-key",        alg: -7,      },    ],  },};navigator.credentials  .create(createCredentialOptions)  .then((newCredentialInfo) => {    const response = newCredentialInfo.response;    const clientExtensionsResults =      newCredentialInfo.getClientExtensionResults();  })  .catch((err) => {    console.error(err);  });

Getting an existing instance of PublicKeyCredential

Here, we fetch an existing credential from an authenticator, usingnavigator.credentials.get().

const requestCredentialOptions = {  publicKey: {    challenge: new Uint8Array([      /* bytes sent from the server */    ]),  },};navigator.credentials  .get(requestCredentialOptions)  .then((credentialInfoAssertion) => {    // send assertion response back to the server    // to proceed with the control of the credential  })  .catch((err) => {    console.error(err);  });