Web3 Authentication is a typical and essential function to have in an software with public information. It helps determine who’s accessing the web site and what information to be delivered based mostly on the at present logged-in consumer.
Introduction
The web has developed over time from the primary model of the online (web1) which requires a username and a password for a consumer’s authentication.
From web1, we moved to the second model of the online, web2. That is the place social media is used as technique of identification and authentication on different platforms, eradicating the necessity to manually fill in a username and password.
The primary concern with web2 is that folks haven’t any management over their private information; As a substitute, central our bodies reminiscent of governments and many of the massive corporations you’ve got signed up with, maintain and handle their consumer’s information the way in which they see match.
Now, the third model of the online sometimes called web3, is a decentralized model of the web the place each consumer has full management over their private information, versus earlier generations of the web wherein the consumer had little to no management.
Web3 authenticating solely requires the consumer to connect with their crypto pockets on web3 platforms, reminiscent of OpenSea.
This text demonstrates tips on how to add web3 login authentication to your web site utilizing the Web3.js library.
Demo
Beneath is the demo video of the web3 login authentication system we will construct on the finish of this text.
Conditions
Earlier than we proceed with this information, it is best to have a fundamental understanding of JavaScript and have an Ethereum based mostly pockets put in (seen in Step 2).
What’s Web3.js?
In line with the Ethereum Basis, Web3.js is a group of libraries that help you work together with an area or distant Ethereum node utilizing HTTP, IPC, or WebSocket.
Web3.js can be utilized within the frontend or backend of an software to learn information from the blockchain, make transactions and deploy sensible contracts to the blockchain. You possibly can learn the introduction to Web3.js Library here.
Step 1 – Putting in Web3.js Library
The quickest approach so as to add Web3.js into your venture is by together with the Web3.js CDN in your venture HTML file.
You will get it from CDNJS here, or copy the script tag under into your HTML file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.1/web3.min.js" integrity="sha512-GKw4QT/RccGJIwQxY3MhyiQ5pHrhQ8SuKFEafV+WcpOvtz7iYFQuQGFCvmGlHLctJTe8KrWU1FqvF7VOkEAJtw==" crossorigin="nameless" referrerpolicy="no-referrer"></script>
One other solution to set up the Web3.js library into your frontend or backend software is thru a bundle supervisor utilizing yarn add web3 or npm set up web3. These instructions will set up the Web3.js library in your software.
We’ll make use of the Web3.js CDN on this web3 js tutorial.
In your venture listing, create a brand new index.html file and paste the HTML code under:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Appropriate" content material="IE=edge" />
<meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
<!-- Web3.js LIBRARY -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.1/web3.min.js"
integrity="sha512-GKw4QT/RccGJIwQxY3MhyiQ5pHrhQ8SuKFEafV+WcpOvtz7iYFQuQGFCvmGlHLctJTe8KrWU1FqvF7VOkEAJtw=="
crossorigin="nameless"
referrerpolicy="no-referrer"
></script>
<title>Web3 Login</title>
</head>
<physique></physique>
</html>
We have efficiently added the Web3.js library to our venture.
Step 2 – Setting Up Ethereum Pockets
To ensure that customers to connect with their Ethereum account from our software, they should have an Ethereum based mostly pockets arrange on their gadget.
The Ethereum pockets will act because the banking software that grants you entry to your checking account. Ethereum wallets will be within the type of a bodily {hardware} pockets, a desktop pockets, a cellular pockets software, or an online browser pockets extension like Metamask.
Learn extra about wallets here.
On this web3 js tutorial, we’ll use Metamask, which can permit us to work together with our account by way of an online browser. Comply with this link to put in a Metamask pockets in your browser.
Step 3 – What We’ll Construct – The Thought Course of
We will construct a login authentication system, the place customers can log in to our software utilizing their Ethereum pockets.
Our software may have the next:
- A login part the place the consumer can connect with their pockets.
- A dashboard part to show the logged-in consumer’s pockets handle and their Ethereum account stability.
The login part will probably be displayed by default if there is no such thing as a logged-in consumer, whereas the dashboard part will probably be displayed as soon as a consumer is related with their Ethereum account. We’ll toggle the 2 sections utilizing the CSS show property and JavaScript.
Step 4 – Constructing the Login and Dashboard Interface
Now that we’ve got Web3.js and an Ethereum pockets put in, let’s construct the interface the place the consumer can connect with their pockets and a dashboard the place they’re going to be redirected after signing in.
Replace your index.html file with the next traces of code:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Appropriate" content material="IE=edge" />
<meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
<!-- Web3.js LIBRARY -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.1/web3.min.js"
integrity="sha512-GKw4QT/RccGJIwQxY3MhyiQ5pHrhQ8SuKFEafV+WcpOvtz7iYFQuQGFCvmGlHLctJTe8KrWU1FqvF7VOkEAJtw=="
crossorigin="nameless"
referrerpolicy="no-referrer"
></script>
<!-- CSS STYLES -->
<hyperlink rel="stylesheet" href="index.css" />
<title>Web3 Login</title>
</head>
<physique>
<!-- LOGIN SECTION -->
<part class="login-section">
<button class="login-btn">🔓 Log in with Web3</button>
<span class="instruction">
Guarantee to have an Ethereum based mostly pockets put in i.e MetaMask
</span>
</part>
<!-- DASHBOARD SECTION -->
<part class="dashboard-section">
<h2 class="wallet-status">Pockets Linked! 🤝</h2>
<h3 class="wallet-address-heading">
ETH Pockets Handle:
<span class="wallet-address"></span>
</h3>
<h3 class="wallet-balance-heading">
ETH Stability:
<span class="wallet-balance"></span>
</h3>
<button class="logout-btn">🔐 Sign off</button>
</part>
</physique>
<!-- SCRIPT -->
<script src="./index.js"></script>
</html>
Subsequent, create a brand new index.js file, that is the place we’ll write our functionalities later.
Lastly, create a brand new index.css file and paste the next CSS traces of code:
* {
margin: 0;
box-sizing: border-box;
}
physique {
background-color: #182e48;
show: flex;
justify-content: heart;
align-items: heart;
top: 100vh;
}
.login-section {
show: flex;
flex-direction: column;
}
.login-btn {
background: #21bf96;
shade: #fff;
padding: 13px 35px;
font-size: 24px;
border: none;
font-weight: 600;
cursor: pointer;
}
.instruction {
text-align: heart;
shade: #21bf96;
shade: #feba35;
margin: 1rem 0;
}
.dashboard-section {
show: none;
flex-direction: column;
justify-content: heart;
align-items: heart;
}
.wallet-status {
font-size: 54px;
shade: #21bf96;
letter-spacing: 1.5px;
}
.wallet-address-heading,
.wallet-balance-heading {
shade: white;
letter-spacing: 1.5px;
margin-top: 1rem;
text-align: heart;
}
.wallet-balance,
.wallet-address {
shade: #feba35;
letter-spacing: regular;
show: block;
margin-top: 1rem;
background: #000;
padding: 8px;
border-radius: 19px;
}
.logout-btn {
shade: white;
background: #cc0000;
padding: 13px 35px;
font-size: 24px;
border: none;
font-weight: 600;
cursor: pointer;
margin-top: 40px;
}
If you open your index.html file in your browser (I am utilizing liveserver), it is best to have the next interface.
The login part is displayed by default since there is no such thing as a logged-in consumer. We’re additionally alerting the consumer that they should have an Ethereum pockets put in on their gadget (see why on Step 2).
Copy and paste the code under in your index.css file to cover the login part and show the dashboard part:
.login-section {
show: none;
}
.dashboard-section {
show: flex;
}
Your dashboard ought to appear to be this:
It is a easy dashboard that reveals the related consumer’s pockets handle and their Ethereum pockets stability.
As a substitute of manually updating the CSS show property, we’ll proceed to implement the login functionalities within the subsequent step, the place we’ll use JavaScript to deal with the toggle between the login and the dashboard part (based mostly on the authentication state of the app).
Guarantee to take away the take a look at CSS types
Step 5 – Checking if the Person has an Ethereum Pockets Put in
We need to make sure the consumer has an Ethereum pockets put in on their browser. We additionally need to immediate customers and not using a pockets put in proper after the web page hundreds.
We’ll observe the thought course of under:
- Create a world scope
userWalletAddressvariable, that is the place we’ll retailer the consumer pockets handle. - On web page load, test if the consumer has an Ethereum pockets put in.
- If the consumer has a pockets put in, create a brand new web3 occasion.
- Else immediate the consumer with a message to put in a pockets.
- Then we’ll test if a consumer’s pockets handle already exists within the browser’s
localStorage, and replace it to theuserWalletAddressvariable. - Lastly, we’ll name the
showUserDashboardperform.
The above thought course of will be translated into the next traces of code:
Copy and paste the code under in your index.js file:
window.userWalletAddress = null;
window.onload = async (occasion) => {
if (window.ethereum) {
window.web3 = new Web3(window.ethereum);
} else {
alert("Please set up MetaMask or any Ethereum Extension Pockets");
}
window.userWalletAddress = window.localStorage.getItem("userWalletAddress");
showUserDashboard();
};
We will take a look at our implementation with the next take a look at instances:
CASE 1 – Person with out an Ethereum Pockets Put in
We’ll use an incognito window to check what occurs when a consumer with out an Ethereum pockets put in tries to make use of our software.
Launch your browser incognito window and go to the venture URL:
You will be prompted with this message: Please set up MetaMask or any Ethereum Extension Pockets.
Case 1 handed ✅
CASE 2 – Person with an Ethereum Pockets Put in
Launch your venture in a traditional browser window the place you could have your Ethereum pockets put in, so now, you should not get the immediate message.
Case 2 handed ✅
However the showUserDashboard perform from Step 6 just isn’t outlined but, we’ll create this later.
Step 6 – Including the Web3 Login Operate
For the login perform, our principal curiosity is the consumer’s pockets handle, which we’ll get from the user-selected account from the Ethereum pockets. We’re solely within the chosen Ethereum pockets handle because it’s potential for a consumer to have a number of Ethereum accounts on their pockets.
We’ll observe the thought course of under to implement our Ethereum Login Operate:
- First, create an async
loginWithEthperform and test if the web3 occasion is enabled. - If the web3 occasion is enabled, we’ll use the
window.ethereumtechnique to set off the Metamask pockets for the consumer to pick out an Ethereum account. - After deciding on an account, we’ll replace the
userWalletAddressinternational variable with the consumer’s chosen pockets handle. - Subsequent, we’ll retailer the chosen account in
localStorage. - Then, we’ll redirect the consumer to their dashboard.
- Lastly, we’ll bind the
loginWithEthperform to the login button utilizing the clicking occasion listener.
The above thought course of will be translated into the next traces of code:
Replace your index.js file with the code under:
const loginWithEth = async () => {
if (window.web3) {
attempt {
const selectedAccount = await window.ethereum
.request({
technique: "eth_requestAccounts",
})
.then((accounts) => accounts[0])
.catch(() => {
throw Error("Please choose an account");
});
window.userWalletAddress = selectedAccount;
window.localStorage.setItem("userWalletAddress", selectedAccount);
showUserDashboard();
} catch (error) {
alert(error);
}
} else {
alert("pockets not discovered");
}
};
doc.querySelector(".login-btn").addEventListener("click on", loginWithEth);
In a production-ready software, you would possibly need to retailer the consumer’s Ethereum pockets handle in your database to function the consumer’s distinctive identifier.
Earlier than we proceed to check our implementation, let’s create the showUserDashboard perform within the subsequent step.
Step 7 – Dealing with Redirect
On this step, we will implement the redirect (toggle) between the login part and the consumer dashboard part.
To deal with the redirect, we’ll test if a consumer is related to their pockets handle. If they aren’t related, we’ll show the login part, and as soon as related we’ll redirect the consumer to the dashboard part.
We additionally need to replace the web page title of the webpage to indicate the consumer the state of the web site.
Replace your index.js file with the next traces of code:
const showUserDashboard = async () => {
if (!window.userWalletAddress) {
doc.title = "Web3 Login";
doc.querySelector(".login-section").fashion.show = "flex";
doc.querySelector(".dashboard-section").fashion.show = "none";
return false;
}
doc.title = "Web3 Dashboard 🤝";
doc.querySelector(".login-section").fashion.show = "none";
doc.querySelector(".dashboard-section").fashion.show = "flex";
};
If you happen to refresh your software after making use of the showUserDashboard perform, it is best to have the ability to connect with your Metamask pockets and be redirected to the dashboard part. Have a look at the title bar as properly! 🤝
Within the subsequent step, we’ll create the showUserWalletAddress perform to show the consumer’s pockets handle on the dashboard.
Step 8 – Displaying the Person Ethereum Pockets Handle
On this step, we’ll create the showUserWalletAddress perform which is accountable for displaying the consumer’s pockets handle on the dashboard. The related consumer’s pockets handle is already out there within the userWalletAddress international variable.
Uncomment the showUserWalletAddress(); and replace your index.js with the next piece of code:
const showUserWalletAddress = () => {
const walletAddressEl = doc.querySelector(".wallet-address");
walletAddressEl.innerHTML = window.userWalletAddress;
};
Now, your Ethereum pockets handle will probably be displayed in your dashboard after refreshing the web page.
Step 9 – Displaying the Person Ethereum Stability
On this step, we will create the getWalletBalance() perform. This perform will get the consumer’s stability and likewise show it on the dashboard.
We’ll make use of the window.web3.eth.getBalance(ethWalletAddress); technique to question the related consumer’s Ethereum account stability.
Uncomment the getWalletBalance(); perform and apply the code under into your index.js file.
const getWalletBalance = async () => {
if (!window.userWalletAddress) {
return false;
}
const stability = await window.web3.eth.getBalance(window.userWalletAddress);
doc.querySelector(".wallet-balance").innerHTML = web3.utils.fromWei(
stability,
"ether"
);
};
From the getWalletBalance perform above, we’re checking to see if there is a related consumer since an Ethereum pockets handle is required to get the Ethereum account stability.
Then, we question the consumer stability by passing the related pockets handle from our window.userWalletAddress international variable as an argument to the getBalance technique.
Lastly, we’re changing the returned “Wei” stability to “ether” and displaying it on the dashboard.
The smallest unit of ether (Eth) is “Wei”. The
fromWeitechnique is a utility technique in web3 that converts any “Wei” worth to ether.
Your Ethereum stability must be displayed after you refresh your webpage.
As proven under, I’ve a zero stability although 🤧
Step 10 – Including Web3 Logout Operate
The ultimate step on this web3 tutorial is implementing a logout perform in our software. How will we sign off from a web3 software? It isn’t that advanced, all we’ve got to do is ready the worldwide window.userWalletAddress variable to null and take away the userWalletAddress from the browser localStorage.
This course of is much like the web2 JWT token logout as properly.
The next traces of code will deal with the web3 logout perform:
const logout = () => {
window.userWalletAddress = null;
window.localStorage.removeItem("userWalletAddress");
showUserDashboard();
};
doc.querySelector(".logout-btn").addEventListener("click on", logout);
And that is it! To check the logout perform, click on on the “Sign off” button. You have to be redirected to the login part as demonstrated under.
Hooray 🎉 🎉 🎉
You’ve efficiently discovered tips on how to add a Web3.js login to your software. This is our closing app demonstration:
Take a look at the entire supply code in case you run into any issues here.
Conclusion
On this tutorial, we used the Web3.js Library to create a login authentication system that permits customers to connect with your web site utilizing their Ethereum pockets. You discovered tips on how to get a consumer’s Ethereum account stability, convert it to ether (Eth) and show it to the consumer.
The place do you go subsequent?
Now that you realize and have seen how authentication will be dealt with in web3 utilizing the Web3.js library:
-
You possibly can learn the introduction to the Web3.js library [here](What’s Web3.js – An Introduction Into the Web3.js Libraries).
-
Learn extra about Web3 wallets here.
-
Take a look at the ten greatest crypto wallets here.
-
Study extra concerning the artists that began the NFT motion here.
If you happen to’re fascinated about studying web3 as a developer or need to brush up your data on web3 applied sciences. We have got you lined on our web3 blog!.
You can too discover extra academic articles about web3 basically, NFTs, DAOs, and so forth. on our web3 weblog here.
