So far so good. On the next page, we will show a welcome message:
 
constructor(public nav: NavController) {
    this.nav = nav;
    this.username = window.localStorage.getItem('username');
}
 
<h1>Welcome {{username}}</h1>
 
Unfortunately, there’s one small problem. Because we made a transition between AuthPage and HomePage, our application will show a back button. As we are using an authorization component, this is something we want to avoid. There’s only one case where we want to allow back functionality, and that’s when a user clicks on the Logout button.
 
To hide back button, add hideBackButton keyword to HomePage NavBar component:
 
<ion-header>
  <ion-navbar hideBackButton>
    <ion-title>Home Page</ion-title>
  </ion-navbar>
</ion-header>
 
If we close and reopen this application, because there are stored user data in local storage, app.component.ts will navigate us to the HomePage.
 
What will happen, if we click on a Logout button, and application navigates us back to the AuthPage again? We will indeed witness a transition, but HomePage will stay in a navigation stack (navigation history). For example, if we click on a back button (Android, this will thankfully not work on iOS) we will navigate back to the HomePage. Again, this is something we want to avoid.
 
During logout action, we will first remove username and password stored in local storage. Next, we will set FormPage as a root page and pop directly to it, thus cleaning existing navigation history:
 
logout(): void { 
    window.localStorage.removeItem('username');
    window.localStorage.removeItem('password');

    this.nav.setRoot(AuthPage);
    this.nav.popToRoot();   
}  
 
If we restart our app again, the root component will navigate us to the AuthPage.
 

Source Code

 
In case GitHub repo is not available, and you can only use code provided below, this is what project folder looks like (image was taken from the Sublime text editor):
 
Ionic 2 Simple Authorization Project Structure
 
I’ll show you only relevant files; everything else is available in provided GitHub repo.
 
app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

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

@Component({
  templateUrl: 'app.html'
})

export class MyApp {
  rootPage:any;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      this.checkPreviousAuthorization();
    });
  }

  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;
    }
  }  
}
 
app.module.ts
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 {}
 
auth.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { HomePage } from '../home/home';

@IonicPage()
@Component({
  selector: 'page-auth',
  templateUrl: 'auth.html',
})

export class AuthPage {

	authForm: FormGroup;

	constructor(public nav: NavController, public navParams: NavParams, public formBuilder: FormBuilder) {

		this.nav = nav;

	    this.authForm = formBuilder.group({
	        username: ['', Validators.compose([Validators.required, Validators.pattern('[a-zA-Z]*'), Validators.minLength(8), Validators.maxLength(30)])],
	        password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
	    });
	}

	onSubmit(value: any): void { 
	    if(this.authForm.valid) {
			window.localStorage.setItem('username', value.username);
			window.localStorage.setItem('password', value.password);

			this.nav.push(HomePage);
	    }
	}   
}
 
auth.html
<ion-header>
  <ion-navbar>
    <ion-title>Authorization Page</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
	<form [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)">
        <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input formControlName="username" type="text"></ion-input>
        </ion-item>

        <ion-item *ngIf="authForm.controls.username.hasError('required') && authForm.controls.username.touched">
            <p>Sorry, field username is required!</p>
        </ion-item>
        <ion-item *ngIf="authForm.controls.username.hasError('pattern') && authForm.controls.username.touched">
            <p>Sorry, only small and capital letters are allowed!</p>
        </ion-item>        
        <ion-item *ngIf="authForm.controls.username.hasError('minlength') && authForm.controls.username.touched">
            <p>Sorry, minimum username length is 8!</p>
        </ion-item>
        <ion-item *ngIf="authForm.controls.username.hasError('maxlength') && authForm.controls.username.touched">
            <p>Sorry, maximum username length is 30!</p>
        </ion-item>

        <ion-item>
            <ion-label floating>Password</ion-label>
            <ion-input formControlName="password" type="password"></ion-input>
        </ion-item>
        <ion-item *ngIf="authForm.controls.password.hasError('required') && authForm.controls.password.touched">
            <p>Sorry, field password is required!</p>
        </ion-item>
        <ion-item *ngIf="authForm.controls.password.hasError('minlength') && authForm.controls.password.touched">
            <p>Sorry, minimum password length is 8!</p>
        </ion-item>                

		<button ion-button full color="primary" [disabled]="!authForm.valid" style="margin-top: 20px;" type="submit">Authorize</button>        
	</form>
</ion-content>
 
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AuthPage } from '../auth/auth';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

	username: string;

	constructor(public nav: NavController) {
		this.nav = nav;
		this.username = window.localStorage.getItem('username');
	}

	logout(): void {
		window.localStorage.removeItem('username');
		window.localStorage.removeItem('password');

		this.nav.setRoot(AuthPage);
		this.nav.popToRoot();   
	} 	
}
 
home.html
<ion-header>
  <ion-navbar hideBackButton>
    <ion-title>Home Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>Welcome {{username}}</h1>
  <button ion-button full color="primary" style="margin-top: 20px;" (click)="logout()">Logout</button>
</ion-content>
 

Deployment

 
Next step, build our application:
 
ionic build android
 
Be careful here, this step may break if you’re behind a firewall. The first execution will take a long time, so be patient.
 
Finally:
 
ionic run android -l -c -s
 
or, as this example is not bound to any platform, you can run it in your browser:
 
ionic serve -l -c -s
 

Download The Code

 
Working GitHub repo link can be found below:
 
GitHub
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



  • 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?