From 09ebf4c854264907f70c16e2a96db96205237494 Mon Sep 17 00:00:00 2001 From: Andras Szucs Date: Fri, 5 Jun 2026 19:12:16 +0200 Subject: [PATCH 1/4] docs(wallets): add React Native focused documentation --- docs/pages/wallets/auth/google-oauth.mdx | 4 + docs/pages/wallets/auth/magic-link.mdx | 4 + docs/pages/wallets/auth/passkeys.mdx | 4 + docs/pages/wallets/export.mdx | 4 + docs/pages/wallets/hooks/export-web-view.mdx | 81 + ...thenticate-oauth-with-expo-web-browser.mdx | 86 + docs/pages/wallets/quickstart.mdx | 4 + .../wallets/react-native/configuration.mdx | 170 + .../react-native/domain-association.mdx | 164 + .../wallets/react-native/export-wallet.mdx | 84 + .../wallets/react-native/google-oauth.mdx | 148 + .../pages/wallets/react-native/magic-link.mdx | 149 + docs/pages/wallets/react-native/passkeys.mdx | 117 + .../pages/wallets/react-native/quickstart.mdx | 403 ++ pnpm-lock.yaml | 5885 +++++++++++++++++ vocs.config.tsx | 42 + 16 files changed, 7349 insertions(+) create mode 100644 docs/pages/wallets/hooks/export-web-view.mdx create mode 100644 docs/pages/wallets/hooks/use-authenticate-oauth-with-expo-web-browser.mdx create mode 100644 docs/pages/wallets/react-native/configuration.mdx create mode 100644 docs/pages/wallets/react-native/domain-association.mdx create mode 100644 docs/pages/wallets/react-native/export-wallet.mdx create mode 100644 docs/pages/wallets/react-native/google-oauth.mdx create mode 100644 docs/pages/wallets/react-native/magic-link.mdx create mode 100644 docs/pages/wallets/react-native/passkeys.mdx create mode 100644 docs/pages/wallets/react-native/quickstart.mdx create mode 100644 pnpm-lock.yaml diff --git a/docs/pages/wallets/auth/google-oauth.mdx b/docs/pages/wallets/auth/google-oauth.mdx index 03be8e3..602d6e5 100644 --- a/docs/pages/wallets/auth/google-oauth.mdx +++ b/docs/pages/wallets/auth/google-oauth.mdx @@ -4,6 +4,10 @@ **USE FOR INTERNAL TESTING PURPOSES ONLY.** You may use these features solely for internal evaluation purposes on supported testnets. DO NOT use for production use or share with your users. Wallets created during this preview ("Alpha Wallets") will be discontinued. Any tokens remaining within Alpha Wallets will be permanently lost upon discontinuance. Any mainnet tokens sent to an Alpha Wallet will not be deposited and will be permanently lost when discontinued. We are unable to help recover any lost funds from Alpha Wallets. We provide all previews on an "as is" basis without warranty of any kind, and we may terminate or suspend the availability of any preview at any time. ::: +:::info[Using React Native?] +This page covers the web flow. For Expo / React Native, see [Google OAuth on React Native](/wallets/react-native/google-oauth). +::: + Google OAuth lets users sign in with their Google account using a popup-based flow. The SDK handles the popup, redirect, and session creation automatically. By default, the Google OAuth flow uses a Zerodev-managed Google account for authentication. This allows you to get started quickly without any additional configuration. You can customize the OAuth flow by providing your own Google OAuth client ID and secret in the developer dashboard. diff --git a/docs/pages/wallets/auth/magic-link.mdx b/docs/pages/wallets/auth/magic-link.mdx index 8bd808c..db184f3 100644 --- a/docs/pages/wallets/auth/magic-link.mdx +++ b/docs/pages/wallets/auth/magic-link.mdx @@ -4,6 +4,10 @@ **USE FOR INTERNAL TESTING PURPOSES ONLY.** You may use these features solely for internal evaluation purposes on supported testnets. DO NOT use for production use or share with your users. Wallets created during this preview ("Alpha Wallets") will be discontinued. Any tokens remaining within Alpha Wallets will be permanently lost upon discontinuance. Any mainnet tokens sent to an Alpha Wallet will not be deposited and will be permanently lost when discontinued. We are unable to help recover any lost funds from Alpha Wallets. We provide all previews on an "as is" basis without warranty of any kind, and we may terminate or suspend the availability of any preview at any time. ::: +:::info[Using React Native?] +This page covers the web flow. For Expo / React Native, see [Magic Link on React Native](/wallets/react-native/magic-link). +::: + Magic links let users authenticate by clicking a link in their email. The link redirects to your app where the SDK completes the verification. ## Hooks diff --git a/docs/pages/wallets/auth/passkeys.mdx b/docs/pages/wallets/auth/passkeys.mdx index 2e9c525..7ef31ef 100644 --- a/docs/pages/wallets/auth/passkeys.mdx +++ b/docs/pages/wallets/auth/passkeys.mdx @@ -4,6 +4,10 @@ **USE FOR INTERNAL TESTING PURPOSES ONLY.** You may use these features solely for internal evaluation purposes on supported testnets. DO NOT use for production use or share with your users. Wallets created during this preview ("Alpha Wallets") will be discontinued. Any tokens remaining within Alpha Wallets will be permanently lost upon discontinuance. Any mainnet tokens sent to an Alpha Wallet will not be deposited and will be permanently lost when discontinued. We are unable to help recover any lost funds from Alpha Wallets. We provide all previews on an "as is" basis without warranty of any kind, and we may terminate or suspend the availability of any preview at any time. ::: +:::info[Using React Native?] +This page covers the web flow. For Expo / React Native, see [Passkeys on React Native](/wallets/react-native/passkeys). +::: + Passkeys use the [WebAuthn](https://webauthn.guide/) standard for passwordless authentication. Users authenticate with biometrics (Face ID, Touch ID, fingerprint) or a hardware security key. ## Configure RP ID (optional) diff --git a/docs/pages/wallets/export.mdx b/docs/pages/wallets/export.mdx index 256f62f..8decb84 100644 --- a/docs/pages/wallets/export.mdx +++ b/docs/pages/wallets/export.mdx @@ -4,6 +4,10 @@ **USE FOR INTERNAL TESTING PURPOSES ONLY.** You may use these features solely for internal evaluation purposes on supported testnets. DO NOT use for production use or share with your users. Wallets created during this preview ("Alpha Wallets") will be discontinued. Any tokens remaining within Alpha Wallets will be permanently lost upon discontinuance. Any mainnet tokens sent to an Alpha Wallet will not be deposited and will be permanently lost when discontinued. We are unable to help recover any lost funds from Alpha Wallets. We provide all previews on an "as is" basis without warranty of any kind, and we may terminate or suspend the availability of any preview at any time. ::: +:::info[Using React Native?] +The export hooks on this page are web-only. On Expo / React Native, use the [`ZeroDevExportWebView` component](/wallets/react-native/export-wallet) instead. +::: + The SDK supports exporting the user's wallet as a seed phrase or private key. The key material is displayed inside a secure iframe and never touches your application code. ## Hooks diff --git a/docs/pages/wallets/hooks/export-web-view.mdx b/docs/pages/wallets/hooks/export-web-view.mdx new file mode 100644 index 0000000..bfe9516 --- /dev/null +++ b/docs/pages/wallets/hooks/export-web-view.mdx @@ -0,0 +1,81 @@ +# ZeroDevExportWebView [Component for exporting a wallet on React Native] + +:::danger[IMPORTANT] +**USE FOR INTERNAL TESTING PURPOSES ONLY.** You may use these features solely for internal evaluation purposes on supported testnets. DO NOT use for production use or share with your users. Wallets created during this preview ("Alpha Wallets") will be discontinued. Any tokens remaining within Alpha Wallets will be permanently lost upon discontinuance. Any mainnet tokens sent to an Alpha Wallet will not be deposited and will be permanently lost when discontinued. We are unable to help recover any lost funds from Alpha Wallets. We provide all previews on an "as is" basis without warranty of any kind, and we may terminate or suspend the availability of any preview at any time. +::: + +A React Native component that renders Turnkey's export iframe inside an isolated WebView, so the decrypted seed phrase or private key never touches your app's JavaScript. It replaces the web-only [`useExportWallet`](/wallets/hooks/use-export-wallet) and [`useExportPrivateKey`](/wallets/hooks/use-export-private-key) hooks on React Native. + +Mounting the component starts the export; unmounting it dismisses the secret. See [Export Wallet on React Native](/wallets/react-native/export-wallet) for the full guide. + +Requires the `react-native-webview` and `uuid` peer dependencies, and an `rpId` configured on the connector (see [Configuration](/wallets/react-native/configuration)). + +## Import + +```tsx +import { ZeroDevExportWebView } from "@zerodev/wallet-react/react-native/export/webview"; +``` + +## Usage + +```tsx +import { ZeroDevExportWebView } from "@zerodev/wallet-react/react-native/export/webview"; +import { useState } from "react"; +import { Button, Text } from "react-native"; + +function ExportWallet() { + const [show, setShow] = useState(false); + const [ready, setReady] = useState(false); + const [error, setError] = useState(null); + + return ( + <> +