Ionic 4 Skip Start-Page when user is logged in

Ionic Framework
1

Hi all,

i have a app with a login-page.

If the user starts the app for the first time the login-page will be shown and the user has to login. If that was succesfull the app redirects the user to the menu-page (and this loads the tabs and so on).

Now, if the user closes the app or sends it to the background and reopens the app, the login-page is shown for a short period of time (less than 1 second) and it redirects again to the menu-page.

How can i prevent the login-page to be shown when the user is already logged in and the user is reopening the app? With ionic 3 that was no problem for me (using setRoot) but now with ionic 4 i face this problem (maybe because of the routes…?)

Here are some code snippets from my code:

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './pages/login/loginPage.module#LoginPageModule' },
  { path: 'menu', canActivate: [AuthGuard], loadChildren: './pages/menu/menu.module#MenuPageModule' },
]

app.component.ts

 this.splashScreen.hide();
            this.authenticationService.authenticationState.subscribe(state => {
                if (state) {
                    this.navController.navigateRoot(['menu/tabs/dashboard']);
                } else {
                    this.navController.navigateRoot('login')
                }
            });

In my AuthGuard i simply check if the user is logged in and return true or false. I followed this tutorial: https://devdactic.com/ionic-4-login-angular/

What do i have to do?

2

This is how I’ve implemented it (using authGuardRedirect for the root path):

const routes: Routes = [
  { path: '', redirectTo: 'home', canActivate: [LoginGuard], data: { authGuardRedirect: 'login' }, pathMatch: 'full' },
  { path: 'login', canActivate: [LoginGuard], loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'home', canActivate: [AuthGuard], loadChildren: './pages/home/home.module#HomePageModule' },
]

Note that I’m using a second Guard, named LoginGuard which checks if the ‘AuthGuard’ is true, if so, my ‘LoginGuard’ will redirect to ‘/home’. Remove the LoginGuard in my example if not desired.

My AppComponent is (kind of) totaly empty!
My AuthGuard is handeling the redirection to “root” ( '/') which is subscribed to my ‘AuthService’ keeping track of my authentication.

3

Could you share the necessary parts of your LoginGuard?

4

Take whatever you need…

AuthGuard.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { AuthService } from '../services/auth/auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  private loggedIn: boolean = false;

  constructor(
    private router: Router,
    private authService: AuthService,
  ) {
    this.authService.getAuthentication().subscribe((value: boolean) => {
      this.loggedIn = value;

      if (this.loggedIn) {
        this.router.navigate(['/']);
      } else {
        this.router.navigate(['logout']);
      }
    });
  }

  public canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (!this.loggedIn) {
      return this.router.navigate(['login']);
    }

    return this.loggedIn;
  }

  public getGuardAuthentication(): boolean {
    return this.loggedIn;
  }
}

LoginGuard.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthGuard } from './auth.guard';

@Injectable({
  providedIn: 'root',
})
export class LoginGuard implements CanActivate {

  constructor(
    private router: Router,
    private authGuard: AuthGuard,
  ) { }

  public canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authGuard.getGuardAuthentication()) {
      this.router.navigate(['home']);
    }
    return true;
  }
}

AuthService.service.ts

  private authenticated: BehaviorSubject<boolean> = new BehaviorSubject(false); // starting app default as unauthorised

    ...

  constructor(
    ...
    private platform: Platform,
    ...
  ) {
    this.platform.ready().then(async () => {
      const accesstoken = YOUR_STORAGE_GET_ITEM('accesstoken');
      return await this.authenticated.next(accesstoken ? true : false);
    });
  }

    ...

  public getAuthentication(): Observable<boolean> {
    return this.authenticated.asObservable();
  }

As you’ve also did read on the other ‘login thread’, because of the initial ‘false’ value of the observable you might indeed see the login page for a split second.
To fix that I’ve implemented my this.splashScreen.hide(); with a 500ms timeout on the only 2 possible landing pages (‘home’ and ‘login’).

F.y.i.: I can live with the timeout solution : )

If anyone has a better sollution please do SHARE!

5

I tried to implement this.splashScreen.hide(); with a 500ms timeout on my Login and Dashboard-page but this seems not to be working.

There has to be a simpler solution to prevent the app to show the Login-Page at startup - or maybe i just don’t understand :smiley:

6

I have solved my problems! Now the app starts and when the user is already logged in my dashboard-page will be shown without the Login-page being shown for less than 1 sec.

