README

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.

Installation

You can install the package via composer:

composer require kevinpurwito/laravel-web3-login

Configuration

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

Usage

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),
	});
};

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Original Author: Miguel Piedrafita
• Modified by: Kevin Purwito
• All Contributors

License

The MIT License (MIT). Please see License File for more information.