@turnkey/iframe-stamper

@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

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

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

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.