In this guide, you will learn how to enable Twitter authentication and onboard dApp users.
- Make sure you can access Arcana Developer Dashboard: <https://dashboard.arcana.network
- Install the
@arcana/authpackage. For details, see Arcana Auth Quick Start Guide.
Note that some steps are performed using [Twitter Developer Portal, and others using Arcana Dashboard. After that simply integrate your dApp with the Arcana Auth SDK to trigger Twitter login and onboard users.
To enable social authentication via Twitter in the 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.
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 generate Twitter authentication credentials.
You can choose to use defaults for other settings or change them as per your use case. For details, see How to configure App Guide.
Do not close the dashboard browser tab. Open another tab and set up Twitter OAuth. Then come back to the Dashboard tab and complete the dApp configuration settings.
Step 2: Use Twitter Developer Console
The app developer is required to have a Twitter Developer Account. To configure and use the Twitter Developer Portal to generate Twitter OAuth credentials, you need to have Twitter Elevated Access.
Go to the Twitter Developer Portal and create a new application entry for setting up the OAuth credentials for your dApp.
Select an appropriate environment and create a new name for your dApp on the Twitter Developer Portal.
In the Keys and Tokens tab, the API Key and API Key Secret values are generated automatically for your newly created app entry. Make sure you copy both of these as they will be needed later for setting up Twitter in the Arcana Dashboard.
After this, you need to select OAuth Setup as shown below and configure the Redirect URI and your website domain.
When you click Setup, you will see OAuth options. For Type of App field, select the Web App option.
In the App Info section, select the Redirect URI field. You need to specify your dApp callback URL in the Twitter settings as the redirect URI copied from the Arcana Developer Dashboard in the previous step.
Specify all the fields appropriately. Do not leave the optional fields empty.
- Website domain
- Organization details
- Terms of Service
Make sure you save all the settings.
If you miss copying the API Key and the API Key Secret earlier, you can go App Settings section in the Twitter Developer Dashboard. Refer to the Keys and Tokens tab. You will see under the Consumer Keys section, there is an option to regenerate the API key and secret. Make sure you copy both of these details.
These details will be required in the next step while completing the Arcana dashboard dApp configuration.
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. Refer to the "Twitter" settings and paste the API Key assigned by Twitter, in the previous step.
Save the settings. Arcana Network assigns an Client ID to every registered and configured dApp. You need to save this Client ID and use it while integrating the dApp with the Auth SDK.
You are all set with the Twitter configuration. Integrate the Web3 application with the Arcana Auth SDK and call the user onboarding function when the user chooses to log in.
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 with Arcana Auth SDK and trigger Twitter login
Use the instructions here to integrate with Arcana Auth SDK. After integration, use the following code to trigger user authentication via Twitter:
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:
That is all!
Your dApp is all set for onboarding users via the Twitter authentication mechanism.
After enabling user sign-in via Twitter, you can allow authenticated users to access the Arcana wallet for signing blockchain transactions on any EVM-compatible network.
- Arcana authentication concepts.
- How to integrate with Arcana Auth SDK
- Handling authentication errors