Setting up Web3 authentication is as important as it can be tricky. Your Web3 authentication must identify tokens in the user’s wallet, evaluate token access levels, and grant users access to your app, based on blockchain data.
If this process seems arcane — or even if it sounds simple and you’re wondering what the big deal is — this guide has all the knowledge you need to use Web3 authentication in your decentralized apps (dApps).
If you want the quick-start version, click here to get right to installing Web3 authentication.
All you need to know to put Web3 auth to work
Web3 authentication is the gateway to all things Web3. Whether a user is simply running a few transactions on a DeFi protocol or using blockchain gaming to explore the metaverse, they need Web3 authentication.
Web3 authentication logs users into your app using the blockchain. Without access to the blockchain, it’s virtually impossible to do anything on a Web3 enabled app or network. You need to understand how to implement Web3 authentication if you want to build successful and profitable dApps.
However, before you can understand Web3 authentication and how it works, you need a base layer understanding of Web3 itself.
What is Web3?
Web3 is a core of technologies that change how information is distributed and used on the internet. It’s such a fundamental departure from what came before that it changes how web applications are developed.
The original internet architecture, known as Web1, was a one-way information system where users could view information such as websites. However, it was difficult or impossible for users to create or write their own information. The user was a passive consumer.
Web2 is what most people use today. Web2 architecture is a two-way network that primarily relies on user-generated content.
Web2 enabled things we now take for granted, like social media and blogs with comment sections, where users can view content and write their own posts and comments.
The downside to Web2 architecture is that it centralizes information and affords users little privacy and no ownership of data.
Users enter their personal information on websites and in apps. That information is stored in giant repositories, and is often sold at a profit as marketing intelligence. These centralized information centers are also prime targets for cyber attacks.
Similar to Web2, Web3 is a two-way relationship, where users can read and write information. But Web3 decentralizes personal information by giving users ownership of their data (which we’ll cover in more detail shortly). Rather than giving all of their data to a third-party application, users can choose which data they share.
When you leave a Web3 website or close the app, your personal information goes with your Web3 wallet, rather than staying on the website or app’s server.
Generally, the experience of using Web3 is almost the same as using Web2. Many users won’t even notice the difference.
Because you don’t need to expose your personal information to access the blockchain and use dApps and Web3 websites, Web3 relies on a new approach to authentication.
What is Web3 authentication?
Web3 apps are built on blockchain technology. Web3 authentication enables users to access the blockchain without using traditional login credentials.
Rather than using something like a username and password for authentication, Web3 authentication uses the user’s public wallet address as their identifier (kind of like an email address in web2 terms) and the user proves cryptographic ownership by signing a message with their private key.
Once the user authenticates, apps provide authorization based on what tokens the user’s wallet holds. If the user has the required token or tokens in their wallet, they’re granted access to the app.
This is called “token gating”.
For instance, users with more tokens or certain types of tokens can be granted administrator access, while users with fewer tokens get read-only access.
Additionally, the identity of the user doesn’t need to be revealed for authorization. A user’s wallet can be checked for tokens without knowing who owns the wallet.
In short, Web3 authentication creates fully-featured authentication and security, without compromising user privacy.
Why you need Web3 auth infrastructure
As mentioned earlier, Web3 apps and websites rely on blockchain data. To be web3 native, your app must use blockchain data for authentication and authorization.
Web3 infrastructure employs digital wallets to connect users to a blockchain network, so they can interact with other authenticated users on the network. The process of using a digital wallet to authenticate a user is known as “Web3 Authentication”.
You could build your Web3 authentication process from scratch, but it’s labor-intensive and time-consuming. Based on our research, teams spend upward of four months building a fully featured auth solution, then spend half the time of a developer maintaining it.
It’s much simpler and faster to use a Web3 authenticator such as SlashAuth, which enables you to build a dApp, then plug-and-play the authentication with snippets of pre-built code.
Web3 wallet basics: What is a Web3 wallet?
Web3 wallets give a massive boost to the convenience of Web3 authentication.
Verifying tokens and granting blockchain access requires comparing private key pairs. Web3 wallets automate and simplify this private key comparison so the user isn’t burdened.
Here’s how it works: Web3 wallets are apps or browser extensions that help automate the process of entering and comparing private keys. Rather than prompting a user to find a key and enter it the way you might enter a username and password, a Web3 wallet locates the keys and delivers them for the user.
Additionally, most Web3 wallets are compatible with multiple blockchains. This means people only need one Web3 wallet to access all their Web3 apps and don’t need separate wallets for accessing different blockchains like Ethereum or Polygon.
By installing a single wallet app or browser extension, it’s possible for users to access all their DeFi apps, NFT marketplaces, and blockchain gaming. It’s similar to a password manager, but more private and secure.
The Web3 wallet is on the user’s end, though. For your part, as the developer, you must set up Web3 authentication in your app, so users can login with their wallets.
How to set up Web3 authentication in 4 steps with SlashAuth
SlashAuth enables you to quickly authenticate users and verify their access level using their Ethereum wallet. Here’s how to quickly build Web3 authentication with the SlashAuth React SDK.
1. Configure SlashAuth
Login from the SlashAuth dashboard. You’ll need to sign a local transaction for the Web3 Metamask authentication. But don’t worry, this is a local signature only, which means no gas fees are charged.
Create a new app
Click “New App” in the upper right corner to create a new app. Give your app a name and description.
Get your client ID
Copy the generated client ID number from the general settings page. This key is used publicly, so there’s no need to conceal it.
The client ID tells SlashAuth which app to log the user into. Once your client ID is copied, the next step is to install the SlashAuth React SDK.
2. Install the SlashAuth React SDK
This is probably the simplest step.
Use NPM or Yarn to interact with the SlashAuth API using our official libraries:
NPM
Yarn
That’s it. On to the next step.
3. Configure the SlashAuthProvider Component
You must add a React context to the root of your app to manage state and expose it to your components. Adding this context to the root of your app is required to integrate SlashAuth into your app:
The client ID must exactly match the client ID for an app that you created during the earlier steps to configure SlashAuth.
4. Add Web3 wallet login
The simplest way to implement a Web3 wallet login is to log the user in directly in their browser.
We recommend using the loginNoRedirectNoPopup() function from the useSlashAuth() hook for this:
You can verify that everything works by adding the LoginButton to your app and clicking it.
This should display a Metamask popup which asks you to sign a transaction. Once the transaction is signed, you should see a verify request and a 200 response.
Show authentication information
Create a status component that exposes information about the current user, their login status, and access level. This status component also detects changes in the React context and notifies your components:
Add a logout button
Create a button that logs the user out locally and remotely invalidates their token:
See it all work
The last step is to update your app’s entry point to display all this information and verify that things are working correctly:
At this point, you’ve successfully integrated with SlashAuth. You can see a complete example of this code on the SlashAuth github repo.
Start logging users into your app
Now that you know about Web3 authentication, and you understand the SlashAuth integration, you’re ready to build dApps and grant users access to the blockchain through your app’s login functionality.
Get started with SlashAuth now
