M𝐞tåMäsk 𝗟𝗼𝗴𝗶𝗻

MētaMask Login - Swap crypto and exchange. Manage your digital assets using MētaMask Lōgin key vault, encrypted Lōgin.

How to Build a One-Click Sign in Using MetaMask with PHP's Laravel

Overview​

Social logins: we have all seen them, we have all used them. "Login with Facebook". "Login with Github".

If you have been around the Web3 community you may have come across a more recent player in the game: "Login with MetaMask". For instance, this is how you may sign up for OpenSea the biggest NFT marketplace for Ethereum and Polygon.

MetaMask is a crypto wallet for the Ethereum blockchain that also allows you to interact with dApps (decentralized apps). Specifically it allows dApps to verify that you are the owner of a certain Ethereum address which in turn will serve as your online identity.

This tutorial will show you how to implement a one-click MetaMask login using web3.js and a PHP backend. While we will be using Laravel and Vue in this tutorial, the principles of:

  • Signing a message in Javascript using web3.js, and

  • Verifying the signature in a PHP backend

…is absolutely transferable to any JS and PHP framework of your choice.

Prerequisites: In order to follow along the steps in this tutorial you will need:

  • MetaMask installed as a browser extension with at least 1 account (no ETH needed!). If you do not already have MetaMask installed you may take a look at their website. — If you want to configure your QuickNode RPC to MetaMask, we have you covered there too.

  • A local development environment that allows you to run a fresh Laravel installation. Take a look at the excellent Laravel documentation to get started. In this tutorial I will be using the Installation Via Composer installation method, but feel free to use Laravel Sail (Docker) should you prefer. When using Laravel Sail you will need prefix all commands with ./vendor/bin/sail (ie ./vendor/bin/sail composer install instead of composer install); please refer to the official Laravel Sail documentation for more information on how to execute commands.

  • General knowledge and familiarity of running terminal commands (NPM/Composer installs)

MetaMask is a private crypto wallet used for storing and swapping cryptocurrencies and NFTs. It comes in two versions which are browser extension and mobile application. Its fundamental purpose is to access Ethereum-enabled applications. It also helps the user in creating and managing identities of their own so that a secure interface is provided to the user to review the transaction whenever Dapp is performing a transaction and writing to the blockchain. It also helps you by warning you whenever you are about to access a site that is related to phishing.

In this blog, we are going to give you in detail knowledge about how to sync two versions of MetaMask with each other means how to sync the MetaMask mobile app with the MetaMask chrome extension.

Things that you must have before executing the above-mentioned process:

  1. MetaMask chrome extension and its mobile app installed on your phone: You need to have both of them before you start the process of synchronizing them and it will be better if you have done the MetaMask login on both of them.

  2. Your secret recovery phrases: To sync the two wallets associated with the two different versions of MetaMask you will need to have the Secret recovery phrase for both of them.

In case, you do not have the secret recovery phrase for the mobile app you can follow the following steps to recover it:

  1. Do the MetaMask login and go to settings from the menu of the mobile app.

  2. Select “Reveal recovery phrase” from the Security and Privacy section.

  3. Enter your password to complete the verification.

Now let us begin with the process of synchronization

The steps for the same are as follows:

  1. Initially, you will need to install the extension and activate it.

  2. Tap on getting started.

  3. Tap on Import wallet.

  4. Now, select either “No thanks” or “I agree” on whether you want to share your data or not.

  5. Refer to and enter your 12-word secret recovery phrase and make sure that there are spaces between the words. Then, assign a password for the app and click Import.

  6. Tap all done and you are done with the process.

Conclusion

In this blog, we have tried to give our best to give you specifically in detail guidance on how to synchronize MetaMask mobile app to the Chrome extension along with the essentials required for executing the process and here the point to remember is that ideally you should do the MetaMask login on both the versions before you implement the given process. We hope this was a helpful and significant blog for you.

Last updated