Enable Authentication, Onboarding, and Wallets on Flow

A guide to integrating Dynamic for user authentication, onboarding, and embedded wallets on Flow L1 and Flow EVM.

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

Flow L1

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

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

If you need to build a custom UI, you can use Dynamic’s 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>
  );
};

Flow EVM

This section covers setting up authentication, onboarding, and embedded wallets for applications on Flow’s EVM-compatible network. We will treat Flow EVM as a custom EVM network.

Dashboard Setup

1. Enable Flow EVM in the Dynamic Dashboard under EVM Chains.
2. Enable embedded wallets in the Dynamic Dashboard.

Install the necessary packages:

npm

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

Using Dynamic UI (widget)

For Flow EVM, you’ll use EthereumWalletConnectors.

import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
import { DynamicWidget } from "@dynamic-labs/sdk-react-core";

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

export default App;

Using your UI

You can create a custom UI for Flow EVM that includes embedded wallet functionality.

import { useDynamicContext } from "@dynamic-labs/sdk-react-core";

const CustomFlowEvmAuth = () => {
  const { userHasEmbeddedWallet } = useEmbeddedWallet();
  const { setShowAuthFlow, primaryWallet, handleLogout } = useDynamicContext();

  if (primaryWallet) {
    return (
      <div>
        <p>Connected wallet: {primaryWallet.address}</p>
        <p>Wallet type: {primaryWallet.connector.isEmbedded ? "Embedded" : "Standard"}</p>
        {userHasEmbeddedWallet && <p>Embedded wallet is available.</p>}
        <button onClick={() => handleLogout()}>Disconnect</button>
      </div>
    );
  }

  return (
    <div>
      <button onClick={() => setShowAuthFlow(true)}>
        Login
      </button>
    </div>
  );
};

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

• Dynamic React SDK Quickstart
• Wallet Connectors
• Embedded Wallets