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.
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)
- Ionic 2
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.
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.
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 firstname.lastname@example.org
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”.
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
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:
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:
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:
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:
Source code and GitHub repo link can be found on the next page.