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.
web3 object will be available via
window.web3 in the Chrome or Firefox DevTools console, if you have MetaMask installed.
- Get the latest block of the chain (
- Check the current active account on MetaMask (
- Get the balance of any account (
- Send transactions (
- Sign messages with the private key of the current account (
- …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”).