From d981916724e14456295e3c9dfb120bc8abd39c3a Mon Sep 17 00:00:00 2001 From: Jordan Leigh Date: Mon, 24 Jun 2024 16:47:50 -0400 Subject: [PATCH] docs update --- docs/sdks/react.mdx | 8 ++-- .../code-examples/add-credential.mdx | 37 ++++++++++++++++++- .../code-examples/authenticate-user-email.mdx | 14 ++++--- .../code-examples/email-recovery.mdx | 8 ---- 4 files changed, 48 insertions(+), 19 deletions(-) delete mode 100644 docs/solutions/embedded-wallets/code-examples/email-recovery.mdx diff --git a/docs/sdks/react.mdx b/docs/sdks/react.mdx index 6c02171..6cf72b5 100644 --- a/docs/sdks/react.mdx +++ b/docs/sdks/react.mdx @@ -117,7 +117,7 @@ In any React component nested under the `TurnkeyProvider`, you'll be able to cal {`import { useTurnkey } from "@turnkey/sdk-react";`} - {`\nconst { turnkey, passkeyClient, iframeClient } = useTurnkey();`} + {`\nconst { turnkey, passkeyClient, authIframeClient } = useTurnkey();`} {`\n\nconst loginWithPasskey = async () => { await passkeyClient?.login(); }`} @@ -126,13 +126,13 @@ In any React component nested under the `TurnkeyProvider`, you'll be able to cal "emailAuth", [{ email: "", - targetPublicKey: iframeClient.iframePublicKey, + targetPublicKey: authIframeClient.iframePublicKey, organizationId: "" }] ) }`} {`\n\nconst loginWithIframe = async (credentialBundle: string) => { - await iframeClient?.injectCredentialBundle(credentialBundle); - await iframeClient?.login(); + await authIframeClient?.injectCredentialBundle(credentialBundle); + await authIframeClient?.login(); }`} diff --git a/docs/solutions/embedded-wallets/code-examples/add-credential.mdx b/docs/solutions/embedded-wallets/code-examples/add-credential.mdx index 36cd4ba..d5ed17c 100644 --- a/docs/solutions/embedded-wallets/code-examples/add-credential.mdx +++ b/docs/solutions/embedded-wallets/code-examples/add-credential.mdx @@ -10,4 +10,39 @@ import TabItem from "@theme/TabItem"; import CodeBlock from "@theme/CodeBlock"; import Parameter from "@site/src/components/parameter"; -#### TODO: ADD CREDENTIAL +#### 1. Initialize the Passkey Client + + + {`import { Turnkey, TurnkeySDKBrowserConfig } from "@turnkey/sdk-browser";`} + {`\nimport turnkeyConfig from "./turnkey.json"`} + {`\n\nconst turnkey = new Turnkey(turnkeyConfig);`} + {`\nconst passkeyClient = turnkey.passkeyClient();`} + + +#### 2. Create a Local Passkey Credential + +This will prompt a user natively in their browser to create a passkey. + + + {`const credential = await passkeyClient.createUserPasskey({ + publicKey: { + user: { + name: , + displayName: + } + } +})`} + + +#### 3. Call `createAuthenticators` to add the credential + + + {`const authenticatorsResponse = await passkeyClient.createAuthenticators({ + authenticators: [{ + authenticatorName: , + challenge: credential.encodedChallenge, + attestation: credential.attestation + }], + userId: +})`} + diff --git a/docs/solutions/embedded-wallets/code-examples/authenticate-user-email.mdx b/docs/solutions/embedded-wallets/code-examples/authenticate-user-email.mdx index 32b8706..532ca90 100644 --- a/docs/solutions/embedded-wallets/code-examples/authenticate-user-email.mdx +++ b/docs/solutions/embedded-wallets/code-examples/authenticate-user-email.mdx @@ -10,6 +10,8 @@ import TabItem from "@theme/TabItem"; import CodeBlock from "@theme/CodeBlock"; import Parameter from "@site/src/components/parameter"; +This flow can both be used to login a user with only an email address, or to recover the account of a user that has lost their passkey credential with their email address. The end result is a valid `TurnkeyClient` which can also be used to add another authenbticator if needed. + #### 1. Initialize Turnkey @@ -20,7 +22,7 @@ import Parameter from "@site/src/components/parameter"; #### 2. Initialize the Iframe Client -Note that the iframe client must be initialized with the dom element where the iframe will be injected. If you are using the [react-sdk](/sdks/react) you can import the `iframeClient` from the `useTurnkey()` hook without this step and the iframe dom element will be managed for you. Note that the `iframeClient` must be initialized before calling `emailAuth` because you need the `iframePublicKey` as a parameter to the `emailAuth` call. +Note that the iframe client must be initialized with the dom element where the iframe will be injected. If you are using the [react-sdk](/sdks/react) you can import the `authIframeClient` from the `useTurnkey()` hook without this step and the iframe dom element will be managed for you. Note that the `iframeClient` must be initialized before calling `emailAuth` because you need the `iframePublicKey` as a parameter to the `emailAuth` call. {`import { Turnkey, TurnkeySDKBrowserConfig } from "@turnkey/sdk-browser";`} @@ -29,7 +31,7 @@ Note that the iframe client must be initialized with the dom element where the i {`\n\nconst iframeContainerId = "turnkey-auth-iframe-container-id";`} {`\n\n// ensure the HTML element exists somewhere in the rendered DOM`} {`\n
`} - {`\n\nconst iframeClient = await turnkey.iframeClient(document.getElementById(iframeContainerId))`} + {`\n\nconst authIframeClient = await turnkey.iframeClient(document.getElementById(iframeContainerId))`} #### 3. Call `emailAuth` from your backend @@ -39,7 +41,7 @@ Note that the iframe client must be initialized with the dom element where the i "emailAuth", [{ email: , - targetPublicKey: iframeClient.iframePublicKey, + targetPublicKey: authIframeClient.iframePublicKey, organizationId: }] )`} @@ -61,10 +63,10 @@ If you need to lookup the user `subOrganizationId` by email, you can call the `g #### 4. Inject the emailed `credentialBundle` into the iframe to authenticate the user - {`const authenticationResponse = await iframeClient.injectCredentialBundle(credentialBundle); + {`const authenticationResponse = await authIframeClient.injectCredentialBundle(credentialBundle); if (authenticationResponse) { // user is authenticated and can perform actions from the \`iframeClient\` - await iframeClient.login(); + await authIframeClient.login(); navigate("/authenticated-route"); } else { // credential bundle does not match emailed credential @@ -85,7 +87,7 @@ if (authenticationResponse) { {`import { DEFAULT_ETHEREUM_ACCOUNTS } from "@turnkey/sdk-browser";`} - {`\nconst newWalletResponse = await iframeClient.createWallet({ + {`\nconst newWalletResponse = await authIframeClient.createWallet({ walletName: "New Wallet for User", accounts: DEFAULT_ETHEREUM_ACCOUNTS })`} diff --git a/docs/solutions/embedded-wallets/code-examples/email-recovery.mdx b/docs/solutions/embedded-wallets/code-examples/email-recovery.mdx deleted file mode 100644 index 7fd2fb6..0000000 --- a/docs/solutions/embedded-wallets/code-examples/email-recovery.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: "Recovering a Wallet with Email" -sidebar_position: 5 -description: Recovering a Wallet with Email -slug: /embedded-wallets/code-examples/email-recovery ---- - -#### TODO: EMAIL RECOVERY