not routing after successful login

[suriyaJaay]

Hi,

I'm not able to route to dashboard even though my login is successful. once click on sign-in button. app is loading for a seconds and remains in login page. but it's supposed to go to dashboard.

could you pls tell me, how to resolve this.?

and one more thing i want to know, what is the purpose of firebase/app in service? i dont find ' auth' in node_modules under firebase folder.

thank you

[billbarni]

Same issue here. Nothing happens on a successful login. I've tried removing 'this.ngZone.run' without any results. Updated all packages to Angular 8 and also updated Firebase packages, still no change.

[Vixxd]

This is also happening to me, only with username + password login, not via a social provider. When using something like Google it redirects as expected.

[ofirSparka19]

There's a conflict with the VerifiedEmail field. The "isSignedIn" condition is based on also on the Email Verification value. If you'd check your firestore, you'd see that it's set to False from some reason.

So, You aren't being redirected to the Dashboard since you're basically not logged in.

[MihajloNesic]

You can do it this way.

// Sign in with email/password
SignIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
    .then((result) => this.SetUserData(result.user))
    .then(() => this.router.navigate(['/dashboard']))
    .catch((error) => window.alert(error.message));
}

[blouflashdb]

You can do it this way.

// Sign in with email/password
SignIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
    .then((result) => this.SetUserData(result.user))
    .then(() => this.router.navigate(['/dashboard']))
    .catch((error) => window.alert(error.message));
}

Still doesn't work for me :( Node Version: v12.14.1 Angular CLI Version: 9.0.2 Fire: 5.4.2

[MihajloNesic]

Still doesn't work for me :( Node Version: v12.14.1 Angular CLI Version: 9.0.2 Fire: 5.4.2

Did you notice the slash before dashboard?

I am using lower versions tho. Node: 10.16.3 Angular CLI: 8.3.25 Fire: 5.1.0

Edit: Tested with Fire 5.4.2, it works perfectly

[blouflashdb]

Still doesn't work for me :( Node Version: v12.14.1 Angular CLI Version: 9.0.2 Fire: 5.4.2

Did you notice the slash before dashboard?

I am using lower versions tho. Node: 10.16.3 Angular CLI: 8.3.25 Fire: 5.1.0

Edit: Tested with Fire 5.4.2, it works perfectly

Yes, I replaced my SignIn methode with yours. I guess its a bug in the Angular CLI. ngOnInit in the Dashboard is not being called for some reason.

[danmincu]

the reason is not routing is because of the fact that the email is not verified. should you log out and back in the user info is being refreshed. I fixed this problem in my forked branch and also added phone SMS login, custom claims, better flow etc check it out https://github.com/danmincu/angularfirebase-authentication

[JDmko]

Hello, I solved it with setInterval () in signIn(email, password)

SignIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.ngZone.run(() => {
          let i = 0;
        const loginTime = setInterval (() => {
              if( i = 2 ){
                this.router.navigate(['/dashboard']);
                clearInterval(loginTime)
              } //console.log(i)
        i++
},1000) 
        });
        this.SetUserData(result.user);
      }).catch((error) => {
        window.alert(error.message)
      })
  }

and secureInnerPage.guard.ts

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      if(this.authService.isLoggedIn){
        //window.alert("your text")
        this.router.navigate(['/dashboard'])
      }
    return true;
  }

[ghost]

Hello, I solved it with setInterval () in signIn(email, password)

SignIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.ngZone.run(() => {
          let i = 0;
        const loginTime = setInterval (() => {
              if( i = 2 ){
                this.router.navigate(['/dashboard']);
                clearInterval(loginTime)
              } //console.log(i)
        i++
},1000) 
        });
        this.SetUserData(result.user);
      }).catch((error) => {
        window.alert(error.message)
      })
  }

In my case, Login was not happening on First click on login button, while the user token were being set successfully in localstorage. I used your method of setinterval and now it is working fine on first click. What is the reason for such behavior?

[foch01]

I have the same problem. I think that the SetInterval solution is not a viable solution over time.

[MihajloNesic]

This is how I did it

signIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
    .then((result) => this.setUserData(result.user))
    .then(() => this.router.navigate(['/dashboard']));
}

My account has a verified email

[foch01]

Doesn't work for me :/

[danmincu]

@foch01 it's easy to debug why isn't it working for you; Routing after logging to dashboard is guarded by the Authguard that depends on isLoggedIn(); I bet that ! user.emailIsVerified==false is the culprit. I forked this repo here and solved that problem by "waiting" for the end-user to verify the email and re-read the settings before navigating to dashboard. You can also relax the isEmailVerified rule.

[foch01]

Even removing the user.emailVerified condition! == false it does not work.

My email address is verified and equal to true

[RodriFerretty]

You signIn and try to navigate to a guard protected route, thus the canActivate is used, but the canActivate uses localStorage user to determine if you can perform navigation and the localStorage user is set in the authState.subscribe, which is called AFTER canActivate. A simple solution to prove this is just set local storage with user data inside signIn method before this.router.navigate. Then you'll see that canActivate is able to get the user from localStorage and can navigate. Idk if this is the best solution, I'm just learning Angular.

[IvanMtze]

What I did, was to change my canActivate function, so now it look like this: next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { if(this.authService.isLoggedIn !== true) { this.router.navigate(['sign-in']) } return true; }

then, i changed my isLogged function, so now it looks like this get isLoggedIn(): boolean { const user = JSON.parse(localStorage.getItem('user')); return (user === null) ? false : true; }

Remenber that you have to check that your function is saving locally the user in json format. Actually, i just removed the verificateEmail function, it didn't work for me.

[stayacid]

Solution:

  SignIn(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.SetUserData(result.user);
        this.afAuth.authState.subscribe((user) => {
          if (user) {
            this.router.navigate(['dashboard']);
          }
        })
      })
      .catch((error) => {
        window.alert(error.message)
      })
  }

[omararturo]

Solution:

// Auth logic to run auth providers
  async authLogin(provider: auth.AuthProvider) {
    try {
      await this.afAuth.signInWithPopup(provider).then(value => {
        this.setUserData(value.user).then(() => {
          this.ngZone.run(() => {
            this.router.navigate(['dashboard']);
          });
        });
      });
    }
    catch (error) {
      window.alert(error);
    }
  }

[lepatlamass]

Solution:

  SignIn(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.SetUserData(result.user);
        this.afAuth.authState.subscribe((user) => {
          if (user) {
            this.router.navigate(['dashboard']);
          }
        })
      })
      .catch((error) => {
        window.alert(error.message)
      })
  }

This your solution is the best just tried and it works perfectly

[cflorioluis]

Solution:

  SignIn(email: string, password: string) {
    return this.afAuth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.SetUserData(result.user);
        this.afAuth.authState.subscribe((user) => {
          if (user) {
            this.router.navigate(['dashboard']);
          }
        })
      })
      .catch((error) => {
        window.alert(error.message)
      })
  }

perfect, thanks