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