Adding Twitter Authentication with Firebase in Ionic

The OAuth system allows us to skip the registration step and allows a user to directly access the application using a social media account.
In this tutorial we mix together Firebase and Twitter’s Authentication in an Ionic mobile application.
Just like the previous tutorial on Google OAuth, this process is done in two steps:

  1. The authentication on Twitter’s side
  2. Acquiring a token and secret ID from this first step and passing it to Firebase

Setting up Firebase and Twitter projects

Let’s get into the (magnificent) Web Interfaces setup.
The first step is acquiring the callback url from Firebase and enabling the service in the Authentication section:

ionic twitter firebase oauth enableHere is our callback url:

ionic twitter firebase oauth get callbkack url

The twitter application can now be created there:

ionic twitter firebase oauth create app
Like this:
ionic twitter firebase oauth create appEntering inside the newly created app now:
ionic twitter firebase oauth get ids

The important API IDs (or keys) are here.

Next step, going back to Firebase to add those IDs:

ionic twitter firebase oauth add ids

We are almost done with the boring exciting interface configurations.
In order to use the Ionic Native Twitter Connect plugin, we need one last ID from a service named Fabric.

An account is required there.
After login in, acquiring the API key is tricky, there is no “API keys” section, however there is one tutorial page where the API key is used in a code snippet there:

ionic twitter firebase oauth fabric key

Ok let’s fire up our IDEs and code that app!

Twitter Communication

As usual we start with the project creation and Ionic & Cordova plugins installation:

Right off the bat, the IDs are used. The Fabric key for installing the Ionic Native Twitter Connect plugin and the Twitter API keys are added to the config.xml file:

The Twitter Connect plugin is then added to the app.module.ts file as a Provider:

The home.html file:

One simple button to login and an <ion-item>.
The <ion-item> will show the user’s name and picture, but only if the user exists.

The rest of the code is in the home.ts file:

The Ionic Native TwitterConnect plugin is imported and injected into a twitterConnect property.
The login method uses twitterConnect’s login method and handle the success and errors. If Twitter is nice to us, we should receive an object that has the secret ID and the token.
Those information will be used by Firebase in AngularFire.

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Last Stop: Firebase

Let’s install the AngularFire2 library:

And set it up in the app.module.ts file:

As we have seen in a previous tutorial, the AngularFire and AngularFireAuth modules are imported with the Firebase configuration file named environment.ts.
The AngularFireAuth Service is then added as Provider alongside the TwitterConnect Service.

Back to the home.ts file:

The initialization part is different now, we need to add the AngularFireAuth Provider and also import the whole firebase library to stock it in a firebase variable.
A new user property will be set later when the data come from Firebase through the updated onSuccess method:

This time we do some work with the response we received from Twitter.
The token and secret keys are used to create the Twitter credential. This information will be used to sign in the user on Firebase‘s side with the signInWithCredential method.
Once this is successfully done, we receive our Firebase user.

Here is the final result:

ionic twitter firebase oauth result

BONUS CONTENT
Enter your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

Allowing users to login without using their password is awesome (I generally forget mines and have to retrieve it by mail every time).
In this case, this process is controlled by two entities: Twitter and Firebase.
Both have their own Web Interfaces where the IDs are available. Those IDs or API keys allow us to link our applications to their services.
First connecting to Twitter then Firebase using Twitter’s credential.

If you liked this tutorial, you can learn more on Firebase’s database, basic authentication, storage and cloud functions.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

3 Shares