fcl-js — Flow Client Library for JavaScript and TypeScript

License: Apache-2.0 Release Discord Built on Flow npm (@onflow/fcl)

FLOW-JS-SDK Continuous Integration lerna

Connect your dapp to users, their wallets and Flow.

Quickstart · Report Bug · Contribute

TL;DR

🌟 What is FCL?

The Flow Client Library (FCL) JS is a package designed to facilitate interactions between dapps, wallets, and the Flow network. It provides a standardized way for applications to connect with users and their wallets, eliminating the need for custom integrations.

🔑 Key Features:

FCL was created to make building Flow-connected applications easy, secure, and scalable by defining standardized communication patterns between wallets, applications, and users.

For iOS, we also offer FCL Swift.

Getting Started

Requirements

Installation

To use the FCL JS in your application, install using yarn or npm

npm i -S @onflow/fcl

yarn add @onflow/fcl

Importing

ES6

import * as fcl from "@onflow/fcl";

Node.js

const fcl = require("@onflow/fcl");

FCL for Dapps

Wallet Interactions

// in the browser
import * as fcl from "@onflow/fcl"

fcl.config({
  "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn", // Endpoint set to Testnet
})

fcl.authenticate()

FCL Default Discovery UI

Note: A Dapper Wallet developer account is required. To enable Dapper Wallet inside FCL, you need to follow this guide.

Learn more about wallet interactions >

Blockchain Interactions

import * as fcl from "@onflow/fcl";

const result = await fcl.query({
  cadence: `
    access(all) fun main(a: Int, b: Int, addr: Address): Int {
      log(addr)
      return a + b
    }
  `,
  args: (arg, t) => [
    arg(7, t.Int), // a: Int
    arg(6, t.Int), // b: Int
    arg("0xba1132bc08f82fe2", t.Address), // addr: Address
  ],
});
console.log(result); // 13

Note: The Cadence snippet below uses pre-1.0 syntax (AuthAccount, account.borrow, private paths). Cadence 1.0 replaced these with auth(...) &Account, account.storage.borrow, and storage-only paths. This example has not yet been updated — refer to the Cadence migration guide when writing new transactions.

import * as fcl from "@onflow/fcl";
// in the browser, FCL will automatically connect to the user's wallet to request signatures to run the transaction
const txId = await fcl.mutate({
  cadence: `
    import Profile from 0xba1132bc08f82fe2
    
    transaction(name: String) {
      prepare(account: AuthAccount) {
        account.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
      }
    }
  `,
  args: (arg, t) => [arg("myName", t.String)],
});

Learn more about on-chain interactions >

Utilities

Learn more about utilities >

Typescript Support

FCL JS supports TypeScript. If you need to import specific types, you can do so via the @onflow/typedefs package.

import {CurrentUser} from "@onflow/typedefs"

const newUser: CurrentUser = { 
  addr: null,
  cid: null,
  expiresAt: null,
  f_type: 'User',
  f_vsn: '1.0.0',
  loggedIn: null,
  services: []
}

For all type definitions available, see this file

Next Steps

Development & Testing

Internal Demo App

A lightweight demo application is available for testing FCL and Kit packages during development:

# Build all packages
npm run build

# Start the demo
npm run demo

The demo provides:

See packages/demo/README.md for detailed usage instructions.

FCL for Wallet Providers

Wallet providers on Flow have the flexibility to build their user interactions and UI through a variety of ways:

FCL is agnostic to the communication channel and be configured to create both custodial and non-custodial wallets. This enables users to interact with wallet providers without needing to download an app or extension.

The communication channels involve responding to a set of pre-defined FCL messages to deliver the requested information to the dapp. Implementing a FCL compatible wallet on Flow is as simple as filling in the responses with the appropriate data when FCL requests them. If using any of the front-channel communication methods, FCL also provides a set of wallet utilities to simplify this process.

Current Wallet Providers

Wallet Discovery

It can be difficult to get users to discover new wallets on a chain. To solve this, we created a wallet discovery service that can be configured and accessed through FCL to display all available Flow wallet providers to the user. This means:

The discovery feature can be used via API allowing you to customize your own UI or you can use the default UI without any additional configuration.

Note: To get your wallet added to the discovery service, make a PR in fcl-discovery.

Building a FCL compatible wallet

🛠 Want to Use the Flow SDK Directly?

If you prefer to interact with Flow at a lower level without using FCL, you can use the Flow JavaScript SDK directly. The SDK provides raw access to the Flow Access API for sending transactions, executing scripts, and managing accounts.

FCL is built on top of the Flow SDK, making it easier to handle authentication, wallet interactions, and dapp connectivity. Choose the approach that best fits your use case.

Support

FAQ

What is FCL? FCL (Flow Client Library) is a JavaScript and TypeScript package that standardizes how dApps connect to wallets and interact with the Flow network. It handles wallet discovery, authentication, transaction signing, and Cadence script execution.

How is FCL different from the Flow JavaScript SDK? FCL is built on top of the Flow JavaScript SDK (@onflow/sdk). FCL adds wallet interactions, discovery, and higher-level helpers. If you prefer to interact with Flow at a lower level without wallet integrations, you can use the SDK directly.

Which environments does FCL run in? FCL can run in both browser and server environments. Wallet interactions are browser-only; server-side usage is supported for queries, transactions signed with custom authorizers, and account utilities.

Does FCL support TypeScript? Yes. Types are available in the @onflow/typedefs package and exported from the main FCL packages.

What wallets does FCL support? FCL works with any FCL-compatible wallet, including Flow Wallet, NuFi, Blocto, Ledger, and Dapper Wallet. Discovery is provided via the wallet discovery service.

Can I use FCL with Flow EVM? Yes. The repo includes adapters for RainbowKit and Wagmi, plus an EIP-1193 Ethereum provider backed by FCL.

Where do I report bugs or request features? Open an issue at github.com/onflow/fcl-js/issues or start a conversation on the Flow Forum.

About Flow

This repo is part of the Flow network, a Layer 1 blockchain built for consumer applications, AI Agents, and DeFi at scale.