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 viawindow.web3
in the JavaScript code of this website. To have a look at what this object looks like, just typewindow.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”).