@turnkey/iframe-stamper
v2.0.0
Published
Iframe-based stamper for @turnkey/http
Downloads
115,268
Readme
@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.