In my previous Ionic [2|3] based article: Ionic 2 | Successful OAuth Social Login with Firebase, I demonstrated how to integrate a Firebase OAuth social login support with Ionic. Today I will show 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 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

 
Is Ionic (2 or 3) causing you problems? Are you struggling with your application? Trust me, I was in the same situation like you. 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 here, leave me a comment, and I will do my best to cover it.
 
 

Preparations

 
Before we do anything, make sure you have everything set up for Ionic [2|3] development. One last thing, as this framework is now known only as Ionic, further down the line I will refer to it as such; I will not use any version numbers. I will simply refer to it as Ionic.
 
To continue working on this tutorial you should have these:
 
  • Android Environment (or iOS if you’re working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
 
If you don’t have a prior Ionic installation find more information here: Ionic [2|3] | Installation Guide.
 

1. Update Ionic CLI

 
If possible you should have the latest nodeJS version, without it, you’ll not be able to appropriately install/update Cordova and Ionic. Worst case scenario, use any recent version possible.
 
On the other hand, If you have already worked with Ionic/Cordova, make sure they’re up to date; older versions may not work with this tutorial:
 
npm install -g ionic cordova
 
or to do a simple update:
 
npm update -g ionic cordova
 
 

2. Create A New Project

 
ionic start IonicSimpleAuthorizationExample blank
cd IonicSimpleAuthorizationExample
 
If you prefer a working example you will find it at the end of this article; if not, keep reading.
 
Warning: As some of you don't have a prior Ionic CLI experience, from this point and on, every time I tell you to execute something, do that inside an example project folder.
 

3. Add Required Platform

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

Example

 
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

 
This tutorial requires at least two pages. The first page will hold authorization form. The second one is just a plain home page where the application will end up after successful authorization.
 
As there’s already one existing page (component) HomePage, we will need to add one more (authorization page):
 
ionic generate page auth
 
This will generate a new folder called auth (inside pages folder) including our new AuthPage page. This process is done automatically, a AuthPage name was formed using page name we provided with ionic generate.
 
You can also do this manually but this way is much faster and error free.
 
Before we can proceed any further, include this new page into app.module.ts file (as currently this is not done automatically):
 
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AuthPage } from '../pages/auth/auth';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AuthPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AuthPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
 
Let us proceed to app.component.ts file.
 
This is the point where we need to decide which page is going to be shown first. If a user has previously used this application, there’s a good chance authorization data is already stored in local storage. And if provided authorization data is correct (we’re assuming authorization process was successful) application will route us to HomePage. On the other hand, if authorization process was unsuccessful or if authorization data was not stored in local storage, application will navigate to AuthPage:
 
  checkPreviousAuthorization(): void { 
    if((window.localStorage.getItem('username') === "undefined" || window.localStorage.getItem('username') === null) && 
       (window.localStorage.getItem('password') === "undefined" || window.localStorage.getItem('password') === null)) {
      this.rootPage = AuthPage;
    } else {
      this.rootPage = HomePage;
    }
  }
 
Also, don’t forget to include AuthPage, as HomePage is the only one included by default:
 
import { AuthPage } from '../pages/auth/auth';
 
At this point we have two pages and depending on the localStorage status application will display either AuthPage or HomePage.
 
I will borrow authorization page from my previous article here: Ionic [2|3] | How To Create And Validate Forms. As form building is also covered in the previously mentioned article I will not describe it here. We will just fast forward to authorization function.
 
This example will work on the assumption that authorization is always successful; this way I don’t need to prepare a server-side code.
 
 
onSubmit(value: any): void { 
    if(this.authForm.valid) {
        window.localStorage.setItem('username', value.username);
        window.localStorage.setItem('password', value.password);

        this.nav.push(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

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

    regards

  • Johnny FirstShoe

    All I get is a blank screen? Has ionic 2 changed?