Skip to main content

X(Twitter) Social Login with Web3Auth

note

Twitter login can be performed in various ways, depending on the use case. We have demonstrated this with Auth0 & Firebase, but this can be done with any other Federated/JWT providers.

Set up Twitter via Auth0​

  1. Create an Auth0 verifier for your application by selecting Auth0 as the Login provider from this modal. Twitter - Login Providers list on Web3Auth Dashboard

  2. Select Twitter as the Authentication Type based on the dropdown. Twitter - Auth0 Authentication Type list on Web3Auth Dashboard

  3. Enter the Auth0 Client ID and Auth0 Domain from your Auth0 application. See how to create a new Auth0 application here.

    Twitter - Domain and Client ID from Auth0 Dashboard Twitter - Auth0 Client ID and Auth0 Domain on Web3Auth Dashboard

  4. Add the Twitter Social Connection to your Auth0 application.

  5. Click on the Create button to create Twitter Custom Authentication via Auth0 verifier.

Example​

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a project.

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

const web3auth = new Web3AuthNoModal({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});

const openloginAdapter = new OpenloginAdapter({
  privateKeyProvider,
  adapterSettings: {
    loginConfig: {
      jwt: {
        verifier: "w3a-auth0-demo", // Pass the Verifier name here
        typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
        clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);

// Initialize
await web3auth.init();

// Login with Twitter / X
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "jwt",
  extraLoginOptions: {
    domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here
    verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
    connection: "twitter", // Use this to skip Auth0 Modal for Twitter / X login
  },
});

Set up Twitter via Firebase​

Create a Firebase Verifier from the Custom Authentication tab of your Web3Auth Project.

  • Click on the Custom Authentication tab of your Web3Auth Project.

  • Click on the Create Verifier button.

  • Enter a name of your choice for the verifier identifier. eg. w3a-firebase-demo

  • Select Custom Providers from the Choose a Login Provider section. Verifier Modal on Web3Auth Dashboard

  • JWKS Endpoint: Enter https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com as the JWKS endpoint for the Firebase.

  • Now you have the option to paste a sample idToken(JWT) to get the fields for the JWT validation. This step is optional, but if you have a sample JWT you can paste it here to get the fields for the JWT validation. You can also skip this step and fill in the fields manually.

  • The following are the JWT validation fields needed for the Firebase JWT validation:

    • Type iss as a field and https://securetoken.google.com/FIREBASE-PROJECT-ID as a value.
    • Next, type aud as a field and FIREBASE-PROJECT-ID as a value.

    Note: Replace the FIREBASE-PROJECT-ID with your Firebase Project ID.

  • Next, Select Sub, Email or a Custom value from the dropdown for the JWT Verifier ID. This is the field that will be used as the verifier ID for the user, and it has to be unique for each user.

  • Finally, Click on the Create button to create your verifier.

Verifier Modal on Web3Auth Dashboard

It may take up to 10 minutes to deploy the verifier on sapphire_devnet. You'll receive an email once it's complete.

Example​

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { initializeApp } from "firebase/app";
import { TwitterAuthProvider, getAuth, signInWithPopup, UserCredential } from "firebase/auth";

const clientId = "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a project.

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyB0nd9YsPLu-tpdCrsXn8wgsWVAiYEpQ_E", // Replace with your Firebase project's API key
  authDomain: "web3auth-oauth-logins.firebaseapp.com", // Replace with your Firebase project's auth domain
  projectId: "web3auth-oauth-logins", // Replace with your Firebase project's ID
  storageBucket: "web3auth-oauth-logins.appspot.com", // Replace with your Firebase project's storage bucket
  messagingSenderId: "461819774167", // Replace with your Firebase project's messaging sender ID
  appId: "1:461819774167:web:e74addfb6cc88f3b5b9c92", // Replace with your Firebase project's app ID
};

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg"
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});


const web3auth = new Web3AuthNoModal({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});


const openloginAdapter = new OpenloginAdapter({
  privateKeyProvider,
  adapterSettings: {
    loginConfig: {
      jwt: {
        verifier: "web3auth-firebase-examples", // Pass the Verifier name here
        typeOfLogin: "jwt",
        clientId,
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);

// Initialize
await web3auth.init();

const signInWithTwitter = async (): Promise<UserCredential> => {
    try {
      const app = initializeApp(firebaseConfig);
      const auth = getAuth(app);
      const twitterProvider = new TwitterAuthProvider();
      const res = await signInWithPopup(auth, twitterProvider);
      console.log(res);
      return res;
    } catch (err) {
      console.error(err);
      throw err;
    }
  };

const loginRes = await signInWithTwitter();

const idToken = await loginRes.user.getIdToken(true);

// Login with Twitter / X
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  WALLET_ADAPTERS.OPENLOGIN,
  {
    loginProvider: "jwt",
    extraLoginOptions: {
      id_token: idToken,
      verifierIdField: "sub",
    },
  }
});
Example

You can find a working example of Twitter login via Firebase with Web3Auth here.