X(Twitter) Social Login with Web3Auth
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
-
Create an Auth0 verifier for your application by selecting
Auth0
as the Login provider from this modal. -
Select
Twitter
as the Authentication Type based on the dropdown. -
Enter the
Auth0 Client ID
andAuth0 Domain
from your Auth0 application. See how to create a new Auth0 application here. -
Add the Twitter Social Connection to your Auth0 application.
-
Click on the
Create
button to createTwitter
Custom Authentication via Auth0 verifier.
Example
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
// Create OpenloginAdapter instance once you have created Web3AuthNoModal instance
const openloginAdapter = new OpenloginAdapter({
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
},
},
},
});
web3AuthNoModalInstance.configureAdapter(openloginAdapter);
// Initialize
await web3AuthNoModalInstance.init();
// Trigger login with Twitter / X
await web3AuthNoModalInstance.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. -
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 andhttps://securetoken.google.com/FIREBASE-PROJECT-ID
as a value. - Next, type
aud
as a field andFIREBASE-PROJECT-ID
as a value.
Note: Replace the
FIREBASE-PROJECT-ID
with your Firebase Project ID. - Type
-
Next, Select
Sub
,Email
or aCustom
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.
It may take up to 10 minutes to deploy the verifier on sapphire_devnet. You'll receive an email once it's complete.
Example
- No Modal SDK
- SFA Web SDK
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { initializeApp } from "firebase/app";
import { TwitterAuthProvider, getAuth, signInWithPopup, UserCredential } from "firebase/auth";
// 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
};
// Create OpenloginAdapter instance once you have created Web3AuthNoModal instance
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
jwt: {
verifier: "web3auth-firebase-examples", // Pass your verifier name here
typeOfLogin: "jwt",
clientId,
},
},
},
});
web3AuthNoModalInstance.configureAdapter(openloginAdapter);
// Initialize
await web3AuthNoModalInstance.init();
// Create a function to handle Twitter/X login via Firebase.
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;
}
};
// Trigger Twitter/X login
const loginRes = await signInWithTwitter();
const idToken = await loginRes.user.getIdToken(true);
// Login in No Modal SDK with Twitter / X idToken
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
WALLET_ADAPTERS.OPENLOGIN,
{
loginProvider: "jwt",
extraLoginOptions: {
id_token: idToken,
verifierIdField: "sub",
},
}
});
import { ADAPTER_EVENTS, CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
import { TwitterAuthProvider, getAuth, signInWithPopup, UserCredential } from "firebase/auth";
// Initialize
await web3AuthSFAInstance.init();
// Create a function to handle Twitter/X login via Firebase.
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;
}
};
// Trigger Twitter/x Login
const loginRes = await signInWithTwitter();
const idToken = await loginRes.user.getIdToken(true);
// Parse the idToken to retrive the user information
const userInfo = parseToken(idToken);
// Login in SFA SDK with Twitter / X idToken
const web3authProvider = await web3auth.connect({
verifier: "w3a-firebase-demo",
verifierId: userInfo.sub,
idToken,
});