Using Discord with Web3Auth Plug and Play No Modal SDK
This guide will cover the basics of how to set up your Web3Auth SDK and Discord Login for custom authentication and provide you the steps on how to develop a basic web application on the Ethereum blockchain.
Live Demo: https://web3auth-core-discord-demo.vercel.app
Quick Start
npx degit Web3Auth/web3auth-pnp-examples/web-no-modal-sdk/custom-authentication/single-verifier-examples/discord-no-modal-example w3a-discord-demo && cd w3a-discord-demo && npm install && npm run start
How it works?
When integrating Web3Auth with Discord Login the flow looks something like this:
-
When a user logs in with
Discord
, Discord sends a JWTid_token
to the app. This JWT token is sent to the Web3Auth SDK's login function. -
Finally, on successful validation of the JWT token, Web3Auth Plug and Play No Modal SDK will generate a private key for the user, in a self-custodial way, resulting in easy onboarding for your user to the application.
Prerequisites
-
For Web Apps: A basic knowledge of JavaScript is required to use Web3Auth SDK.
-
For Mobile Apps: For the Web3Auth Mobile SDKs, you have a choice between iOS, Android, React Native & Flutter. Please refer to the Web3Auth SDK Reference for more information.
-
Create a Web3Auth account on the Web3Auth Dashboard
- A Discord Developer account to be used as Login provider for Web3Auth Custom Authentication.
Setup
Setup your Discord App
-
Create a Discord API application.
-
Navigate to OAuth2 from the sidebar, and paste the following as Redirect URI into the "Redirect URI" field.
-
Don't forget to save your changes!
-
Next, obtain the "Client ID" from here. We will use this in our Web3Auth Dashboard.
Setup your Web3Auth Dashboard
-
Create a Project from the Project Section of the Web3Auth Developer Dashboard.
-
Enter your desired Project name.
-
Select the Product you want to use. For this guide, we'll be using the Plug n Play product.
-
Select the Platform type you want to use. For this guide, we'll be using the Web Application as the platform.
-
Select the Web3Auth Network as
Sapphire Devnet
. We recommend creating a project in thesapphire_devnet
network during development. While moving to a production environment, make sure to convert your project tosapphire_mainnet
or any of the legacy mainnet networkmainnet
,aqua
, orcyan
network. Otherwise, you'll end up losing users and keys. -
Select the blockchain(s) you'll be building this project on. For interoperability with Torus Wallets, you have the option of allowing the user's private key to be used in other applications using Torus Wallets (EVM, Solana, XRPL & Casper).
-
Finally, once you create the project, you have the option to whitelist your URLs for the project. Please whitelist the domains where your project will be hosted.
-
-
Create a Verifier from the Custom Auth Section of the Web3Auth Developer Dashboard with following configuration:
- Choose a name of your choice for the verifier identifier.
eg. discord-core-verifier
- Select environment:
Sapphire Devnet
, orSapphire Mainnet
as per your requirement. - Select
Discord
from the Login Provider. - Paste the Client ID from the Discord App(above) to the
Client ID
field. - Click on the
Create
button to create your verifier. It may take up to 10 minutes to deploy the verifier on testnet. You'll receive an email once it's complete.
- Choose a name of your choice for the verifier identifier.
-
You will require the
verifierName
of the newly created verifier andclientId
of the Plug and Play Project.
Using the Web3Auth SDK
To use the Web3Auth SDK, you need to add the dependency of the respective platform SDK of Web3Auth to your project. To know more about the available SDKs, please have a look at this documentation page.
For this guide, we will be talking through the Web3Auth Plug and Play No Modal SDK and using the OpenLogin Provider alongside it to enable Custom Authentication through Twitch Login.