In my previous Ionic 2 based article: Internationalize and Localize Your App With Angular 2, I showed you how to add multi-language support to your Ionic 2 application. Now let me show you how to integrate Firebase OAuth social login into your hybrid mobile application.

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


Table of Contents

Ionic 2 is causing you problems? Are you struggling to make it work? Trust me, I wasn’t in any better situation. If you require more information beyond the subject of this article you will probably find it in a list below. Take a look; if there’s a topic not covered there, leave me a comment and I’ll cover it.


Before we can begin, make sure you have everything preconfigured for Ionic 2.
You should have these:
  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic 2
  • Cordova
Find more information here: Ionic 2 | Installation Guide if you don’t have a previous Ionic 2 installation or if you have never read my previous articles on this topic.

1. Update Ionic & Cordova

You need to have a latest nodeJS version, without it, you’ll not be able to install/update Cordova and Ionic appropriately.
If you have a previous Ionic/Cordova installation make sure its up to date, older versions may not work with this tutorial. Though latest versions may also mess things up:
npm install -g cordova ionic@beta
or you can even do it like this:
npm update -g cordova ionic@beta
I will remove beta keyword once Ionic 2 reach RC status.
Warning: Ionic2 is still in alpha status so the final implementation may differ from this code. I will update this article if and when that happens.

2. Create A New Project

ionic start Ionic2FirebaseOAuthExample blank --v2
cd Ionic2FirebaseOAuthExample
Open app directory and remove all content from a directory called pages but don’t delete it. Somewhere below you’ll find a link to GitHub repo holding a working example (or you can copy past provided code). Download zipped project repo folder, copy app and www directory and past it into a newly created folder.
Warning: Since some of you never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.

3. Add Required Platform

Add Android platform:
ionic platform add android
MacOS users can also add iOS platform:
ionic platform add ios

4. Install Cordova Whitelist plugin

If you’re using Cordova 4+ and especially if you’re accessing remote content don’t forget to install Cordova Whitelist plugin. On the other hand, InAppBrowser is required for a successful authorization.
cordova plugin add cordova-plugin-whitelist
cordova plugin add cordova-plugin-inappbrowser@1.1.0
Open www folder and add this security meta tag to index.html file:
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

5. Create A Firebase Account

If you don’t have a Firebase account, get one here:
Firebase Signup
Because Firebase is, in essence, a Google product you will need a Google account to log in.
Give your app a name and press “Create New App”.
Ionic 2 Firebase Tutorial 1
Press Manage App button and don’t close this page, we need one more step before we can proceed.
This tutorial will cover Twitter authorization, meaning, we need to create a Twitter App, click on a link below and click Create New App:
Twitter Application Manager
Ionic 2 Firebase Tutorial 2
Give you application some name and description. Website name requires a full link, including leading http:// or https://. Last but not least, enter a callback URL.
Callback URL looks like this:<YOUR-FIREBASE-APP>/auth/twitter/callback
Where <YOUR-FIREBASE-APP> represents a name of your Firebase app, in this case, a URL looks like this:
Click on a Create New App button.
On the next page click on a Keys and Access Tokens tab:
Ionic 2 Firebase Tutorial 2
Remember Consumer Key and Consumer Secret, we will need it for the next step. Go back to the Firebase administration and on the left side click on a Login & Auth tab.
Select and enable checkbox: Enable Twitter Authentication. Enter previously mentioned Consumer Key and Consumer Secret into provided input fileds below:
Ionic 2 Firebase Tutorial 2
You don’t need to fill Authorized Domains unless you’re planning on using this OAuth in classic web pages.


First take a look at this embedded example:
Ionic 2 Firebase Social OAuth Tutorial
Source code and GitHub repo link can be found on the next page.
Continue to the next page

  • Steven Hastie

    I can’t get this to work… Using the exact code. I get Firebase not defined error… Then if I define it I get TypeError: ionic_1.Firebase is not a function.

  • Leif Wells

    Once a user has signed in, is there a way for the signing in process to happen automatically? As in, I don’t want the user to have to log in every time they open my app.
    Is there something that I am missing?

  • Nuno Arruda

    The unauth() method only unauthenticates the Firebase reference and does not kill the Google OAuth session.

    After pressing the logout button and pressing the login button again the user is automatically logged in (using the previous OAuth session) and I don’t want that.

    I need my logout button to also kill the Google OAuth session so when the login button is pressed again it prompts for the username and password once more. How can I achieve that?

  • ZorgoZ

    Thank you for this tutorial, and all others too. But it was not easy to get it working with current blank template. First of all ES6 does not allow class level fields, thus I got syntax error. I had to recreate the project from TypeScript template. Imports do differ also; {Page} for example is in ‘ionic-angular’ not ‘ionic/ionic’. I had also to install typings and firebase under typings.
    But it is working finally… 🙂

    • Galaxy Lam

      Hi ZorgoZ, I am using ionic 2 beta 11, typescript can’t recognise “Firebase” as the following code, may I know how do you cope with it? Many thanks ! (I have install firebase typing, I can do email authorization, but I have no idea how to do the social login part) : this.messagesRef = new Firebase(this.firebaseUrl);

  • arsene

    i’m using a login screen and sidemenu, how can i pass data with a sidemenu? for my sidemenu i have a logout button and about me screen???

    • Runfast Webmaster

      Hi, Did you found a solution ?
      I have the same kind of project with a side menu too.

      • arsene

        not yet. i’m working on; dear

        • Runfast Webmaster

          I maybe found a solution where can I post the app for you to test it ?

  • The Button that should open Twitter App creation links to the same as above button, which goes to Firebase signup!

  • Muhammad Kamran Qadri

    I was expecting, firebase 3. 🙁

  • Muthupalaniappan S

    Can U update this code. currently google take over the firebase

  • Elindor

    +1 for an update of this code please !

  • Galaxy Lam

    +1 for an update of this code please !