SignerUsing Alchemy Signer

Export Private Key

The Alchemy Signer allows you to export a user’s private key, allowing them a right to exit at any time. It is considered a best practice to allow your users to export their private key, as it gives them full control over their account. The private key export method does not rely on Alchemy’s infrastructure, so even if Alchemy is down, a user can still export their private key.

Using useExportAccount

A hook use to export the private key for an account. It returns the mutation functions to kick off the export process, as well as a component to render the account recovery details in an iframe.

Import

1import { useExportAccount } from "@account-kit/react";

Usage

1import { useExportAccount } from "@account-kit/react";
2
3const {
4  exportAccount,
5  isExported,
6  isExporting,
7  error,
8  ExportAccountComponent,
9} = useExportAccount({
10  params: {
11    iframeContainerId: "my-iframe-container",
12  },
13});

Using the signer

To add export private key functionality to your app, you can use the exportPrivateKey method on the signer.

1import React from "react";
2import { useMutation } from "@tanstack/react-query";
3import { signer } from "./signer";
4
5const TurnkeyExportWalletContainerId = "turnkey-export-wallet-container-id";
6const TurnkeyExportWalletElementId = "turnkey-export-wallet-element-id";
7
8// This allows us to style the embedded iframe
9const iframeCss = `
10iframe {
11    box-sizing: border-box;
12    width: 100%;
13    height: 120px;
14    border-radius: 8px;
15    border-width: 1px;
16    border-style: solid;
17    border-color: rgba(216, 219, 227, 1);
18    padding: 20px;
19}
20`;
21
22export const ExportPrivateKeyView = () => {
23  // we are using react-query to handle loading states more easily, but feel free to use w/e state management library you prefer
24  const {
25    mutate: exportWallet,
26    isLoading,
27    data,
28  } = useMutation({
29    mutationFn: () =>
30      signer.exportWallet({
31        iframeContainerId: TurnkeyExportWalletContainerId,
32        iframeElementId: TurnkeyExportWalletElementId,
33      }),
34  });
35
36  // Once the user clicks the button, a request will be sent to initialize private key export
37  // once the request is complete, the iframe will be rendered with either
38  // 1. the private key if the user is logged in with a passkey
39  // 2. the seed phrase if the user is logged in with email
40  return (
41    <div className="flex flex-col gap-2">
42      {!data ? (
43        <button onClick={() => exportWallet()} disabled={isLoading}>
44          Export Wallet
45        </button>
46      ) : (
47        <strong>Seed Phrase</strong>
48      )}
49      <div
50        className="w-full"
51        style={{ display: !data ? "none" : "block" }}
52        id={TurnkeyExportWalletContainerId}
53      >
54        <style>{iframeCss}</style>
55      </div>
56    </div>
57  );
58};