Firebase Login with Twitter

 by Robin Wieruch
 - Edit this Post

Interested in reading this tutorial as one of many chapters in my advanced React with Firebase book? Checkout the entire The Road to Firebase book that teaches you to create business web applications without the need to create a backend application with a database yourself.

In this short visual guide, I want to show you how to activate the Twitter authentication for your Firebase or Firestore application. It should only take you a couple of minutes to set up the Twitter as web login for your app. Afterward, there is no email needed for your users to authenticate with your application.

First, on your Firebase project's dashboard, navigate to the Authentication/Sign-in method option. There you can enable the Twitter sign in method that enables you to login people via Twitter to your .

firebase sign in methods

When enabling the Twitter login method, where no email is needed to sign in to your application later, you need to provide an API key and API secret. Note that all shown sensitive data is fake here, so there is no need to do something with it.  firebase twitter login web

You will get both credentials when creating a Twitter App which we will do in the next steps. Also you need to copy the callback URL for later, because this needs to be provided when creating the Twitter App.

Head over to Twitter to create a Twitter App. If you don't have a Twitter account yet, create one and optionally follow my tweets for other web development tutorials. Next provide an identifiable App name and insightful App description.  twitter app create name description

Provide also the callback URL that you get when enabling the Twitter Sign In Method in Firebase. Also provide a description for Twitter to review your application.  twitter app create callback url

twitter app create description

Create your application. Afterward, you can edit the details of your Twitter App. For instance, retrieve your Keys and Tokens for your Twitter App to use them somewhere else. If you setup the Twitter Sign In Method for Firebase, provide Firebase the API key and the API secret key when enabling it.

twitter app api keys secrets

You also want to edit the permission of your Twitter App to get access to your user's email address when they sign in with Twitter.

twitter app permissions

You can edit the permission and add the privilege to access a user's email address.

twitter app permissions email

You should be able to use the Twitter App in your or any other application now.

Keep reading about 

In this short visual guide, I want to show you how to activate the Facebook authentication for your Firebase or Firestore application. It should only take you a couple of minutes to set up the…

Every time I used Firebase, I ran into the problem of how to test Firebase's database and authentication. Since I am using Jest as my default testing environment, I figured everything I needed…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.