Build a Authentication Using Blockchain

Normally authentication is seen using databases like MYSQL, Firebase, MongoDB, etc. One of the biggest drawbacks is the chance of the data getting corrupted. The data can be modified by anyone who is in control of the database itself.
To overcome the above problem here a web app authentication using blockchain will be created.

Components in Web Authentication Application:

• Ganache: A local Ethereum blockchain.
• Web3 JS: For the application to be able to communicate to the blockchain.
• Solidity: For compilation smart contract.
• React JS: For the application’s front-end.
• Truffle: For a development environment, asset pipeline, and testing framework for developing smart contracts.
• Metamask: For cryptocurrency wallet.

Step 1: Truffle Installation globally

 Open your command prompt and install truffle using the below command:

npm install -g truffle@5.4.29

Step 2: React app installation

Follow the below steps to create the application:

npx create-react-app auth-app

cd auth-app

Now install all required modules for the project by using the below command:

npm install react-router-dom web3

Step 3: Working with frontend

Step 3.1: Open the “src” folder and select the App.js file. 

This file contains routing logic, where routing helps the user to navigate different pages. Go through react-router-dom documentation to understand more about routing in React JS.

Below is the code for App.js file:

Step 3.2: Create the “Screens” folder and Create files "Signin.js", "Signup.js", "Home.js".

Step 3.3: Working with the Signin.js file 

Here users need to enter their email and password. Below code authenticates the user's input email and password and navigates to the home page:

1. If the user is not registered give an alert as the user is not found.

2. If the user entered the wrong credentials give an alert as the wrong password.

After Sign in success, users navigate to the home page

Signin.js: 

Step 3.4: Working with the Signup.js file

Here users need to Register/Signup with a username, email, and password. Below code creates a new user in the blockchain database 

await auth.methods
.createUser(username, email, password)
.send({ from: accounts });

After Registration, the user navigates to the Sign-in page.

Signup.js

Step 3.5: Working with the Home.js file

Here we find the user address and email 

Home.js

Step 3.6: Now create Web3helpers.js file in the src folder, to store web3 functions used for loading address from Metamask. Below is the code for Web3helpers.js file:

Step 4 : Setting up Metamask and Ganache 

1. Install Metamask extension Ganache. 
2. First, open Ganache, Click on Quickstart, and 10 addresses with each 100 ETH coins will be visible.
3. On top, one would be able to see Network id as 1337 and RPC server as HTTP://127.0.0.1:7545, if there are different id and server, go to settings, change them, and click on save, and restart.
4. Now open Metamask, Go to settings -> Add networks -> Given below details exactly -> Click on save

 Step 5: Working with the Backend 

1.  Create a smart contract which is a main part of Blockchain.
2.  Now open the command line -> Go to your auth-app (frontend) -> Apply the below commands.

cd src

truffle build

Now you are able to see folders "migrations", "contracts", and "build" in the src folder.

Step 5.1: Open the migrations folder and create a Javascript file as 2_deploy_migration.js.

Here we are deploying our smart contract that we are going to create 

2_deploy_migration.js:

Step 5.2: Open the contracts folder and create a solidity file as "Auth.sol".

Here a smart contract will be created for our authentication. Below is the code for defining a map with a struct:

mapping(string => user) public usersList;

 struct user{
 string username;
 string email;
 string password;
 }

The below function takes parameters of the user's email, password, and username and maps user details to the user email:

function createUser(string memory _username,
 string memory _email,
 string memory _password) public 
{ 
 userCount++;
 usersList[_email] = user(_username,_email,_password); 
 emit userCreated(_username,_email,_password);
}

Auth.sol: 

Step 6: Apply the below command it will create a contract address:

truffle migrate --reset

Step 7: Adding accounts to Metamask from ganache

• Open Ganache, click on the key icon of any address copy the private key.
• Open Metamask -> select ganache network ->  Click on profile (right top) -> Click on import account -> paste the copied private key.
• Now you are able to see 100 ETH coins in your account.

Step 8: Running and Building the application: We can run this application by using the following command. This will start React’s development server that can be used for debugging our application.

npm run start

• Once the webpage opens connect your Metamask account.
• Click on "Not connected" and it will connect.

Output:

Now Authentication using Blockchain is completed. Check out git repo for full code.