Ionic 2 – Authentication using Firebase

Hi Friends,

Hope you are all well. This is a long overdue post that has been requested by many of our friends ever since I started writing on this site. In this post let’s see how to build up a simple login interface using Ionic 2 and Firebase-auth.

Let’s begin.,

A video screencast of this post.

The complete code for this post can be found here.

Create a new Ionic 2 project using the below command.

Now create a new page in this using the below command.

This will generate the login page.

Now our app should load this page by default, and only upon logging in successfully, it should take us to the Home page right ? So, let’s wire it up accordingly.

Open up home.ts and add the below code.

I am simply adding a isLoggedin() method that will check whether there’s a value stored in the localstorage. If yes, then the user is logged in; if not then he is not logged in and he is pushed to the login page. Simple.

Now let’s add a couple of feature modules.

First let’s add the angularfire2 module. This is a highly useful module. It is sort of like a toolkit that contains a lot of awesome tools that makes interfacing with firebase a bit easier.

Then add firebase to our app as well.

Now open up console.firebase.google.com and create a new app.

Once created open the app and click on Authentication present in the left sidebar

Click on the web setup button on the top right corner. A popup will open. Copy the var config and the settings from that popup.

Now open up app.module.ts and modify it as shown below.

 

Now let’s build the login form. Open up login.html in your login page and add the below code inside the <ion-content> tags.

Now open up login.ts and add the below code.

 

I am using the email and password method for authentication guys. Go to firebase console again  and under the list of providers click on the pencil icon corresponding to Email/Password as shown below.

3

Now in the corresponding popup that opens up click on enable and click save.

2

Then click on the users tab and add a user as shown below.

4

Now run your ionic app using ionic serve (or in your mobile device).

Try to login with the username and password that you used while creating the account in the firebase console.

If everything goes fine you should be able to login and you will be taken to the home page as well.

Logging in with Twitter:

Twitter uses Oauth 2.0. So the first thing we have to do is create a client in their portal so that we get an api key and an api secret. Open up apps.twitter.com and create a new app.

Now in the keys&tokens tab copy the api key and api secret as shown below.

5

Note that the key specified here won’t work for you since, I have deleted this app already.

Paste it in the firebase console as shown below and enable Twitter Sign-In.

7

Now copy the URL present in this popup and then paste it in twitter portal (in the settings tab) as shown below.

6

That’s it. Now open up login.html in your app again and add a new button as shown below.

Open up login.ts file and add this code in it.

Add the above function below the login function. This is self-explanatory. Its exactly the same except a few minor additions here and there.

Now run the ionic app. You would see a popup window asking you to authorize the app. Once you click on authorize you would be able to login and your home page will be displayed.

Logging in with Facebook:

Facebook login would follow the same steps as above. Visit the developer portal https://developers.facebook.com/ and create an app first. Get the app id and key and paste it in Facebook sign-in method in firebase console and enable it.

Then you need to add the Facebook login product in the facebook developer portal by clicking on the + Add product option in the left sidebar. (Please watch the video for more clarity on this).

Now open up login.html and add a button for it too.

Now open up login.ts and add a function for it too. The final login.ts would look like the one shown below.

Simply run the app now and all three methods would be working fine. Kindly refer to my github repo for any clarifications.

This is how you could use firebase-auth in your Ionic 2 app to create an authentication system with minimal effort guys. (Kindly watch the video for a better explanation).

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

Thanks for reading guys. Peace.

 

Liked it? Take a second to support admin on Patreon!
  • For fblogin() method please change this string ‘Login success with twitter’
    Thank you for this article. It’s very usefull.

  • How to implement fblogout() ?

  • Nitish Sharma

    Thanks for this tutorial but facebook login not work for this side

  • abdullah pariyani

    Thank you for this article. It’s very usefull.

  • Hasni Oussama

    i have a problem with “firebaseLogin/node_modules/angularfire2/interfaces.d.ts” https://uploads.disquscdn.com/images/488bb008b55d328d72f0ede9c8de72d77c48fdb3f7869ae0a5cf4357ce3e9060.png

  • Samir Samati

    Thank you for the greate article!
    I’m becoming an Runtime Error:
    No provider for ApplicationInitStatus!

  • Glrn Daniss

    This is a little bit misguide us as the login method is supposed to be put in service provider or it slower the loading time of the page.

  • Hugo Petla

    Nice article. Can you update it?

  • Aqi Khan

    Hi Raja, I am trying this tutorial. But i have some issue with your providers like Authproviders, its give me an error

  • David Garcia

    when I run the app on android,The window opens and closes if you can put the data