Prevent user to access certain page if not login ionic

ionic 4 auth guard
ionic 4 skip start-page when user is logged in
ionic nav guards
ionic canactivate redirect
ionic redirect if not logged in
auth guard angular ionic
ionic 4 keep user logged in
ionic 4 login page

i'm trying to redirect user from welcome.page.ts where login button exist if they already logged in the will redirect to home.page.html, i have code in welcome.page.ts like this

  goHome(){
    this.router.navigateByUrl('/tabs/home');
  }
  login(){
    this.service.login();
  }
  ionViewWillEnter() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (!user) {
        console.log("user is not logged in");
        this.login();
      } else {
        this.goHome();
        return;
      }    
    });
  }

am i doing right?

heres my service code

login(){
    this.googlePlus.login({
      'webClientId' : '927898787134-spvfdmvm9apq0e1fo2efvvura8vqpid8.apps.googleusercontent.com',
      'offile' : true
    }).then(res=>{
      firebase.auth().signInWithCredential(firebase.auth.GoogleAuthProvider.credential(res.idToken))
      .then(suc=>{
        this.getData(suc);
        this.router.navigate(["/tabs/home"]);
      }).catch(ns=>{
        alert('Unsucessful');
      })
    })
  }

I recommend using AngulaFireAuthGuard. Without adding any special method, it handles everything for you without the need of additional code to your auth service or the page.

Instead of using a regular guard, you can directly add it into app-routing.module.

into app.module:

import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard'; 

@NgModule({
   declarations: [],
   imports: [
      AngularFireAuthGuardModule,
   ],
   providers: [],
   bootstrap: []
})

and into app-routing.module:

    import { AngularFireAuthGuard, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/auth-guard';

    const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
    const redirectLoggedInToHome = () => redirectLoggedInTo(['welcome']);

    const routes: Routes = [
      { path: 'login', loadChildren: './login/login.module#LoginPageModule', canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectLoggedInToHome } },
      { path: 'welcome', loadChildren: './welcome/welcome.module#WelcomePageModule', canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToLogin } }
];

You can look at the details from here: https://github.com/angular/angularfire/blob/master/docs/auth/router-guards.md

Prevent Access to Pages in Ionic with Angular Route Guards , A common example of this is preventing access to certain pages if the user is not logged in, and that is what we will be focusing on. In the past� 1 Prevent user to access certain page if not login ionic Dec 8 '19 1 get user data from NbAuthOAuth2Token angular Mar 13 1 FAB on flutter is behind other widget Feb 6


Your Code is logic, but we need to see your services code.

Start trying to display messages with the console, in your function ionViewWillEnter() to test if the code is realy executed, try to display your user also.

Ionic 4 Prevent Access to Pages, a simple login application to quickly demonstrate how we can implement Angular Guards in Ionic to prevent access to pages if the user is not� Ionic 4/5 is using Angular Routing, so it becomes very easy to add authentication in an Ionic application using Auth Guards. In this post, we will create a simple login application to quickly demonstrate how we can implement Angular Guards in Ionic to prevent access to pages if the user is not logged in.


You can follow this example. You can use canLoad instead of canActivate which will be faster if you use lazy loading.

Ionic 4 Skip Start-Page when user is logged in - ionic, 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 Here are some code snippets from my code:. Now let's add a user login feature! Stop the ionic serve process using Ctrl+C before proceeding to the next step. Add User Login. Schematics is a library from the Angular CLI project that allows you to manipulate projects with code. You can create/update files and add dependencies to any project that has a package.json file.


How do I prevent a new user from login until they verify their email , but what I can't figure out if how to prevent the app from login in the new user until have you done any tutorials on email verification using firebase for ionic? can go to the home page, if they don't then the user is sent to the login page. to implement specific code to deal with the action after the user has clicked the� Many times you may want to have a login at the beginning of your app. Handling a login with Ionic and Angular is very straight forward. For the purpose of creating this Ionic Login Example, I will use a simple starting template from the Ionic guys und just add a login before the template app shows. Complete example: How To Handle User Authentication With AngularJS Inside Your Ionic App Setup


Implementing Login flow with Ionic 4, ionic start meu-starter.login-flow.ionic-v4 blank --type=angular $ cd If trying to access home page, not-logged user is redirected to login page. able to prevent users from accessing areas they're not allowed to access using� if the user is not logged in and login is required it redirect to login. if the user try to get to login and he already logged in, prevent him from doing it. mark every path as "requireAuth" and it will work. place your code in app.js


Ionic Navigation and Angular Routing: The Ultimate Guide, Load feature areas of the app only when the user wants to access them. whether the user is logged in or not and return a value accordingly. to prevent unauthorized users from accessing a specific page/feature area. If� Prevent user to access certain page if not login ionic. 0. Displaying user daya after google login ionic. Hot Network Questions