Flow Journey: The FCL Dev Wallet

blockchain flow dev environment

Alright, so as we were working on our first Smart Contracts on Flow and building some Hello, World type stuff, there was an issue that came to mind. If I deploy a Smart Contract to an account on the Flow Emulator, and let's say only that account has privilege to perform certain actions, how do I sign in as that account on my web app.

Let's take an example. Let's say I coded a Smart Contract that allowed the contract owner to Mint some NFTs. How do I sign in to a web app as that owner?

The answer: The FCL Dev Wallet!

What is the FCL Dev Wallet

As far as I can tell, the FCL Dev Wallet is basically a dev stand-in for real wallets like Blocto. Rather than logging in using a real wallet like Blocto, you end up signing in using the FCL Dev Wallet. What's more, is you can easily manage the accounts on the Dev Wallet so you can do a lot of testing signing in as different accounts.

How do you get it up and running

Ok, so on the current FCL Dev Wallet repo, the readme shows you how to run everything using Docker. However, this didn't really work for me. After talking to someone on the Flow team, I got a lot of information, and some instructions on how to run this from scratch. So here's what you need to do if you want to run it NOT using Docker.

1. Clone the Repo

First step is the Clone the git repo: https://github.com/onflow/fcl-dev-wallet.

2. Prepare the Emulator Environment

Open up the flow.json that's in your cloned repo of the FCL Dev Wallet, and edit any values you need to edit. If this is your first time using this, you shouldn't need to touch anything and you can just use the emulator accounts provided.

3. Prepare the Dev Wallet Environment

From your cloned repo, copy .env.example file to a .env file. Open up that file, and ensure that your account information, including private and public keys of the service account, line up with your flow.json emulator accounts. This part is important, so double-check that it matches up.

4. Fire up the flow emulator

Fire up the flow emulator flow emulator

(Note: This requires you have the Flow CLI installed).

5. Run the Flow Dev Wallet

Install your dependencies:

npm i

(Note, ensure that npm i actually succeeds. We ran into issues where we were using an older version of Node that wasn't compatible with all the libraries that the FCL Dev Wallet uses).

Then fire up the dev wallet:

npm run dev

6. Modify your Web Application to use Dev Wallet

Ok, so now your dev wallet is running, but what we need to do is point your Web App to use the Flow Dev Wallet rather than real wallets. To do this, we change where your Web App discovers what wallets are available. Normally, you would have something like this:

config({
  ...
  "discovery.wallet": process.env.REACT_APP_DISCOVERY_WALLET,
  ...
})

combined with a .env file that has something like this

...
REACT_APP_DISCOVERY_WALLET=https://fcl-discovery.onflow.org/testnet/authn
...

With that setup, you're pointing to Flow's testnet wallet discovery service. So rather than do that, we want to point to the discovery service that the FCL Dev Wallet provides. So just change it to this:

...
REACT_APP_DISCOVERY_WALLET=http://localhost:8701/fcl/authn
...

If using a .env file, be sure you restart your React server.

7. Test it out

At this point, you should be able to try out fcl.authenticate(), and you should get a pop-up that looks like this:

And you're done! You can now login as any account you want or create some new accounts.

Hope this helps out some peeps!

Casey Li
CEO & Founder, BiteSite