How to set the app always login until user click the logout button on ionic3

Question

I created a new mobile app in ionic3

If an user closes the app without clicking the logout button, the user should be logged in if he or she re-opens the app. However, if an user closes the app and re-opens it, login page appears.

How do I set up the app so the users stay logged in until they click the logout button?

Answer 1

Well, the way I think they do that, is tracking the ip. If the user enters from the same ip, and user has not log out (you have to save that info in a tb) the the script logs him/her in with user info ( that user info also in the former tb along with the ip)

YOu should have guessed that

Answer 2

In my case, I use JWT ( https://jwt.io/ ) for authentication.

So, when users login, the jwt info would be stored in localStorage as well. Of course, when user logout, JWT info in localStorage will be deleted.

When application is launched, I check localStorage and if there is a valid JWT info (JWT has valid time info as well), I use the JWT info.

I hope it would be helpful :)

Answer 3

You can recover it by using localstorage

I will provide an example for you.As usal app.component.ts is load first so i need to work on it for which page are showing.

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav  } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {ProfilePage} from "../pages/profile/profile";
import {LoginPage} from "../pages/login/login";

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

export class MyApp {

  @ViewChild(Nav) nav: Nav;
  rootPage: any;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

    platform.ready().then(() => {
      this.initializeApp(statusBar, splashScreen);
    });

  }

  initializeApp(statusBar: StatusBar,
                splashScreen: SplashScreen) {

    let username = window.localStorage.getItem('username') ? window.localStorage.getItem('username') : '';
    let password = window.localStorage.getItem('password') ? window.localStorage.getItem('password') : '';

    if(username == 'user' && password == 'user') {
      this.nav.setRoot(ProfilePage);
    }else{
      this.nav.setRoot(LoginPage);
    }
    statusBar.styleDefault();
    splashScreen.hide();
  }
}

Here username and pasword are taken from localstorage if they have no value then its load LoginPage .In LoginPage you need to setup for storing username and password in localstorage.

  signIn(){

    if (this.loginForm.value.username=="user" && this.loginForm.value.password=="user") {
          window.localStorage.setItem('username', this.loginForm.value.username);
        window.localStorage.setItem('password', this.loginForm.value.password);
          this.navCtrl.setRoot(ProfilePage);
    }
  }

And also when you logout then destroy username and password localstorage value.

 window.localForage.removeItem('username')
 window.localForage.removeItem('password')