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:
- The authentication on Twitter’s side
- 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:
Here is our callback url:
The twitter application can now be created there:
Entering inside the newly created app now:
The important API IDs (or keys) are here.
Next step, going back to Firebase to add those 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.
Ok let’s fire up our IDEs and code that app!
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.
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:
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.