Firebase - Twitter Authentication

In this chapter, we will explain how to use Twitter authentication.

Step 1 - Create Twitter App

You can create Twitter app on this pnk. Once your app is created cpck on Keys and Access Tokens where you can find API Key and API Secret. You will need this in step 2.

Step 2 - Enable Twitter Authentication

In your Firebase dashboard side menu, you need to cpck Auth. Then open SIGN-IN-METHOD tab. Cpck on Twitter to enable it. You need to add API Key and API Secret from the step 1.

Then you would need to copy the callback URL and paste it in your Twitter app. You can find the Callback URL of your Twitter app when you cpck on the Settings tab.

Step 3 - Add Buttons

In this step, we will add two buttons inside the body tag of index.html.

index.html

<button oncpck = "twitterSignin()">Twitter Signin</button>
<button oncpck = "twitterSignout()">Twitter Signout</button>

Step 4 - Authentication Functions

Now we can create functions for Twitter authentication.

index.js

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

function twitterSignin() {
   firebase.auth().signInWithPopup(provider)
    
  .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      console.log(error.code)
      console.log(error.message)
   });
}

function twitterSignout() {
   firebase.auth().signOut()
   
   .then(function() {
      console.log( Signout successful! )
   }, function(error) {
      console.log( Signout failed! )
   });
}

When we start our app, we can sigin or signout by cpcking the two buttons. The console will confirm that the authentication is successful.