Summary

The website content explains how to integrate Fortmatic into Ethereum DApps to allow users to log in using their email address or phone number, providing a smoother and more user-friendly experience compared to traditional methods like MetaMask.

Abstract

The article provides a guide on enabling DApp users to log in using their email or phone number through the wallet provider Fortmatic. It highlights the ease of use and aesthetic appeal of Fortmatic's widget, which offers a seamless transaction approval process within the DApp interface, unlike other providers that open new windows. The integration process is outlined in three steps: creating a Fortmatic account, importing the SDK into the project, and initializing the connection with the generated API key. The author emphasizes the superior user experience of Fortmatic, its ability to bypass ad blockers, and the convenience of using social media accounts for login, as previously discussed in a related article about Torus.

Opinions

The author considers Fortmatic's user interface to be the sleekest among online wallet providers, with a smooth and visually appealing design.
Fortmatic's in-app transaction prompting is seen as superior to Metamask and Torus, as it avoids potential interruptions from ad blockers.
The article suggests that using Fortmatic can significantly improve the user experience for DApps by simplifying the login process with familiar methods like email or phone numbers.
The author recommends Fortmatic as a user-friendly alternative to Metamask, which is described as clunky and difficult for new Ethereum users.
The integration of Fortmatic is presented as straightforward, with the SDK easily imported into a project and initialized for use with web3 interactions.

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

Using Fortmatic to connect users to your DApp

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.

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.

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!

Figure 3: Fortmatic in action on Uniswap