In my previous Ionic 2 based article: Ionic 2 | Successful OAuth Social Login with Firebase, I showed you how to add Firebase OAuth social login support to your Ionic 2 application. Now let me show you how to make a simple application authorization.

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:
    this article will no co
  • 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 CLI

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 ionic@beta
or you can even do it with this:
npm update -g 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 Ionic2SimpleAuthorizationExample blank --v2
cd Ionic2SimpleAuthorizationExample
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
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' *">


First take a look at this embedded example:
Ionic 2 Authorization Example
Source Code and GitHub repo link can be found on the next page.

Source Walkthrough

Before we begin, this article will not cover form validation, I already did that here: Ionic 2 | How To Create And Validate Forms. Also, this example will work with an assumption that authorization is always successful. I will cover different authorization solutions in one of my forthcoming articles.
An example found here was also used in a previously mentioned article covering form validations; I just upgraded it with additional code.
Our code will start in app.js file. Before we show the first application page, we need to resolve which one is it going to be. If a user already used this application, there’s a chance authorization data is stored in local storage. And if that authorization data is accurate (again we’re assuming authorization process was successful) we will display application HomePage. On the other hand, if authorization process was unsuccessful or if authorization data was not stored in local storage, we will navigate it to FormPage:
checkPreviousAuthorization(): void { 
  if((window.localStorage.getItem('username') === "undefined" || window.localStorage.getItem('username') === null) && 
     (window.localStorage.getItem('password') === "undefined" || window.localStorage.getItem('password') === null)) {
    this.root = FormPage;
  } else {
    this.root = HomePage;
Let’s assume that authorization data does not exist and we are in the FormPage. When we finally enter our username and password, application will store these data to local storage and navigate us to HomePage:
Continue to the next page

  • justin

    How can we integrate firebase simple login with this that is not twitter

  • jkjaskaran

    Does window.localstorage something works in ionic 2 or have they replaced it with ionic native LocalStorage

  • ariful alam

    without showing form page, its directly showing home page and when click on logout button that showing logout() is not a function in console.