Add a passkey signer on a different OS

Allow your user to access their wallet from several devices with different OS environment

To add a new device as a passkey signer, the user's wallet must already exist in our system. When the user attempts to connect to their wallet on a new secondary device, no signer is available.

If you have synchronized your devices through IOS or Google profile, you are able to retrieve the same passkey on all those devices.

This flow concerns the scenario where you would want to use passkeys on different OS (for example a mac and an android phone) as signers of your smart wallet.

1. Create a new signer object on another device

From the SDK, you need to call createNewSigner on the secondary device. It will create a signer and initiate a new signer request. This request, once validated on the primary device, will grant access to the secondary signer on the Safe smart wallet.

import { createNewSigner } from "@cometh/connect-sdk-4337";


const signerObject = await createNewSigner({
    smartAccountAddress: TARGET_ACCOUNT_ADDRESS,
});

/*
In the case of passkeys, the signer object should look like:
{ 
    signerAddress: SIGNER_ADDRESS,
    deviceData: {
        browser: "Firefox",
        os: "macOS",
        platform: "desktop",
    };
    publicKeyId: "0x...";
    publicKeyX: "0x...";
    publicKeyY: "0x...";
}
*/

At the end of this stage you have created a signer on your new device, you'll then need to validate that signer on your main device.

2. Prepare the new device validation

After getting the new signer details, you will need to send this payload data to a page of your choosing where the validation will happen. To facilitate that, we included a function that serialize the above payload created an url with a given url:

import { createNewSigner, serializeUrlWithSignerPayload } from "@cometh/connect-sdk-4337";

const signerObject = await createNewSigner({
    smartAccountAddress: TARGET_ACCOUNT_ADDRESS,
});

const validationPageUrl= YOUR_CREATED_URL

const validationUrl = await serializeUrlWithSignerPayload(validationPageUrl, signerObject)

You can even create a QR code that will send the user to your given url.

import { createNewSigner, generateQRCodeUrl } from "@cometh/connect-sdk-4337";

const signerObject = await createNewSigner({
    smartAccountAddress: TARGET_ACCOUNT_ADDRESS,
});

const validationPageUrl= YOUR_CREATED_URL

const qrCode = await generateQRCodeUrl(validationPageUrl, signerObject)

3. Validate the new device

On your validation page, after extracting the data from the url, you'll be able to call the validateAddDevice method on your main device. This method will deploy a passkey signer for your safe and add it as a new owner.

await smartAccountClient.validateAddDevice({ signer });

You'll then be able to use your new device the same way you use the main one.