my app-routing.module

  { path: '', redirectTo: 'menu/tabs/dashboard', pathMatch: 'full' },
  { path: 'login', loadChildren: './pages/login/loginPage.module#LoginPageModule' },
  { path: 'menu', canActivate: [AuthGuard], loadChildren: './pages/menu/menu.module#MenuPageModule' },

my app.component.ts

 //Check if user is logged-in; if so the dashboard will be loaded otherwise the login-page
            this.authenticationService.authenticationState.subscribe(state => {
                if (state) {
                    console.log("user is logged in");
                    this.navController.navigateRoot(['menu/tabs/dashboard']);
                    this.splashScreen.hide();
                } else {
                    console.log("user is NOT logged in");
                    this.navController.navigateRoot('login');
                    this.splashScreen.hide();
                }
            });

my authenticationService.service.ts

export class AuthenticationService {

  authenticationState = new BehaviorSubject(false);

  constructor(private storage: Storage,
              private platform: Platform,
              public global: GlobalProvider) {
    this.platform.ready().then(async () => {
      this.checkToken();
    });
  }

  checkToken() {
    if (this.global.getUserData() || this.global.getUserData() !== null){
      this.authenticationState.next(true);
    }
  }

  login() {
      this.authenticationState.next(true);
  }

  logout() {
      localStorage.clear();
      this.authenticationState.next(false);
  }

  isAuthenticated() {
    return this.authenticationState.value;
  }

}

my auth.guard.ts

export class AuthGuard implements CanActivate {

    constructor(public authenticationService: AuthenticationService) {
    }

    canActivate(): boolean {
        return this.authenticationService.isAuthenticated();
    }

}

When the user is being logged in i set some data into the localstorage. In my authService i look for these data and set the state to true or false. In the app.component.ts i subscribe to this state and switch the root navigation.

7

still showing login page for 1 second. see authenticationState has initial value as false.
authenticationState = new BehaviorSubject(false);
so it’s going to the login and once authenticationState got true it’s going to the home.

8

What is the GlobalProvider you used in this example?

9

Just a custom class where i do some stuff like setting and getting user data.

10

oki thanks.i was fixed that issue using ReplaySubject instead of BehaviorSubject.BehaviorSubject is required initial value.so that’s the case login page shows for 1 second.

11

Hi shorstmann don’t worry I am here to help you, below is a sample code your help, just add it inside your app.component.ts file don’t forget to vote the answer

initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
this.db.createDatabase()
this.nativeStorage.getItem(“user”).then(res => {
this.router.navigate(["/home"], { skipLocationChange: true });
}).catch(error => {
this.router.navigate(["/login"], { skipLocationChange: true });
});
});
}

cheers!!

12

thq, its worked for me…

13

Sorry, it is not helpful.

14

hi shorstmann have you did it in app.component.ts file? if yes then show me your code,

15

hey ishaquemujtaba in my case its still showing for 1 second

here is my code

initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();

  this.auth.afAuth.authState.subscribe((state)=>{
    if (state) {
      console.log("user is logged in");
      // this.navController.navigateRoot(['tabs']);
      this.router.navigate(["/tabs"], { skipLocationChange: true });
  } else {
      console.log("user is NOT logged in");
      this.router.navigate(["/login"], { skipLocationChange: true });
      // this.navController.navigateRoot('login');
  }
    
  });
});

}

16

One of the things that you have to accept when writing reactive webapps (which all Ionic apps are) is that you cannot know and should not try to influence when things happen. That’s sort of baked into the word “reactive” in the first place. You put things into certain states, wait for triggers to happen, and then react.

In this case, the process of discovering whether a user has already been authenticated is one of those things with unpredictable timing. Instead of trying to eliminate that “1 second”, I would suggest instead putting the app into a state for however long it takes that makes sense for either case (authenticated or not).

The most straightforward way I would think to try would be to delay hiding the splash screen until inside your subscription. If that isn’t to your liking, how about creating your own “splash page”, navigate to that immediately, and then later on to /tabs or login as appropriate?

17

just do it inside your routing class and it will be resolved

18

As rapropos did made it clear, whatever you do, one way around, you’ll have to give the app time to initialize. So the timeout / delay solution should be a proper solution. Just don’t forget that it will only work ‘correct’ when running on an device and not in your browser. (no splashscreen in browser!)

19

Hi, so what is the best way to tackle the 1 second show up of the login form? Increase timeout/duration of splashscreen?

20

Do it like i did. No timeout needed.