Skip to content

Commit

Permalink
Merge pull request #62 from tkhq/olivia/export-guide
Browse files Browse the repository at this point in the history
Add wallet export guide
  • Loading branch information
Olivia Thet authored Nov 28, 2023
2 parents 811de13 + 46eee23 commit e0540ef
Show file tree
Hide file tree
Showing 13 changed files with 184 additions and 21 deletions.
1 change: 1 addition & 0 deletions docs/Introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ At a structural level, a Turnkey Organization is comprised of a few core resourc
- <b>Users:</b> Humans or machines with access to an Organization
- <b>Policies:</b> Rules defining which users can take which actions within an Organization
- <b>Private Keys:</b> Crypto private keys, used to derive addresses and sign transactions
- <b>Wallets:</b> A collection of crypto private keys that share a common seed
- <b>Credentials:</b> Used to verify Users - WebAuthn authenticators for human Users and API keys for API Users


Expand Down
26 changes: 19 additions & 7 deletions docs/getting-started/Examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@ That said, we have built out several example services and applications to help i
| [`demo-ethers-passkeys`](https://github.com/tkhq/demo-ethers-passkeys) | A NextJS app that demonstrates how to use `@turnkey/ethers` to build a passkey-powered application |
| [`demo-viem-passkeys`](https://github.com/tkhq/demo-viem-passkeys) | A NextJS app that demonstrates how to use `@turnkey/viem` to build a passkey-powered application |
| [`deployer`](https://github.com/tkhq/sdk/tree/main/examples/deployer/) | Compile and deploy a smart contract |
| [`email-recovery`](https://github.com/tkhq/sdk/tree/main/examples/email-recovery/) | A NextJS app that demonstrates how to use `@turnkey/iframe-stamper` to perform email |
| [`rebalancer`](https://github.com/tkhq/sdk/tree/main/examples/rebalancer/) | A demo application which showcases an example of how to use Turnkey for managing multiple types of keys & users |
| [`sweeper`](https://github.com/tkhq/sdk/tree/main/examples/sweeper/) | Sweep funds from one address to a different address |
| [`trading-runner`](https://github.com/tkhq/sdk/tree/main/examples/trading-runner/) | A sample application demonstrating a trading operation, using various private keys, users, and policies, powered by Uniswap |
| [`wallet-export`](https://github.com/tkhq/sdk/tree/main/examples/wallet-export/) | A NextJS app that demonstrates how to use `@turnkey/iframe-stamper` to export a wallet as a mnemonic |
| [`with-ethers`](https://github.com/tkhq/sdk/tree/main/examples/with-ethers/) | Create a new Ethereum address, then sign and broadcast a transaction using the Ethers signer with Infura |
| [`with-viem`](https://github.com/tkhq/sdk/tree/main/examples/with-viem/) | Sign and broadcast a transaction using the Turnkey Custom Account and Infura |
| [`with-cosmjs`](https://github.com/tkhq/sdk/tree/main/examples/with-cosmjs/) | Create a new Cosmos address, then sign and broadcast a transaction on Celestia testnet using the CosmJS signer |
Expand All @@ -38,9 +40,11 @@ That said, we have built out several example services and applications to help i

A minimal consumer wallet app powered by Turnkey. Behind the scenes, it uses [`@turnkey/ethers`](https://www.npmjs.com/package/@turnkey/ethers) for signing and WalletConnect (v1) for accessing dapps.

<video controls width="800px">
<source src="https://github.com/tkhq/demo-consumer-wallet/assets/127255904/2c3409df-2d7c-4ec3-9aa8-e2944a0b0e0a"/>
</video>
<p style={{ textAlign: "center" }}>
<video controls width="800px">
<source src="https://github.com/tkhq/demo-consumer-wallet/assets/127255904/2c3409df-2d7c-4ec3-9aa8-e2944a0b0e0a"/>
</video>
</p>

See https://github.com/tkhq/demo-consumer-wallet for the code.

Expand All @@ -49,30 +53,38 @@ See https://github.com/tkhq/demo-consumer-wallet for the code.
A wallet application showing how users can register and authenticate using passkeys.
This demo uses the Turnkey API to create a new [Turnkey Sub-Organization](./Sub-Organizations.md) for each user, create a testnet Ethereum address and send a transaction on Sepolia (ETH testnet).

<img src="/demo-passkey-wallet.png" alt="homepage screenshot" width="800px"/>
<p style={{ textAlign: "center" }}>
<img src="/demo-passkey-wallet.png" alt="demo passkey wallet screenshot" width="800px"/>
</p>

See https://wallet.tx.xyz (and https://github.com/tkhq/demo-passkey-wallet for the code).

### Demo Ethers Passkeys ([code](https://github.com/tkhq/demo-ethers-passkeys))

A simple application demonstrating how to create sub-organizations, create private keys, and sign with the [`@turnkey/ethers`](https://github.com/tkhq/sdk/tree/main/packages/ethers) signer, using passkeys.

<img src="/ethers-ui-screenshot.png" alt="homepage screenshot" width="800px"/>
<p style={{ textAlign: "center" }}>
<img src="/ethers-ui-screenshot.png" alt="ethers ui screenshot" width="800px"/>
</p>

See https://github.com/tkhq/demo-ethers-passkeys for the code.

### Demo Viem Passkeys ([code](https://github.com/tkhq/demo-viem-passkeys))

A similar, simple application demonstrating how to create sub-organizations, create private keys, and sign with the [`@turnkey/viem`](https://github.com/tkhq/sdk/tree/main/packages/viem) signer, using passkeys.

<img src="/viem-ui-screenshot.png" alt="homepage screenshot" width="800px"/>
<p style={{ textAlign: "center" }}>
<img src="/viem-ui-screenshot.png" alt="viem ui screenshot" width="800px"/>
</p>

See https://github.com/tkhq/demo-viem-passkeys for the code.

### Automated ETH staking ([code](https://docs.figment.io/recipes/stake-eth-from-turnkey))

A simple example using Turnkey and Figment to easily automate ETH staking.

<img src="/img/staking_example.png" alt="turnkey figment integration" width="700px"/>
<p style={{ textAlign: "center" }}>
<img src="/img/staking_example.png" alt="turnkey figment integration" width="700px"/>
</p>

See https://docs.figment.io/recipes/stake-eth-from-turnkey for the code.
3 changes: 3 additions & 0 deletions docs/getting-started/Wallets.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,6 @@ Turnkey also supports raw private keys, but we recommend using Wallets since the
- Wallets can generate millions of addresses for various digital assets
- Wallets can be represented by a checksummed, mnemonic phrase making them easier to backup and recover

## Export keys

Exporting on Turnkey enables you or your end users to export a copy of a Wallet or Private Key from our system at any time. While most Turnkey users opt to keep Wallets within Turnkey's secure infrastructure, the export functionality means you are never locked into Turnkey, and gives you the freedom to design your own backup processes as you see fit. Check out our [Export Wallet guide](../integration-guides/export-wallets.md) to allow your users to securely export their wallets.
10 changes: 7 additions & 3 deletions docs/getting-started/email-recovery.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ Email recovery starts with a new activity posted to Turnkey. This activity has t

This activity generates a new temporary API key pair (a "recovery credential"), saves the public key in organization data under the target user, and sends an email with the encrypted recovery credential:

<img src="/img/recovery_email.png" width="420" />
<p style={{ textAlign: "center" }}>
<img src="/img/recovery_email.png" alt="recovery email" width="420" />
</p>

Initiating a new email recovery require proper permissions via policies or being a parent organization. See [Authorization](#authorization) for more details.

Expand All @@ -33,7 +35,7 @@ Authorization for email recovery is based on our usual activity authorization: o
* `ACTIVITY_TYPE_RECOVER_USER` should be signed by the recovery credential sent via email. Even if not explicitly allowed by policy, a user is always able to add credentials to their own user. This includes adding a new authenticator when authenticated with a recovery credential. In other words, no special policy is needed to make this work: users are able to recover out-of-the-box.

<p style={{textAlign: 'center'}}>
<img src="/img/diagrams/email_recovery_authorization.png" width="500" height="200"/>
<img src="/img/diagrams/email_recovery_authorization.png" alt="email recovery authorization" width="500" height="200"/>
</p>


Expand Down Expand Up @@ -63,7 +65,9 @@ If you _never_ want to have email recovery enabled, our `CREATE_SUB_ORGANIZATION

Unlike typical email recovery functionality, Turnkey's email recovery doesn't send unencrypted tokens via emails. This ensures no man-in-the-middle attack can happen: even if the content of the recovery email is leaked, an attacker wouldn't be able to decrypt the recovery credential. The following diagram summarizes the flow:

<img src="/img/email_recovery_cryptography.png" />
<p style={{ textAlign: "center" }}>
<img src="/img/email_recovery_cryptography.png" alt="email recovery cryptography" />
</p>

Our email recovery flow works by anchoring recovery in a **target encryption key** (TEK). This target encryption key is a standard P-256 key pair and can be created in many ways: completely offline, or online inside of script using the web crypto APIs.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ In the rest of this guide we'll assume you are using these helpers.

Here's a diagram summarizing the email recovery flow step-by-step ([direct link](/img/email_recovery_steps.png)):

<img src="/img/email_recovery_steps.png" />
<p style={{ textAlign: "center" }}>
<img src="/img/email_recovery_steps.png" alt="email recovery steps" />
</p>

Let's review these steps in detail:

Expand Down
123 changes: 123 additions & 0 deletions docs/integration-guides/export-wallets.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
---
sidebar_position: 3
description: Learn about Wallet Export on Turnkey
slug: /integration-guides/export-wallets
---
# Export Wallet

Turnkey's export functionality allows your end users to backup or transfer a [Wallet](../getting-started/Wallets.md) by securely viewing the wallet's [mnemonic phrase](https://learnmeabitcoin.com/technical/mnemonic). We engineered this feature to ensure that the user can export their mnemonic without exposing the mnemonic itself to Turnkey or your application.

Follow along with the guide below to set up Wallet Export for your end users.

## Before you start
Make sure you have created a wallet for your user. Check out our [Quickstart guide](../getting-started/Quickstart.md) if you need help getting started.


If you'd like to use a sub-organization as an end-user controlled wallet, follow our [Wallet integration guide](./sub-organizations-as-wallets.md).


## Helper packages

* We have released open-source code to create target encryption keys and decrypt exported wallet mnemonics. We've deployed a static HTML page hosted on `export.turnkey.com` meant to be embedded as an iframe element (see the code [here](https://github.com/tkhq/frames)). This ensures the mnemonics are encrypted to keys that the user has access to, but that your organization does not (because they live in the iframe, on a separate domain).
* We have also built a package to help you insert this iframe and interact with it in the context of export: [`@turnkey/iframe-stamper`](https://www.npmjs.com/package/@turnkey/iframe-stamper)

In the rest of this guide we'll assume you are using these helpers.

## Export step-by-step

Here's a diagram summarizing the wallet export flow step-by-step ([direct link](/img/wallet_export_steps.png)):

<p style={{ textAlign: "center" }}>
<img src="/img/wallet_export_steps.png" alt="wallet export steps" height="200" />
</p>

Let's review these steps in detail:

1. When a user on your application clicks "export", display a new export UI. We recommend setting this export UI as a new hosted page of your application that contains language explaining the security best practices users should follow once they've successfully exported their wallet. Remember: once the wallet has been exported, Turnkey can no longer ensure its security.

While the UI is in a loading state, your application uses [`@turnkey/iframe-stamper`](https://www.npmjs.com/package/@turnkey/iframe-stamper) to insert a new iframe element:
```js
const iframeStamper = new IframeStamper({
iframeUrl: "https://export.turnkey.com",
// Configure how the iframe element is inserted on the page
iframeContainerId: "your-container",
iframeElementId: "turnkey-iframe",
});

// Inserts the iframe in the DOM. This creates the new encryption target key
const publicKey = await iframeStamper.init();

// Set state to not display iframe
let displayIframe = "none";

return (
// The iframe element can be hidden until the wallet is exported
<div style={{ display: displayIframe }} />
);
```
2. Your code receives the iframe public key. Your application prompts the user to sign a new `EXPORT_WALLET` activity with the wallet ID and the iframe public key in the parameters.
3. Your application polls for the activity response, which contains an export bundle. Remember: this export bundle is an encrypted mnemonic which can only be decrypted within the iframe.

Need help setting up async polling? Checkout our guide and helper [here](https://github.com/tkhq/sdk/tree/main/packages/http#withasyncpolling-helper).
4. Your application injects the export bundle into the iframe for decryption and displays the iframe upon success:
```js
// Inject export bundle into iframe
let success = await iframeStamper.injectWalletExportBundle(exportBundle);
if (success !== true) {
throw new Error("unexpected error while injecting export bundle");
}
// If successfully injected, update the state to display the iframe
iframeDisplay = "block";
```

Export is complete! The iframe now displays a numbered 3-column grid of words that form the mnemonic, directly to your end user.

<p style={{ textAlign: "center" }}>
<img src="/img/wallet_export_mnemonic.png" alt="wallet mnemonic" height="280" />
</p>

The exported wallet will remain stored within Turnkey’s infrastructure. In your Turnkey dashboard, the exported user Wallet will be flagged as “Exported”.

## UI customization

Everything is customizable in the export iframe except the 3-column grid of mnemonic words. Here's an example of how you can configure the styling of the iframe.
```js
const iframeCss = `
iframe {
width: 400px;
height: 330px;
border: none;
}
`;
return (
<div style={{ display: iframeDisplay }} id="your-container">
<style>{iframeCss}</style>
</div>
);
```
## Private Keys
Turnkey also supports exporting raw private keys. To implement export for private keys, follow the same steps above, but instead use the `EXPORT_PRIVATE_KEY` activity and the `injectKeyExportBundle` method from the [`@turnkey/iframe-stamper`](https://www.npmjs.com/package/@turnkey/iframe-stamper). At the end of a successful private key export, the iframe displays a hexadecimal-encoded raw private key.
## Cryptographic details
Turnkey's export functionality ensures that neither your application nor Turnkey can view the wallet mnemonic or private key.

It works by anchoring export in a **target encryption key** (TEK). This target encryption key is a standard P-256 key pair and can be created in many ways: completely offline, or online inside of script using the web crypto APIs.

The following diagram summarizes the flow:

<p style={{ textAlign: "center" }}>
<img src="/img/wallet_export_cryptography.png" alt="export cryptography" height="320" />
</p>

The public part of this key pair is passed as a parameter inside of a signed `EXPORT_WALLET` or `EXPORT_PRIVATE_KEY` activity.

Our enclave encrypts the wallet's mnemonic or raw private key to the user's TEK using the **Hybrid Public Key Encryption standard**, also known as **HPKE** or [RFC 9180](https://datatracker.ietf.org/doc/rfc9180/).

Once the activity succeeds, the encrypted mnemonic or private key can be decrypted by the target public key offline or in an online script.
6 changes: 4 additions & 2 deletions docs/passkeys/discoverable.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,10 @@ With terminology out of the way, what is a "discoverable" credential compared to

A discoverable credential is a self-contained key pair, stored on the end-user's device. Discoverable credentials are preferred because keys are self-contained, can easily be synced and can be used across devices independently. Crucially for UX, the end-user is able to list their passkeys and choose which device/passkey they'd like to use:

<img src="/img/passkeys/discoverable_device_choice.png" alt="Device selection on Chrome" width="400px" />
<img src="/img/passkeys/discoverable_passkey_choice.png" alt="Passkey selection on Chrome" width="321px" style={{marginLeft: '10px'}} />
<p style={{ textAlign: "center" }}>
<img src="/img/passkeys/discoverable_device_choice.png" alt="device selection on Chrome" width="400px" />
<img src="/img/passkeys/discoverable_passkey_choice.png" alt="passkey selection on Chrome" width="321px" style={{marginLeft: '10px'}} />
</p>

With discoverable credentials you don't have to keep track of credential IDs. Your authentication flow can simply be: "prompt the user with passkey authentication", and let the browser or device native UX handle the rest! The downside is you lose some control over these prompts, because they will vary depending on your users' OS and browser.

Expand Down
4 changes: 3 additions & 1 deletion docs/passkeys/integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ sidebar_position: 2

A typical passkey flow is composed of 4 main steps, depicted below:

<img src="/img/passkeys/turnkey_passkey_flow.png" alt="Passkey prompt on Turnkey" width="920px" />
<p style={{ textAlign: "center" }}>
<img src="/img/passkeys/turnkey_passkey_flow.png" alt="passkey prompt on Turnkey" width="920px" />
</p>

1. Your app frontend triggers a passkey prompt.
2. Your end-user uses their device to produce a signature with their passkey, and a signed request is produced.
Expand Down
6 changes: 4 additions & 2 deletions docs/passkeys/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,10 @@ Support also varies by operating system: [this matrix](https://passkeys.dev/devi

We believe **it's time to move away from passwords** so we've built Turnkey without them. When you authenticate to Turnkey you'll be prompted to create a new passkey:

<img src="/img/passkeys/turnkey_authenticator_selection.png" alt="Authenticator selection on Turnkey" width="400px" />
<img src="/img/passkeys/turnkey_passkey_prompt.png" alt="Passkey prompt on Turnkey" width="420px" />
<p style={{ textAlign: "center" }}>
<img src="/img/passkeys/turnkey_authenticator_selection.png" alt="Authenticator selection on Turnkey" width="400px" />
<img src="/img/passkeys/turnkey_passkey_prompt.png" alt="Passkey prompt on Turnkey" width="420px" style={{marginLeft: '10px'}} />
</p>

Authentication to Turnkey requires a passkey signature. No password needed!

Expand Down
Loading

0 comments on commit e0540ef

Please sign in to comment.