Integrate Twitter/X Login

This guide will cover how to set up your Twitter/X Login for custom authentication provider.

Setup Twitter/X OAuth2 Application

  1. Login to X Developer Portal and create a new application attached to a project (or default project).

Navigate to the X Developer Dashboard

  1. Navigate to the ‘User authentication settings’ subheading and click ‘set up’ or ‘edit’.

Navigate to the User Authentication Settings

  1. Configure the app to read profile information, and make it of type web application.

Basic Setting Config Example

  1. Scroll to ‘App info’, and configure the ‘Callback URI/Redirect URL’ to point to Mesh Web3 Services production OAuth2 API URL: https://web3.meshjs.dev/api/auth.

Basic App Info Setting Config Example

  1. Navigate back to your application homepage and navigate to the tab ‘Keys & Tokens’. Then find the OAuth2 client & secret section. Copy & store these values.

Keys & Tokens Example

OAuth2 Client & Secret Example

Configure Authentication Provider

  1. Under the project settings, navigate to the Authentication section.

  2. Select Twitter from the list of providers.

  3. Fill in the Client ID and Client Secret fields with the values from the X Developer Portal.

  4. Toggle the Enable switch to enable Twitter/X Login.

  5. Click on the Save changes button.

Dashboard Twitter Example

Test Twitter/X Login

  1. Go to your application and connect wallet.

  2. Click on the Login with Twitter/X button.

  3. You will be redirected to the Twitter login page.

  4. Login with your Twitter credentials.

  5. You will be redirected back to your application.

  6. You have successfully integrated Twitter Login with your application.