A public key credential is a WebAuthn registration record containing a credential identifier and public key. The authenticator keeps the private key, while the server stores the identifier and public key for verifying later signed login responses. section 15.3
Registration produces several pieces of data:
- The browser requests credential creation with a challenge, relying-party information, user details, algorithm, authenticator preference, timeout, and attestation settings. section 15.3
- A successful result includes the credential ID, key type, algorithm, raw public key, attestation object, and client data. section 15.3
- The server associates the credential ID and public key with the account, then retrieves them during authentication. section 15.3
Registration and login
A browser creates a passkey for localhost after the user confirms identity. The server stores its credential ID and public key. During login, it issues a challenge, identifies the credential, and verifies the returned signature with the stored public key. section 15.3
Listing 15.4 Requesting creation of the public key
async function registerWebAuthn() {
if (!window.PublicKeyCredential) {
console.error("WebAuthn is not supported in this browser.");
return;
}
const publicKeyCredentialCreationOptions = {
challenge: new Uint8Array(32),
rp: { name: "My WebAuthn App" },
user: {
id: new Uint8Array(16),
name: "user@example.com",
displayName: "User Example"
},
pubKeyCredParams: [{ type: "public-key", alg: -7 }],
authenticatorSelection: { authenticatorAttachment: "platform" },
timeout: 60000, // Timeout in milliseconds
attestation: "direct"
};
try {
const credential = await navigator.credentials
.create({ #1
publicKey: publicKeyCredentialCreationOptions
});
if (!credential) { #2
console.error("Credential creation failed.");
return;
}
const attestationObject = #3
btoa(String.fromCharCode(...new
Uint8Array(credential.response.attestationObject)));
const clientDataJSON =
btoa(String.fromCharCode(...new
Uint8Array(credential.response.clientDataJSON)));
const credentialId =
btoa(String.fromCharCode(...new
Uint8Array(credential.rawId)));
console.log("WebAuthn Registration Data:");
console.log("Attestation Object:", attestationObject);
console.log("Client Data JSON:", clientDataJSON);
console.log("Credential ID:", credentialId);
} catch (error) {
console.error("WebAuthn registration failed:", error);
}
}
Inspect the JavaScript call that requests creation of a public key credential and handles a failed creation result. section 15.3
