Passkey Register

Functionality to allow users to register a passkey to their account.

This section focuses on the passkey register flow for users. This is generally done in the registration flow and also from a user's profile page. A user will always register first with the existing authentication method (e.g. a password), then they will be given the option to register a passkey for future logins.

Registering a passkey

First, write the code to register a passkey to a user’s account. This function can be used on a user’s profile page or as a step immediately after registration or login.

Example of recommended UX in a registration flow

Example of recommended UX on profile page

const tokenStore = new MyTokenStore();
const passage = new Passage('YOUR_APP_ID', {tokenStore});

async function showEnablePasskey(identifier) {
    const user = await passage.identifierExists(identifier)
    
    // If the user's device is capable of registering a passkey
    // and they have yet to register a passkey
    if (!user?.hasPasskey && (await passage.createCredentialAvailable()).isAvailable) 
        return true
    
    return false
}

async function registerPasskey() {
    // Get or Create Current User within Passage Express Authorizer Function
    const passageUser = passage.getCurrentUser();
    
    // If your Authorizer Function denies the request.
    // getCurrentUser will return null.
    if (!passageUser) throw new Error("Failed to Get or Create Passage User");
    
    try {
        const passkey = await passageUser.addDevice()
        // Show passkey has successfully been registered
    } catch (e) {
        // An error can be raised for one of the following reasons:
        // 1. User Device does not support webauthn
        // 2. User cancels the register passkey flow
        // 3. Network request error
    }
}