Manage WebAuthn credentials
Amplify Auth enables your users to associate, keep track of, and delete passkeys.
Associate WebAuthN credentials
Note that users must be authenticated to register a passkey. That also means users cannot create a passkey during sign up; consequently, they must have at least one other first factor authentication mechanism associated with their account to use WebAuthn.
You can associate a passkey using the following API:
import { associateWebAuthnCredential} from 'aws-amplify/auth';
await associateWebAuthnCredential();
You will be prompted to register a passkey using your local authenticator. Amplify will then associate that passkey with Cognito.
List WebAuthN credentials
You can list registered passkeys using the following API:
import { listWebAuthnCredentials } from 'aws-amplify/auth';
const result = await listWebAuthnCredentials();
for (const credential of result.credentials) { console.log(`Credential ID: ${credential.credentialId}`); console.log(`Friendly Name: ${credential.friendlyCredentialName}`); console.log(`Relying Party ID: ${credential.relyingPartyId}`); console.log(`Created At: ${credential.createdAt}`);}
Delete WebAuthN credentials
You can delete a passkey with the following API:
import { deleteWebAuthnCredential } from 'aws-amplify/auth';
const id = "credential-id-to-delete";
await deleteWebAuthnCredential({ credentialId: id});
Practical example
Here is a code example that uses the list and delete APIs together. In this example, the user has 3 passkeys registered. They want to list all passkeys while using a pageSize
of 2 as well as delete the first passkey in the list.
import { listWebAuthnCredentials, deleteWebAuthnCredential} from 'aws-amplify/auth';
let passkeys = [];
const result = await listWebAuthnCredentials({ pageSize: 2 });
passkeys.push(...result.credentials);
const nextPage = await listWebAuthnCredentials({ pageSize: 2, nextToken: result.nextToken,});
passkeys.push(...nextPage.credentials);
const id = passkeys[0].credentialId;
await deleteWebAuthnCredential({ credentialId: id});