Stay organized with collectionsSave and categorize content based on your preferences.
Sign in users with Twitter
This document shows you how to use Identity Platform to sign in users with
Twitter.
Before you begin
This tutorial assumes you've already enabled Identity Platform, and have a
basic web app written using HTML and JavaScript. To learn about
how to enable Identity Platform and sign in, seeQuickstart.
Configure Twitter as a provider
To configure Twitter as an identity provider:
Go to theIdentity Providerspage in the Google Cloud console.
Enter your TwitterApp IDandApp Secret.
If you don't already have an ID and secret, you can obtain one from theTwitter Appspage.
Configure the URI listed underConfigure Twitteras a valid OAuth
redirect URI for your Twitter app. If you configured a custom domain in Identity Platform,
update the redirect URI in your Twitter app configuration to use the custom domain instead
of the default domain. For example, changehttps://myproject.firebaseapp.com/__/auth/handlertohttps://auth.myownpersonaldomain.com/__/auth/handler.
In theProject settingsside pane, clickAdd Domain, and add your
app's domain.
We recommend that you don't includelocalhostin your production projects.
In theConfigure your applicationsection, clickSetup Details. Copy the
snippet into your app's code to initialize the Identity Platform
client SDK.
ClickSave.
Sign in users with the client SDK
Create an instance of the Twitter provider object:
Optional:Localize the authentication flow. You can specify a language,
or use the device's default language:
Web version 9
import{getAuth}from"firebase/auth";constauth=getAuth();auth.languageCode='it';// To apply the default browser preference instead of explicitly setting it.// auth.useDeviceLanguage();
Optional:Specify additional custom OAuth parameters. These are
specific to Twitter, and are typically used to customize the
authentication experience. You can't pass parameters reserved by OAuth or
Identity Platform.
Use the Twitter provider object to sign in the user. You can either
open a pop-up window, or redirect the current page. Redirecting is easier
for users on mobile devices.
To show a pop-up, callsignInWithPopup():
Web version 9
import{getAuth,signInWithPopup,TwitterAuthProvider}from"firebase/auth";constauth=getAuth();signInWithPopup(auth,provider).then((result)=>{// This gives you a the Twitter OAuth 1.0 Access Token and Secret.// You can use these server side with your app's credentials to access the Twitter API.constcredential=TwitterAuthProvider.credentialFromResult(result);consttoken=credential.accessToken;constsecret=credential.secret;// The signed-in user info.constuser=result.user;// IdP data available using getAdditionalUserInfo(result)// ...}).catch((error)=>{// Handle Errors here.consterrorCode=error.code;consterrorMessage=error.message;// The email of the user's account used.constemail=error.customData.email;// The AuthCredential type that was used.constcredential=TwitterAuthProvider.credentialFromError(error);// ...});
firebase.auth().signInWithPopup(provider).then((result)=>{/** @type {firebase.auth.OAuthCredential} */varcredential=result.credential;// This gives you a the Twitter OAuth 1.0 Access Token and Secret.// You can use these server side with your app's credentials to access the Twitter API.vartoken=credential.accessToken;varsecret=credential.secret;// The signed-in user info.varuser=result.user;// IdP data available in result.additionalUserInfo.profile.// ...}).catch((error)=>{// Handle Errors here.varerrorCode=error.code;varerrorMessage=error.message;// The email of the user's account used.varemail=error.email;// The firebase.auth.AuthCredential type that was used.varcredential=error.credential;// ...});
Then, retrieve the Twitter token by callinggetRedirectResult()when your page loads:
Web version 9
import{getAuth,getRedirectResult,TwitterAuthProvider}from"firebase/auth";constauth=getAuth();getRedirectResult(auth).then((result)=>{// This gives you a the Twitter OAuth 1.0 Access Token and Secret.// You can use these server side with your app's credentials to access the Twitter API.constcredential=TwitterAuthProvider.credentialFromResult(result);consttoken=credential.accessToken;constsecret=credential.secret;// ...// The signed-in user info.constuser=result.user;// IdP data available using getAdditionalUserInfo(result)// ...}).catch((error)=>{// Handle Errors here.consterrorCode=error.code;consterrorMessage=error.message;// The email of the user's account used.constemail=error.customData.email;// The AuthCredential type that was used.constcredential=TwitterAuthProvider.credentialFromError(error);// ...});
firebase.auth().getRedirectResult().then((result)=>{if(result.credential){/** @type {firebase.auth.OAuthCredential} */varcredential=result.credential;// This gives you a the Twitter OAuth 1.0 Access Token and Secret.// You can use these server side with your app's credentials to access the Twitter API.vartoken=credential.accessToken;varsecret=credential.secret;// ...}// The signed-in user info.varuser=result.user;// IdP data available in result.additionalUserInfo.profile.// ...}).catch((error)=>{// Handle Errors here.varerrorCode=error.code;varerrorMessage=error.message;// The email of the user's account used.varemail=error.email;// The firebase.auth.AuthCredential type that was used.varcredential=error.credential;// ...});
Use the credential to sign in the user with Identity Platform:
Web version 9
import{getAuth,signInWithCredential}from"firebase/auth";// Sign in with the credential from the user.constauth=getAuth();signInWithCredential(auth,credential).then((result)=>{// Signed in// ...}).catch((error)=>{// Handle Errors here.consterrorCode=error.code;consterrorMessage=error.message;// The email of the user's account used.constemail=error.customData.email;// ...});
// Sign in with the credential from the user.firebase.auth().signInWithCredential(credential).then((result)=>{// Signed in// ...}).catch((error)=>{// Handle Errors here.consterrorCode=error.code;consterrorMessage=error.message;// The email of the user's account used.constemail=error.email;// ...});
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Hard to understand","hardToUnderstand","thumb-down"],["Incorrect information or sample code","incorrectInformationOrSampleCode","thumb-down"],["Missing the information/samples I need","missingTheInformationSamplesINeed","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-12-16 UTC."],[],[]]
