MetaMask Login : One-click Login With Blockchain Made Easy

How to Use Metamask for a One-Click Login Flow

The basic idea is that it’s cryptographically easy to prove the ownership of an account by signing a piece of data using a private key. If you manage to sign a precise piece of data generated by our back end, then the back end will consider you the owner of that public address. Therefore, we can build a message-signing-based authentication mechanism with a user’s public address as their identifier.

If it doesn’t seem clear, that’s all right, because we’ll explain it bit-by-bit:

Please note that while we will be using tools connected to the Ethereum blockchain (MetaMask, Ethereum public addresses), this login process does not actually need the blockchain: It only needs its cryptography functions. That being said, with MetaMask Login becoming such a popular extension, now seems a good time to introduce this login flow.

The MetaMask Browser Extension

If you already know what MetaMask is, feel free to skip this section.

MetaMask is a browser plugin, available as the MetaMask Chrome extension or Firefox Add-on. At its core, it serves as an Ethereum wallet: By installing it, you will get access to a unique Ethereum public address, with which you can start sending and receiving ether or tokens.

But MetaMask does something more than an Ethereum wallet. As a browser extension, it can interact with the current webpage you’re browsing. It does so by injecting a JavaScript library called web3.js in every webpage you visit. Once injected, a web3 object will be available via window.web3 in the JavaScript code of this website. To have a look at what this object looks like, just type window.web3 in the Chrome or Firefox DevTools console, if you have MetaMask installed.

Web3.js is a JavaScript interface to the Ethereum blockchain. There are functions to:

• Get the latest block of the chain (web3.eth.getBlockNumber)
• Check the current active account on MetaMask (web3.eth.coinbase)
• Get the balance of any account (web3.eth.getBalance)
• Send transactions (web3.eth.sendTransaction)
• Sign messages with the private key of the current account (web3.personal.sign)
• …and much more

When MetaMask Login is installed, any front-end code can get access to all these functions, and interact with the blockchain. They are called dapps or DApps (for decentralized apps–sometimes even styled “ĐApps”).

Author