Enable Your DApp Users to Log In Using Their Email Address or Phone Number

Using Fortmatic to connect users to your DApp

Alex Roan
Alex Roan
May 26 · 3 min read
Image for post
Image for post
Photo by bongkarn thanyakij from Pexels

Prerequisite: This article assumes a basic knowledge of Ethereum, web3, and Node.

Since the inception of Ethereum DApps, Metamask has been the primary tool used to connect users. While it is still the most popular, it’s clunky and difficult to use if you’re new to Ethereum.

I recently wrote an article about how connecting users to your DApp can be made easier by allowing them to register and log in using social media accounts, through a wallet provider called Torus.

Here, I’m going to walk through another option. You can now allow your users to connect to your DApp using their email address or phone number using a wallet provider called Fortmatic.

The Sleekest web3 Wallet Interface Available

I’ve played around with multiple online wallet providers recently, and in my opinion, Fortmatic has the smoothest and prettiest user experience of all.

Image for post
Image for post
Figure 1: Formatic widget example themes

The widget, shown in Figure 1, comes with several display themes and integrates seamlessly with your DApp. Whenever transactions need approving, it prompts them inside your DApp, using this themed widget. This is in contrast to both Metamask and Torus, which open new windows to approve transactions.

This can often be blocked by ad blocker software, if the user has some installed. Having Fortmatic prompt the user on the same webpage as your DApp means a much smoother experience.

Integrate With 3 Simple Steps

For the full documentation, head over to Fortmatic’s website.

Step 1. Create an account

Initially, you’ll need to create an account with Fortmatic to access the developer dashboard. You can sign in with a GitHub account if you have one already.

One there, you’ll be able to create your first application and generate a private key.

Image for post
Image for post
Figure 2: Example first app in the Dashboard (keys redded out)

Step 2. Import into your project

Fortmatic has an SDK that enables easy access to their widget so long as you have a correct key. Run the following to install it:

npm install --save fortmatic

If you don’t already, make sure you have web3 installed, too, by running:

npm install --save web3

Then, in the file where you initialise the connection to web3, import both web3 and Fortmatic by pasting the following at the top of the file:

import Fortmatic from 'fortmatic';
import Web3 from 'web3';

Step 3. Initialise the connection

In that same file, initialise the Fortmatic connection by pasting the following, where YOUR_API_KEY is the key generated in the Fortmatic dashboard:

const fm = new Fortmatic('YOUR_API_KEY');
window.web3 = new Web3(fm.getProvider());

In development environments, make sure to use the “Test” key provided.

From this point, use the web3 instance you have stored in window.web3 to interact with the Blockchain, just as you would with Metamask!

Image for post
Image for post
Figure 3: Fortmatic in action on Uniswap

Further Reading

If you’re interested in Blockchain Development, I write tutorials, walkthroughs, hints, and tips on how to get started and build a portfolio. Check out some of these resources:

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store