Add passkey

Add passkeys to existing users.

Get started by choosing your client and backend for personalized docs.

Select client

Select backend

Prerequisites

Complete the steps in Get Started to create a Passage app and install the necessary SDKs.

Guide

Start the authentication flow

Provide a button or link for authenticated users to add a passkey.

Use the canRegisterPasskey() helper from Passkey Flex JavaScript SDK to conditionally render the button. This makes sure the passkey flow is only available to users who have the ability to add passkeys.

Client

import { canRegisterPasskey } from 'passage-flex-js';
 
canRegisterPasskey() && <a onClick={handleCreatePasskeyClick}> Add passkey </a>;

Get transaction ID

Get a transaction ID from the Passkey Flex Backend for each user. Learn more about transactions.

You must create a unique external ID to associate users in your database and the Passage database. Learn more about external identifiers.

Backend

 
app.post('/passkey/add', async (req: Request, res: Response) => {
 
    // ... Verify user identity
 
    let user = User.findOne({id: req.session.id})
 
    // Save a unique passage identifier to each user.
    if(user.passageExternalId === null) {
        user = User.updateOne({id: user.id}, { $set: {passageExternalId: "UUID-string"}})
    }
 
    // Create transaction ID
    const transactionId = await passage.createRegisterTransaction({
        externalId: user.passageExternalId, // Same value saved to your DB
        passkeyDisplayName: user.email,
    });
 
    // Send transaction ID to the client
    return res.status(200).json({transactionId: transactionId}).end();
});

Learn more about the Node SDK

Add passkey

Initialize a Passkey Flex instance using your app ID found in the Passage console.

Client

import { PassageFlex } from '@passageidentity/passage-flex-js';
 
const passage = new PassageFlex(appID);
 
function async addPasskey() {
    // Make a request to the server
 
    const transactionID = // Result of request to example '/passkey/add' endpoint
 
    // Register the new passkey to the user
    try {
        await passage.passkey.register(transactionID);
    }
}

Learn more about the JavaScript SDK

Passkey Flex triggers the WebAuthn (opens in a new tab) flow and the passkey is created on the user's device.