How to Authenticate users with Twitter Authentication

Authenticating your users using Twitter

Read the more

Authenticating users using Google, Facebook, Twitter and GitHub provide a better user onboarding experience. I have already covered an article for Google authentication, GitHub authentication using Firebase. Here is the link to the article

Github Authentication using Firebase => Article

Overview

1. Create Twitter Developer app on developer[dor]twitter[dot]com
2. You need to fill the entire form for Why and What your application does. I am sorry can’t do anything about this.
3. After getting Dashboard
   (https://developer.twitter.com/en/portal/dashboard) access, create the app inside the Project and Apps section.
4. Save the credentials like API key and API secret.
5. Enable sign-in-method with Twitter on Firebase Console.
6. Add API credentials in the Firebase Console project with callback URL.
7. Add Login with Twitter method on Frontend and save access token for the further API call.

You can create your twitter Developer Apps from this link:

* Twitter Developer App Link

After that create a new project from Project & Apps section like I have created.

The left sidebar is where you can create your project app

Access your tokens and secret key from the Keys and tokens section from your particular project. As seen in the image my project app name is CastTweet and from the Keys and tokens section, I can regenerate my tokens.

Enabling Firebase

Now in Firebase Project Console, go to Authentication -> sign-in-method and enable the Twitter method from the list of methods.

Sign-in-method List

Choose the Twitter method from the list of methods. And add your project app credentials after enabling the sign-in-method and lastly copy your callback URL.

Enable Twitter method and add credentials and save your callback URL

The last step is to add that callback URL to the project app inside the developer Twitter portal.

Adding callback URL in Twitter developer project app

Click the Edit button to add a callback URL

Inside the project app clicks the edit button for Authentication settings, and add your callback URL there which you copied from Firebase Console. All the extra process are done now.

Writing Code

We will use the same repository which we use to add GitHub authentication

* Github Authentication Repository

First, we will create a firebase provider, which Firebase Twitter Auth required. Firebase itself gives a method to create a provider for Twitter authentication.

const provider = new firebase.auth.TwitterAuthProvider();

Login with the Twitter method

Our handleTwitterLogin method simply uses the provider we have created. Firebase auth method give signInWithPopup method which accepts the provider as a parameter and in response, it gives us the access token. The accessToken is the most important token as we need this token in future to make a further API request to GitHub API. Also, if your user sign-in using GitHub then do save this accessToken, because you do need some of the user GitHub credentials which can only be accessed via GitHub API using this accessToken.

Our Access Token in console

Final Login page

Conclusion

We can also use Twitter API to authenticate user instead of Firebase but I personally feel this so easy. But if you working in a multinational company, I would strictly recommend using Authentication via Twitter API only.

Until, next time, Have a good day, People.

You can find code here => Repository

More content at plainenglish.io