Allow your users to login with their Ethereum wallet
Allow your users to link their Ethereum wallet to their account to skip entering their login credentials.
Installation
You can install the package via composer:
composer require m1guelpf/laravel-web3-login
Usage
This package takes care of everything you need on the backend. While there are many different ways of asking the user to sign a message with their wallet, we'll be using web3modal
and ethers
to maximize the support for wallet providers.
To get started, you need to have the user register a new credential. You can do so by presenting them with a modal when they login, or by adding the option to their settings page.
import axios from "axios";
import { ethers } from "ethers";
import Web3Modal from "web3modal";
const web3Modal = new Web3Modal({
cacheProvider: true,
providerOptions: {}, // add additional providers here, like WalletConnect, Coinbase Wallet, etc.
});
const onClick = async () => {
const message = await axios.get("/_web3/signature").then((res) => res.data);
const provider = await web3Modal.connect();
provider.on("accountsChanged", () => web3Modal.clearCachedProvider());
const web3 = new ethers.providers.Web3Provider(provider);
axios.post("/_web3/link", {
address: await web3.getSigner().getAddress(),
signature: await web3.getSigner().signMessage(message),
});
};
Then, on the login page, you can provide an option to log in with their wallet.
import axios from "axios";
import { ethers } from "ethers";
import Web3Modal from "web3modal";
const web3Modal = new Web3Modal({
cacheProvider: true,
providerOptions: {}, // add additional providers here, like WalletConnect, Coinbase Wallet, etc.
});
const onClick = async () => {
const message = await axios.get("/_web3/signature").then((res) => res.data);
const provider = await web3Modal.connect();
provider.on("accountsChanged", () => web3Modal.clearCachedProvider());
const web3 = new ethers.providers.Web3Provider(provider);
axios.post("/_web3/login", {
address: await web3.getSigner().getAddress(),
signature: await web3.getSigner().signMessage(message),
});
};
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.