Discord

In this guide, you will learn how to enable Discord authentication and onboard dApp users.

Prerequisites

Make sure you can access Arcana Developer Dashboard: https://dashboard.arcana.network
Install the @arcana/auth package. For details, see Arcana Auth Quick Start Guide.

Note that some of the configuration steps are performed using Discord Developer Portal, and others using the Arcana Dashboard. After configuring Discord simply integrate the app with the Arcana Auth SDK and trigger user authentication via Discord.

To enable Discord social authentication in Web3 applications, developers must perform these three steps before integrating with the Arcana Auth SDK.

Step 1: Use Arcana Dashboard

Go to the Arcana Dashboard: https://dashboard.arcana.network

Register your dApp by creating a new dApp entry and specifying a name using the 'Create New App' wizard.

Registering the Application

If you have already registered your dApp using Arcana Dashboard and obtained an Client ID, you may skip this step.

You can choose to use defaults for other settings or change them as per your use case. For more details, see How to configure dApp Guide for details.

Go to the Configure->Social Auth configuration section and copy the redirect URI value displayed there. This will be used in the next step to setup Discord OAuth.

Do not close the dashboard browser tab. Open another tab and set up Discord OAuth. Then revisit the Dashboard tab to complete the dApp configuration settings.

Step 2: Use Discord Developer Portal

Go to the Discord Developer Portal and create a new application.

You need to set up OAuth 2.0 credentials for your newly created dApp entry in the Discord Developer Portal. Click OAuth2 in the Discord Developer Portal LHS navigation pane, you will see the Redirects field. Specify the Redirect URI copied from the Arcana Developer Dashboard in the previous step.

Save the application settings in Discord Developer Portal.

The General Information page in the Discord Developer Portal shows a unique Application ID and a public key assigned by Discord for your application entry.

Copy the Application ID and the public key. It will be required in the next step while configuring Discord settings using Arcana Dashboard.

Step 3: Update Arcana Dashboard

Revisit the Arcana Developer Dashboard portal. Click on your app entry and visit the application dashboard. Click Configure->Social Auth in the LHS navigation bar and refer to the "Discord" settings. Paste the Application ID and public key assigned by Discord, in the previous step as the ClientID and secret respectively.

Save the settings. Arcana Network assigns an Client ID to every registered and configured dApp. If you plan to integrate with the Arcana SDKs, you need to save this Client ID.

You are all set with the Discord configuration. Integrate the Web3 application with the Arcana Auth SDK and call the user onboarding function when the user chooses to log in.

Tip

The Client ID is displayed on the top right of your dashboard.

You can revisit the Arcana Dashboard later to view and modify configuration settings.

Step 4: Integrate and Use Arcana Auth SDK

Use the instructions here to integrate with Arcana Auth SDK. After integration, use the following code to trigger Discord login to onboard users:

await auth.loginWithSocial('discord')

Check if a user is logged in:

const connected = await auth.isLoggedIn()

Use other Auth SDK functions in your dApp. See Auth SDK Usage Guide for details.

Add code in the application to log out an authenticated user:

await auth.logout()

That is all!

Your dApp is all set for onboarding users via the Discord authentication mechanism.

What's Next?

After enabling user sign-in via Discord, you can allow authenticated users to access the Arcana wallet for signing blockchain transactions on any EVM-compatible network.