@turnkey/iframe-stamper


This package contains functions to stamp a Turnkey request through credentials contained in an iframe. It is meant to be used with @turnkey/http to build flows. To stamp the request, use the Recovery and Auth flows to request and inject a credential bundle.

Usage:

Recovery and Auth

``ts
import { IframeStamper } from "@turnkey/iframe-stamper";
import { TurnkeyClient } from "@turnkey/http";

const TurnkeyIframeContainerId = "turnkey-iframe-container";
const TurnkeyIframeElementId = "turnkey-iframe";

const iframeStamper = new IframeStamper({
iframeUrl: process.env.AUTH_IFRAME_URL!,
iframeContainer: document.getElementById(TurnkeyIframeContainerId),
iframeElementId: TurnkeyIframeElementId,
});

// This inserts the iframe in the DOM and returns the public key
const publicKey = await iframeStamper.init();

// Injects a new credential in the iframe
const injected = await iframeStamper.injectCredentialBundle(credentialBundle);

// New HTTP client able to sign with the credentials inside of the iframe
const httpClient = new TurnkeyClient(
{ baseUrl: "https://api.turnkey.com" },
iframeStamper,
);
`

Key or Wallet Export

`ts
import { IframeStamper } from "@turnkey/iframe-stamper";
import { TurnkeyClient } from "@turnkey/http";

const TurnkeyIframeContainerId = "turnkey-iframe-container";
const TurnkeyIframeElementId = "turnkey-iframe";

const iframeStamper = new IframeStamper({
iframeUrl: process.env.EXPORT_IFRAME_URL!,
iframeContainer: document.getElementById(TurnkeyIframeContainerId),
iframeElementId: TurnkeyIframeElementId,
});

// This inserts the iframe in the DOM and returns the public key
const publicKey = await iframeStamper.init();

// Injects a bundle containing the encrypted wallet seedphrase into the iframe
// exportBundle is the response from requesting ACTIVITY_TYPE_EXPORT_WALLET
const injected = await iframeStamper.injectWalletExportBundle(exportBundle);

// If the bundle is successfully injected, the iframe is now displaying the
// wallet seedphrase to the user
if (injected !== true) {
throw new Error("unexpected error while injecting export bundle");
}

// Display the iframe to the user with their seedphrase.
setIframeDisplay("block");
`

Key or Wallet Import

`ts
import { IframeStamper } from "@turnkey/iframe-stamper";
import { TurnkeyClient } from "@turnkey/http";

const TurnkeyIframeContainerId = "turnkey-iframe-container";
const TurnkeyIframeElementId = "turnkey-iframe";

const iframeStamper = new IframeStamper({
iframeUrl: process.env.IMPORT_IFRAME_URL!,
iframeContainer: document.getElementById(TurnkeyIframeContainerId),
iframeElementId: TurnkeyIframeElementId,
});

// This inserts the iframe in the DOM
await iframeStamper.init();

// Injects a bundle containing the secure enclave's public key into the iframe's local storage
// importBundle is the response from requesting ACTIVITY_TYPE_INIT_IMPORT_WALLET
const injected = await iframeStamper.injectImportBundle(importBundle);

if (injected !== true) {
throw new Error("unexpected error while injecting import bundle");
}

// Display the text input that the user can enter their seedphrase into
setIframeDisplay("block");

// Once the user has entered their seedphrase, trigger this call to the iframe that
// 1) encrypts their seedphrase using the secure enclave's public key from the previous step
// 2) sends this ciphertext and a public key generated by the client to your page
const encryptedBundle = await iframeStamper.extractWalletEncryptedBundle();

// Now you can pass this encryptedBundle as a request to ACTIVITY_TYPE_IMPORT_WALLET.
``