> ## Documentation Index
> Fetch the complete documentation index at: https://www.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Tip>
  You can see both in action on [demo.dynamic.xyz](https://demo.dynamic.xyz)!
</Tip>

## 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](/react/reference/quickstart).

## Step By Step

<Tabs>
  <Tab title="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](https://app.dynamic.xyz/dashboard/chains-and-networks).

    ## Install the necessary packages:

    <CodeGroup>
      ```bash npm theme={"system"}
      npm install @dynamic-labs/sdk-react-core @dynamic-labs/flow
      ```

      ```bash yarn theme={"system"}
      yarn add @dynamic-labs/sdk-react-core @dynamic-labs/flow
      ```

      ```bash pnpm theme={"system"}
      pnpm add @dynamic-labs/sdk-react-core @dynamic-labs/flow
      ```

      ```bash bun theme={"system"}
      bun add @dynamic-labs/sdk-react-core @dynamic-labs/flow
      ```
    </CodeGroup>

    ### 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.

    ```tsx filename="App.tsx" theme={"system"}
    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.

    ```tsx filename="CustomFlowAuth.tsx" theme={"system"}
    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>
      );
    };
    ```
  </Tab>

  <Tab title="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](https://app.dynamic.xyz/dashboard/chains-and-networks) under EVM Chains.
    2. Enable embedded wallets in the [Dynamic Dashboard](https://app.dynamic.xyz/dashboard/embedded-wallets/dynamic).

    ## Install the necessary packages:

    <CodeGroup>
      ```bash npm theme={"system"}
      npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum
      ```

      ```bash yarn theme={"system"}
      yarn add @dynamic-labs/sdk-react-core @dynamic-labs/ethereum
      ```

      ```bash pnpm theme={"system"}
      pnpm add @dynamic-labs/sdk-react-core @dynamic-labs/ethereum
      ```

      ```bash bun theme={"system"}
      bun add @dynamic-labs/sdk-react-core @dynamic-labs/ethereum
      ```
    </CodeGroup>

    ### Using Dynamic UI (widget)

    For Flow EVM, you'll use `EthereumWalletConnectors`.

    ```tsx filename="App.tsx" theme={"system"}
    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.

    ```tsx filename="CustomFlowEvmAuth.tsx" theme={"system"}
    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>
      );
    };
    ```
  </Tab>
</Tabs>

## 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](https://app.dynamic.xyz/dashboard/chains-and-networks).
* **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](https://app.dynamic.xyz/dashboard/embedded-wallets) in the dashboard and ensure they are enabled.

## References

* [Dynamic React SDK Quickstart](/react/reference/quickstart)
* [Wallet Connectors](/react/reference/providers/providers-introduction)
* [Embedded Wallets](/overview/wallets/embedded-wallets/mpc/overview)