Setup Embedded Wallets

If you are a current user of our legacy embedded wallets, you can find the migration guide here and any legacy documentation here (only creating and reveal/unlinking are different).

General Setup

Enable in Dashboard

Navigate to the Dynamic Dashboard > Developers and enable Embedded Wallets, then click settings and choose the chains you’d like wallets created on.

Using your UI

React

Only supported on React SDK v4.20.0 and later versions

Reference example: https://github.com/dynamic-labs/examples/tree/main/examples/nextjs-mpc-demo

1. Install Wallet Connectors

   Note: You only need to install the connectors for the chains you want to support.

   npm i @dynamic-labs/sdk-react-core
   npm i @dynamic-labs/ethereum
   npm i @dynamic-labs/solana
   npm i @dynamic-labs/sui
   npm i @dynamic-labs/ton
   
2. Configure CSP

   You must whitelist the dynamic auth URL for the iframe connection to work. Here’s how:

   In an HTTP header (e.g., Express.js)

   res.setHeader("Content-Security-Policy", "frame-src https://app.dynamicauth.com 'self';");
   

   ⚠️ If you’re already setting CSP, append https://app.dynamicauth.com to the existing frame-src list rather than replacing it.

   ---

   In an HTML `<meta>` tag

   <meta http-equiv="Content-Security-Policy" content="frame-src https://app.dynamicauth.com 'self';">
   

   In NGINX config

   add_header Content-Security-Policy "frame-src https://app.dynamicauth.com 'self';";
   

   In Vercel or Netlify (via headers file)

   vercel.json

   {
     "headers": [
       {
         "source": "/(.*)",
         "headers": [
           {
             "key": "Content-Security-Policy",
             "value": "frame-src https://app.dynamicauth.com 'self';"
           }
         ]
       }
     ]
   }
   

   In _headers (Netlify)

   _headers

     Content-Security-Policy: frame-src https://app.dynamicauth.com 'self';
   
3. Configure Your Provider

   Include the appropriate connectors inside your provider settings:

   import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
   import { SolanaWalletConnectors } from '@dynamic-labs/solana';
   import { SuiWalletConnectors } from '@dynamic-labs/sui';
   import { TonWalletConnectors } from '@dynamic-labs/ton';
   
   const connectors = [
     EthereumWalletConnectors,
     SolanaWalletConnectors,
     SuiWalletConnectors,
     TonWalletConnectors,
   ];
   
   return (
     <DynamicContextProvider
       settings={{
         walletConnectors: connectors,
       }}
     >
       {/* Your app components */}
     </DynamicContextProvider>
   );
   

   Once enabled, you can choose whether wallets are created automatically on signup/sign-in, or created manually in your app logic. See Creating Embedded Wallets.

Next steps

• Create embedded wallets automatically or manually: Creating Embedded Wallets
• Configure signing/confirmation experience: Embedded Wallet Signing Configuration
• Import/export keys: Importing & Exporting Embedded Wallets
• Advanced signing scenarios: Raw Signing (EVM)

React Native

Enable Embedded Wallets in the dashboard, then use the client’s embedded wallets module to create wallets (automatically on signup/sign-in, or manually).

Next:

• Creating Embedded Wallets
• Embedded Wallet Signing Configuration

Swift

Coming soon

Flutter

Enable Embedded Wallets in the dashboard, then create wallets via the Flutter embedded wallets module.

Next:

• Creating Embedded Wallets
• Embedded Wallet Signing Configuration