Setting up Chrome Extension with Next.js & and web3 Auth via SIWE.

Web3 authentication flows allow users to access decentralized applications securely and efficiently. Services like web3Auth and magic.link combines the password-less login experience and MPC self-custody wallets linked directly to a social login. This demo could be extended to utilise and ease the signup process. In this article, we’ll explore the basics of web3 authentication via a chrome extension and meta mask as the wallet provider.

The Tech We’ll Be Using:

To build this demo, we’ll be using the npm package siwe for Sign in with Ethereum functionality. For the backend, we’ll use Express.js. For the Chrome extension, we’ll use Next.js and Chakra-UI for the front end.

What We Will Be Building:

We’ll be building a Chrome extension that authenticates users via the Ethereum blockchain using the siwe package. Users will sign in with their Ethereum wallet address, and the extension will verify their identity by signing a message and passing it to the backend for authentication.

Prerequisites:

  • A computer with Google Chrome installed

  • NodeJs installed v16.17+

  • An Evm wallet and the Metamask chrome extension installed

Getting started

Clone the repo here and follow the ReadMe Instructions.

How does it work?

No need to reinvent the wheel for something like this, there are many tutorials and templates to build upon. Here’s how we have combined the available resources to build a nice starter template.

Creating the Extension:

The initial template is taken from this github repo which sets up the chrome extension.

We’ll use the Next.js setup to work with Chrome extensions, which has some differences from a typical web application. For authentication, we’ll focus on signing in directly via the Chrome extension, rather than syncing login sessions between a website and the extension.

Backend:

To authenticate users, we’ll sign a message with their Ethereum wallet address and pass it to the backend for authentication. The backend will verify the message signature and authenticate the user.

Now you can utilise EVM logins via a backend connected to a chrome extension, useful for applications that sit on top of other websites.

Thanks to

This starter builds upon these other starters:

#Web3 #Browser #Guide

Read Next

Exploring Decentralized Databases WeaveDB, Polybase and Others

The Web3 ecosystem has a need for efficient, secure, and interoperable data storage solutions that can power web3 apps as seamlessly as web2 databases but in a permissionless manner. In this post, we will explore some promising decentralized databases — WeaveDB, Polybase, and Others — looking at their key features, benefits, and applications.