Blocto
Search…
⌃K
Links

Login / Register

Connect to Blocto wallet through Flow Client Library (FCL)

Step 1 - Configure FCL

import * as fcl from "@blocto/fcl"
​
fcl.config()
// connect to Flow testnet
// for [email protected]<1.0.0 this should be https://access-testnet.onflow.org
.put("accessNode.api", "https://rest-testnet.onflow.org")
// use pop instead of default IFRAME/RPC option for security enforcement
.put("discovery.wallet.method", "POP/RPC")
// use Blocto testnet wallet
.put("challenge.handshake", "https://flow-wallet-testnet.blocto.app/authn")
Alternatively, if you already have user's email and would like to pre-fill it for user's Blocto account, you can use the custom handshake URL instead:
import * as fcl from "@blocto/fcl"
​
fcl.config()
// connect to Flow testnet
// for [email protected]<1.0.0 this should be https://access-testnet.onflow.org
.put("accessNode.api", "https://rest-testnet.onflow.org")
// use pop instead of default IFRAME/RPC option for security enforcement
.put("discovery.wallet.method", "POP/RPC")
// use Blocto testnet wallet
.put(
"challenge.handshake",
"https://flow-wallet-testnet.blocto.app/authn/-/[email protected]"
)
Starting from @blocto/[email protected] you can also use HTTP/POST to initiate login requests, instead of popup. Simply modify your wallet connection to:
import * as fcl from "@blocto/fcl"
​
fcl.config()
// connect to Flow testnet
// for [email protected]<1.0.0 this should be https://access-testnet.onflow.org
.put("accessNode.api", "https://rest-testnet.onflow.org")
// use Blocto testnet wallet with HTTP/POST
.put(
"discovery.wallet",
"https://flow-wallet-testnet.blocto.app/api/flow/authn"
)
.put("discovery.wallet.method", "HTTP/POST")

Step 2 - Authenticate

import * as fcl from "@blocto/fcl"
​
fcl
.currentUser()
.subscribe(console.log) // fires everytime account connection status updates
// authenticate
fcl.authenticate()

Step 3 - Unauthenticate

import * as fcl from "@blocto/fcl"
​
fcl
.currentUser()
.subscribe(console.log) // fires everytime account connection status updates
// unauthenticate and clear account info in FCL
fcl.unauthenticate()