​
What This Solves

This guide explains how to use Dynamic to seamlessly onboard users onto the Flow ecosystem. It covers two primary paths:
  • Flow (L1): For applications built on Flow’s native layer, this section covers setting up user authentication and wallet connection.
  • Flow EVM: For EVM-compatible applications, this section covers user authentication, onboarding, and the integration of embedded wallets.
You can see both in action on demo.dynamic.xyz!

​
Prerequisites

Before you begin, ensure you have:
  1. A Dynamic account and a project with an environment ID.
  2. Your application is set up with the basic Dynamic SDK installation. If not, please see our React Quickstart.

​
Step By Step

This section covers setting up authentication and onboarding for applications built on the native Flow layer. Embedded wallets are not supported for non-EVM chains.

​
Dashboard Setup

Enable Flow in the Dynamic Dashboard.

​
Install the necessary packages:

npm install @dynamic-labs/sdk-react-core @dynamic-labs/flow

​
Using Dynamic UI (widget)

The simplest way to get started is by using the pre-built Dynamic widget. It handles the entire user authentication flow.
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { FlowWalletConnectors } from "@dynamic-labs/flow";
import { DynamicWidget } from "@dynamic-labs/sdk-react-core";

const App = () => (
  <DynamicContextProvider
    settings={{
      environmentId: "YOUR_ENVIRONMENT_ID",
      walletConnectors: [FlowWalletConnectors],
    }}
  >
    <DynamicWidget />
  </DynamicContextProvider>
);

export default App;

​
Using your UI (headless/hooks)

If you need to build a custom UI, you can use Dynamic’s headless hooks to manage wallet connection and user state.
import { useDynamicContext } from "@dynamic-labs/sdk-react-core";
import { FlowWalletConnectors } from "@dynamic-labs/flow";

const CustomFlowAuth = () => {
  const { setShowAuthFlow, primaryWallet } = useDynamicContext();

  if (primaryWallet) {
    return (
      <div>
        <p>Connected wallet: {primaryWallet.address}</p>
        <button onClick={() => primaryWallet.disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <button onClick={() => setShowAuthFlow(true)}>
      Connect Wallet
    </button>
  );
};

​
How It Works

For Flow (L1):
  • The @dynamic-labs/flow package provides the FlowWalletConnectors, which integrates with Flow-native wallets.
  • When a user connects, DynamicContextProvider manages the connection state, making user and wallet information available throughout your app via hooks like useDynamicContext.
For Flow EVM:
  • We treat Flow EVM as a standard EVM network within the EVM ecosystem. The @dynamic-labs/ethereum package is used to connect to it.
  • Embedded wallets are enabled by default when you use EthereumWalletConnectors and have them turned on in the Dynamic Dashboard.

​
Troubleshooting

  • Error: “FlowWalletConnectors is not defined.”
    • Cause: The @dynamic-labs/flow package is not installed or imported correctly.
    • Fix: Run npm install @dynamic-labs/flow and ensure you have import { FlowWalletConnectors } from "@dynamic-labs/flow"; in your file.
  • Error: “Flow EVM is not showing as a valid network.”
    • Cause: The network is not enabled in the dashboard.
    • Fix: Enable it in the Dynamic Dashboard.
  • Error: “Embedded wallet option not showing.”
    • Cause: Embedded wallets are not enabled for your project in the Dynamic Dashboard.
    • Fix: Navigate to the Embedded Wallets settings in the dashboard and ensure they are enabled.

​
References