Allow your users to link their Web3 wallet to their account to skip entering their login credentials.
This package is forked from the m1guelpf/laravel-web3-login with some modifications.
You can install the package via composer:
composer require kevinpurwito/laravel-web3-login
The vendor:publish
command will publish a file named web3.php
within your laravel project config
folder config/web3.php
. Edit this file with your desired column name for the table, defaults to wallet
.
Published Config File Contents
[
'wallet_address_column' => env('WEB3_WALLET_ADDRESS_COLUMN', 'address'),
];
Alternatively you can ignore the above publish command and add this following variables to your .env
file.
WEB3_WALLET_ADDRESS_COLUMN=wallet
This package takes care of everything you need on the backend. While there are many 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 log in, 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),
});
};
Please see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
- Original Author: Miguel Piedrafita
- Modified by: Kevin Purwito
- All Contributors
The MIT License (MIT). Please see License File for more information.