SimpleWeb3Auth

A project that demonstrates how to use a MetaMask wallet as a mechanism for website login and authentication.

This application consists of two parts. The first part is the web server. The second part is the client side web page that's used to access logic hosted on the web server.

The source code for the web server is located at ./src/server.js.

The web page HTML is located at ./src/public/index.html. The client side logic used by the HTML in the web page is located at ./src/public/functions.js.

System requirements

Node.js® needs to be installed on the machine running the source code.
A web browser with the MetaMask plugin installed. For instructions on how install MetaMask in a web browser go here.

Installing the application

In a terminal window execute the following command:

git clone https://github.com/reselbob/SimpleWeb3Auth.git

The application's source code will be downloaded into a folder named SimpleWeb3Auth.

Installing the application dependencies

Step 1: In a terminal window execute the following commands:

cd ./SimpleWeb3Auth

npm install

Starting the web server

In a terminal window execute the following command:

Step 1: In a terminal window execute the following command:

npm start

You'll see the following output:

Server is running on port 3111

Athenticating to the application using MetaMask

Step 1: Using a browser that has the MetaMask plugin installed, go to the URL

http://localhost:3111

You'll see the following web page.

Step 2: Click the button labeled Login with MetaMask. Clicking the button will present the MetaMask plugin UI.

Step 3: Click the button labeled Sign in the lower right of the MetaMask plugin to log in to the web site.

Clicking the Sign button will make it so that you'll be authenticated to the demonstration web site using MetaMask's validation mechanisms.

Declaring a profile

The first time you login to the demonstation application you will be asked to declare a profile by filling in the following form:

Step 1: Fill in the data fields in the form.

Step 2: Click the button labeled Submit User Profile.

The profile will be saved and the declaration form will become read only.

Step 3: Refresh the web page in your web browser and login once again.

This time because the application has record of your profile, you'll be presented with a greeting particular to your profile along with the account address you used with MetaMask.