Ionic 2 – Firebase Authentication II

Hi Friends,

This is a response to several of our friends saying that the code I provided for the Firebase post which I made a couple of weeks back din’t work in mobile devices and worked only in the browsers. I sincerely apologise for that and I decided to explain how to make it work on your device in this post.

Let’s begin.

A screencast of the post:

The complete code for this post is available here.

First, let’s clone the repo that we created previously.

Now run the following commands one by one so that it ‘becomes’ an Ionic 2 project.

After you add a platform, you could simply run it on any device and it should run fine.

Now in-order to make this app work on a device, i.e., to enable app login using firebase we need to do minor modifications to the code. For instance, let’s take facebook first.

To ensure facebook login happens smoothly, let’s make use of the cordova-plugin-facebook4.

Install the plugin using the below command.

(Replace APP_ID and APP_NAME with your App Id and Application name).

Now open up login.ts and add the imports as shown below.

Then inside the fblogin() function add the below lines of code.

This is pretty much self-explanatory. I am simply checking if the platform on which the app is running is cordova. If it is I am using the cordova facebook plugin to login and then using the access token that I have received I create a firebase auth credential.

Using this firebase Auth credential, I then login with the firebase.auth().signInWithCredential() method. Upon successful login I simply display the name in an alert and then redirect the user to homepage.

Pretty much simple right. Run this in your device by adding a platform. It should go fine.

This is how you sign-in into your app using firebase on a device guys.

Now for twitter, it will be slightly different. In case of twitter (which again uses Oauth 2.0) we would be giving both the access token and secret while we create a firebase credential as shown below.

Now here, I have hardcoded the key and secret in the app. But in reality you will be connecting to twitter and getting the access token and secret.

(There is a twitter-connect plugin available, but as of now it requires a fabric key).

Anyway, Now I think you would have got an idea on how to do this in your mobile apps.

If you found this helpful, kindly share it with someone else and help them too.

Thanks for reading guys. Peace.

Liked it? Take a second to support admin on Patreon!