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 Quickstart 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.js Flex SDK

Add passkey

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

Register the user using the transaction ID you retrieved in step 2.

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 Flex SDK

Flex triggers the WebAuthn (opens in a new tab) flow, which creates a passkey on the user's device.

Learn more