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 dragan.gaic@gmail.com, 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.
 
 

Preparations

 
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:
 
https://auth.firebase.com/v2/<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:
 
https://auth.firebase.com/v2/gajotres/auth/twitter/callback
 
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.
 

Example

 
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