Flow Client Library (FCL) API Reference
For release updates, see the repo
Configuration
FCL has a mechanism that lets you configure various aspects of FCL. When you move from one instance of the Flow Blockchain to another (Local Emulator to Testnet to Mainnet) the only thing you should need to change for your FCL implementation is your configuration.
Setting Configuration Values
Values only need to be set once. We recommend doing this once and as early in the life cycle as possible. To set a configuration value, the put
method on the config
instance needs to be called, the put
method returns the config
instance so they can be chained.
Alternatively, you can set the config by passing a JSON object directly.
_13import * as fcl from "@onflow/fcl";_13_13fcl_13 .config() // returns the config instance_13 .put("foo", "bar") // configures "foo" to be "bar"_13 .put("baz", "buz"); // configures "baz" to be "buz"_13_13// OR_13_13fcl.config({_13 foo: "bar",_13 baz: "buz",_13});
Getting Configuration Values
The config
instance has an asynchronous get
method. You can also pass it a fallback value.
_15import * as fcl from "@onflow/fcl";_15_15fcl.config().put("foo", "bar").put("woot", 5).put("rawr", 7);_15_15const FALLBACK = 1;_15_15async function addStuff() {_15 var woot = await fcl.config().get("woot", FALLBACK); // will be 5 -- set in the config before_15 var rawr = await fcl.config().get("rawr", FALLBACK); // will be 7 -- set in the config before_15 var hmmm = await fcl.config().get("hmmm", FALLBACK); // will be 1 -- uses fallback because this isnt in the config_15_15 return woot + rawr + hmmm;_15}_15_15addStuff().then((d) => console.log(d)); // 13 (5 + 7 + 1)
Common Configuration Keys
Name | Example | Description |
---|---|---|
accessNode.api (required) | https://rest-testnet.onflow.org | API URL for the Flow Blockchain Access Node you want to be communicating with. See all available access node endpoints here. |
app.detail.title | Cryptokitties | Your applications title, can be requested by wallets and other services. |
app.detail.icon | https://fcl-discovery.onflow.org/images/blocto.png | Url for your applications icon, can be requested by wallets and other services. |
challenge.handshake | DEPRECATED | Use discovery.wallet instead. |
discovery.authn.endpoint | https://fcl-discovery.onflow.org/api/testnet/authn | Endpoint for alternative configurable Wallet Discovery mechanism. Read more on discovery |
discovery.wallet (required) | https://fcl-discovery.onflow.org/testnet/authn | Points FCL at the Wallet or Wallet Discovery mechanism. |
discovery.wallet.method | IFRAME/RPC , POP/RPC , TAB/RPC , HTTP/POST , or EXT/RPC | Describes which service strategy a wallet should use. |
fcl.limit | 100 | Specifies fallback compute limit if not provided in transaction. Provided as integer. |
flow.network (recommended) | testnet | Used in conjunction with stored interactions and provides FCLCryptoContract address for testnet and mainnet . Possible values: local , canarynet , testnet , mainnet . |
Using Contracts in Scripts and Transactions
Address Replacement
Configuration keys that start with 0x
will be replaced in FCL scripts and transactions, this allows you to write your script or transaction Cadence code once and not have to change it when you point your application at a difference instance of the Flow Blockchain.
_24import * as fcl from "@onflow/fcl"_24_24fcl.config()_24 .put("0xFungibleToken", "0xf233dcee88fe0abe")_24_24async function myScript () {_24 return fcl.send([_24 fcl.script`_24 import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration_24_24 pub fun main() { /* Rest of the script goes here */ }_24 `_24 ]).then(fcl.decode)_24}_24_24async function myTransaction () {_24 return fcl.send([_24 fcl.transaction`_24 import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration_24_24 transaction { /* Rest of the transaction goes here */ }_24 `_24 ]).then(fcl.decode)_24}
Example
_10import * as fcl from "@onflow/fcl"_10_10fcl.config()_10 .put("flow.network", "testnet")_10 .put("accessNode.api", "https://rest-testnet.onflow.org")_10 .put("discovery.wallet", "https://fcl-discovery.onflow.org/testnet/authn")_10 .put("app.detail.title", "Test Harness")_10 .put("app.detail.icon", "https://i.imgur.com/r23Zhvu.png")_10 .put("service.OpenID.scopes", "email email_verified name zoneinfo")_10 .put("0xFlowToken", "0x7e60df042a9c0868")
Using Flow.json
A simpler way to import contracts in scripts and transactions is to use the config.load
method to ingest your contracts from your flow.json
file. This keeps the import syntax unified across tools and lets FCL figure out which address to use for what network based on the network provided in config. To use config.load
you must first import your flow.json
file and then pass it to config.load
as a parameter.
_10import { config } from '@onflow/fcl'_10import flowJSON from '../flow.json'_10_10config({_10 'flow.network': 'testnet',_10 'accessNode.api': 'https://rest-testnet.onflow.org',_10 'discovery.wallet': `https://fcl-discovery.onflow.org/testnet/authn`,_10}).load({ flowJSON })
Let's say your flow.json
file looks like this:
_10{_10 "contracts": {_10 "HelloWorld": "cadence/contracts/HelloWorld.cdc"_10 }_10}
Then in your scripts and transactions, all you have to do is:
_10import "HelloWorld"
FCL will automatically replace the contract name with the address for the network you are using.
Note: never put private keys in your
flow.json
. You should use the key/location syntax to separate your keys into a separate git ignored file.
Wallet Interactions
These methods allows dapps to interact with FCL compatible wallets in order to authenticate the user and authorize transactions on their behalf.
⚠️These methods are async.
authenticate
⚠️This method can only be used in web browsers.
Calling this method will authenticate the current user via any wallet that supports FCL. Once called, FCL will initiate communication with the configured discovery.wallet
endpoint which lets the user select a wallet to authenticate with. Once the wallet provider has authenticated the user, FCL will set the values on the current user object for future use and authorization.
Note
⚠️discovery.wallet
value must be set in the configuration before calling this method. See FCL Configuration.
📣 The default discovery endpoint will open an iframe overlay to let the user choose a supported wallet.
Usage
_10import * as fcl from "@onflow/fcl";_10fcl_10 .config()_10 .put("accessNode.api", "https://rest-testnet.onflow.org")_10 .put("discovery.wallet", "https://fcl-discovery.onflow.org/testnet/authn");_10// anywhere on the page_10fcl.authenticate();
Note
⚠️ authenticate
can also take a service returned from discovery with fcl.authenticate({ service })
.
unauthenticate
⚠️This method can only be used in web browsers.
Logs out the current user and sets the values on the current user object to null.
Note
⚠️The current user must be authenticated first.
Usage
_10import * as fcl from "@onflow/fcl";_10fcl.config().put("accessNode.api", "https://rest-testnet.onflow.org");_10// first authenticate to set current user_10fcl.authenticate();_10// ... somewhere else & sometime later_10fcl.unauthenticate();_10// fcl.currentUser.loggedIn === null
reauthenticate
⚠️This method can only be used in web browsers.
A convenience method that calls fcl.unauthenticate()
and then fcl.authenticate()
for the current user.
Note
⚠️The current user must be authenticated first.
Usage
_10import * as fcl from "@onflow/fcl";_10// first authenticate to set current user_10fcl.authenticate();_10// ... somewhere else & sometime later_10fcl.reauthenticate();_10// logs out user and opens up login/sign-up flow
signUp
⚠️This method can only be used in web browsers.
A convenience method that calls and is equivalent to fcl.authenticate()
.
logIn
⚠️This method can only be used in web browsers.
A convenience method that calls and is equivalent to fcl.authenticate()
.
authz
A convenience method that produces the needed authorization details for the current user to submit transactions to Flow. It defines a signing function that connects to a user's wallet provider to produce signatures to submit transactions.
📣 You can replace this function with your own authorization function if needed.
Returns
Type | Description |
---|---|
AuthorizationObject | An object containing the necessary details from the current user to authorize a transaction in any role. |
Usage
Note: The default values for proposer
, payer
, and authorizations
are already fcl.authz
so there is no need to include these parameters, it is shown only for example purposes. See more on signing roles.
_22import * as fcl from "@onflow/fcl";_22// login somewhere before_22fcl.authenticate();_22// once logged in authz will produce values_22console.log(fcl.authz);_22// prints {addr, signingFunction, keyId, sequenceNum} from the current authenticated user._22_22const txId = await fcl.mutate({_22 cadence: `_22 import Profile from 0xba1132bc08f82fe2_22 _22 transaction(name: String) {_22 prepare(account: AuthAccount) {_22 account.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)_22 }_22 }_22 `,_22 args: (arg, t) => [arg("myName", t.String)],_22 proposer: fcl.authz, // optional - default is fcl.authz_22 payer: fcl.authz, // optional - default is fcl.authz_22 authorizations: [fcl.authz], // optional - default is [fcl.authz]_22});
Current User
Holds the current user, if set, and offers a set of functions to manage the authentication and authorization of the user.
⚠️The following methods can only be used in web browsers.
currentUser.subscribe
The callback passed to subscribe will be called when the user authenticates and un-authenticates, making it easy to update the UI accordingly.
Arguments
Name | Type | |
---|---|---|
callback | function | The callback will be called with the current user as the first argument when the current user is set or removed. |
Usage
_24import React, { useState, useEffect } from "react";_24import * as fcl from "@onflow/fcl";_24_24export function AuthCluster() {_24 const [user, setUser] = useState({ loggedIn: null });_24 useEffect(() => fcl.currentUser.subscribe(setUser), []); // sets the callback for FCL to use_24_24 if (user.loggedIn) {_24 return (_24 <div>_24 <span>{user?.addr ?? "No Address"}</span>_24 <button onClick={fcl.unauthenticate}>Log Out</button> {/* once logged out in setUser(user) will be called */}_24 </div>_24 );_24 } else {_24 return (_24 <div>_24 <button onClick={fcl.logIn}>Log In</button>{" "}_24 {/* once logged in setUser(user) will be called */}_24 <button onClick={fcl.signUp}>Sign Up</button> {/* once signed up, setUser(user) will be called */}_24 </div>_24 );_24 }_24}
currentUser.snapshot
Returns the current user object. This is the same object that is set and available on fcl.currentUser.subscribe(callback)
.
Usage
_10// returns the current user object_10const user = fcl.currentUser.snapshot();_10_10// subscribes to the current user object and logs to console on changes_10fcl.currentUser.subscribe(console.log);
currentUser.authenticate
Equivalent to fcl.authenticate
.
currentUser.unauthenticate
Equivalent to fcl.unauthenticate
.
currentUser.authorization
Equivalent to fcl.authz
currentUser.signUserMessage
A method to use allowing the user to personally sign data via FCL Compatible Wallets/Services.
⚠️ This method requires the current user's wallet to support a signing service endpoint. Currently, only Blocto is compatible with this feature by default.
Arguments
Name | Type | Description |
---|---|---|
message | string (required) | A hexadecimal string to be signed |
Returns
Type | Description |
---|---|
Array | An Array of CompositeSignatures: signature |
Usage
_10import * as fcl from "@onflow/fcl"_10_10export const signMessage = async () => {_10 const MSG = Buffer.from("FOO").toString("hex")_10 try {_10 return await currentUser.signUserMessage(MSG)_10 } catch (error) {_10 console.log(error)_10 }_10}
Discovery
discovery
Discovery abstracts away code so that developers don't have to deal with the discovery of Flow compatible wallets, integration, or authentication. Using discovery
from FCL allows dapps to list and authenticate with wallets while having full control over the UI. Common use cases for this are login or registration pages.
(Alternatively, if you don't need control over your UI you can continue to use the discovery.wallet
config value documented in the Quickstart for the simplest configuration.)
⚠️The following methods can only be used in web browsers.
Note
⚠️discovery.authn.endpoint
value must be set in the configuration before calling this method. See FCL Configuration.
Suggested Configuration
Environment | Example |
---|---|
Mainnet | https://fcl-discovery.onflow.org/api/authn |
Testnet | https://fcl-discovery.onflow.org/api/testnet/authn |
If the Discovery endpoint is set in config, then you can iterate through authn services and pass the chosen service to authenticate to authenticate a user.
Usage
_21import "./config"_21import { useState, useEffect } from "react"_21import * as fcl from "@onflow/fcl"_21_21function Component() {_21 const [wallets, setWallets] = useState([])_21 useEffect(() => fcl.discovery.authn.subscribe(res => setWallets(res.results)), [])_21_21 return (_21 <div>_21 {wallets.map((wallet) => (_21 <button_21 key={wallet.provider.address}_21 onClick={() => fcl.authenticate({ service: wallet })}_21 >_21 Login with {wallet.provider.name}_21 </button>_21 ))}_21 </div>_21 )_21}
authn
More Configuration
By default, limited functionality services or services that require developer registration, like Ledger or Dapper Wallet, require apps to opt-in in order to display to users. To enable opt-in services in an application, use the discovery.authn.include
property in your configuration with a value of an array of services you'd like your app to opt-in to displaying for users.
_10_10import { config } from "@onflow/fcl"_10_10config({_10 "discovery.authn.endpoint": "https://fcl-discovery.onflow.org/api/testnet/authn", // Endpoint set to Testnet_10 "discovery.authn.include": ["0x9d2e44203cb13051"] // Ledger wallet address on Testnet set to be included_10})
Opt-In Wallet Addresses on Testnet and Mainnet
Service | Testnet | Mainnet |
---|---|---|
Dapper Wallet | 0x82ec283f88a62e65 | 0xead892083b3e2c6c |
Ledger | 0x9d2e44203cb13051 | 0xe5cd26afebe62781 |
For more details on wallets, view the service list here.
discovery.authn.snapshot()
Return a list of authn
services.
discovery.authn.subscribe(callback)
The callback sent to subscribe
will be called with a list of authn
services.