Discord Social Login with Web3Auth

info

Using Discord with Web3Auth Guide

Create a Discord app

1. Create a Discord API application.

2. Navigate to OAuth2 from the sidebar, and paste the following as Redirect URI into the "Redirect URI" field.

   • https://auth.web3auth.io/auth

   

3. Don't forget to save your changes!

4. Next, obtain the "Client ID" from here. We will use this in our Web3Auth Dashboard.

   

Create a Discord verifier

• Go to the Web3Auth dashboard and select your project. Click on the Custom Authentication tab, then click on the Create Verifier button to create a new verifier.

  

1. Create a verifier for your Discord application by selecting Discord as the Login provider from this modal.
2. Paste the Client ID from the Discord App(above) to the Client ID field and click on Create.

Example

Modal SDK

import { AuthAdapter } from "@web3auth/auth-adapter";
import { CHAIN_NAMESPACES } from "@web3auth/base";

// Create AuthAdapter instance once you have created Web3Auth instance
const authAdapter = new AuthAdapter({
  adapterSettings: {
    loginConfig: {
      // Discord login
      discord: {
        verifier: "w3a-discord-demo", // Pass the Verifier name here
        typeOfLogin: "discord", // Pass on the login provider of the verifier you've created
        clientId: "1151006428610433095", // Pass on the Discord `Client ID` here
      },
    },
  },
});

web3AuthInstance.configureAdapter(authAdapter);

// Initialize Modal
await web3AuthInstance.initModal();

// Login with Discord
await web3AuthInstance.connect();

No Modal SDK

import { AuthAdapter } from "@web3auth/auth-adapter";

// Create AuthAdapter instance once you have created Web3AuthNoModal instance
const authAdapter = new AuthAdapter({
  adapterSettings: {
    loginConfig: {
      discord: {
        verifier: "w3a-discord-demo", // Pass the Verifier name here
        typeOfLogin: "discord", // Pass on the login provider of the verifier you've created
        clientId: "1151006428610433095", // Pass on the Discord `Client ID` here
      },
    },
  },
});

web3AuthNoModalInstance.configureAdapter(authAdapter);

// Initialize
await web3AuthNoModalInstance.init();

// Login with Discord
await web3AuthNoModalInstance.connectTo(WALLET_ADAPTERS.AUTH, {
  loginProvider: "discord",
});

Troubleshoot

Duplicate token found

warning

Receiving Could not get result from torus nodes Duplicate token found error when using Custom verifier for Discord?

• This is because Discord issues the same token for 30 mins.
• We revoke it for you for default verifiers( such as when using Web3Auth Modal @web3auth/modal).
• But when using Custom Verifier for Discord, the integrating dApps have to revoke the token themself before attempting the next login by using discord clientId and secret to revoke the token.

Here's the sample code to revoke the token:

const axios = require("axios").default;
const FormData = require("form-data");

const { DISCORD_CLIENT_SECRET, DISCORD_CLIENT_ID } = process.env;
const { token } = req.body;
const formData = new FormData();
formData.append("token", token);
await axios.post("https://discord.com/api/oauth2/token/revoke", formData, {
  headers: {
    ...formData.getHeaders(),
    Authorization: `Basic ${Buffer.from(`${DISCORD_CLIENT_ID}:${DISCORD_CLIENT_SECRET}`, "binary").toString("base64")}`,
  },
});