title: Auth Guard not working correctly even when Logged in, redirecting always to login page
body: <p>When I try to access url or redirect the page when <strong>NOT</strong> logged in, it worked fine, then when I <strong>LOGGED IN</strong> I can't still access that page, and redirecting me to the login page. Advice please thank you!</p>
  
  <p><strong>Auth.service.ts</strong></p>
  
  <pre><code>//Import complete...
  ...
  ... 
  import { Router } from "@angular/router";
  import { Observable, BehaviorSubject } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService {
  
    user: Observable&lt;firebase.User&gt;;
  
    user$: Observable&lt;User&gt;;
  
    constructor(
      public afAuth: AngularFireAuth,
      public router: Router
    ) {    this.user$ = this.afAuth.authState;
    }
  
  
  
    login(email: string, password: string){
      this.afAuth.auth.signInWithEmailAndPassword(email, password).then(
        value =&gt; {
          sessionStorage.setItem("loggedIn", email);
          console.log('Success!', value);
          this.router.navigate(['dashboard']);
        }
      ).catch(err=&gt;{
        console.log('Something went wrong:',err.message);
        this.router.navigate(['sign-up']);
      })
    }
  </code></pre>
  
  <p><strong>Auth.guard.ts</strong> <strong>(EDITED)</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
  import { Observable } from 'rxjs';
  import { AuthService } from './auth.service';
  
  @Injectable()
  export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router)
    {}
    canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean | UrlTree {
      if(this.authService.isLoggedIn){
        return true;
      }
      else{
        return this.router.parseUrl("/sign-in");
      }
  
    }
  
  }
  </code></pre>
  
  <p>In the App.module.ts - I added the provider </p>
  
  <pre><code>  providers: [BookService, AuthService, AuthGuard],
  </code></pre>
  
  <p>Lastly, the <strong>app-routing.module.ts</strong></p>
  
  <pre><code>//Imports 
  ..
  ..
  ..
  const routes: Routes = [
    { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
    { path: 'books', component: BooksComponent, canActivate: [AuthGuard] },
    { path: 'add-book', component: AddBookComponent, canActivate: [AuthGuard] },
    { path: 'sign-in', component: SignInComponent },
    { path: 'sign-up', component: SignUpComponent },
    { path: 'dashboard', component: DashboardComponent }
  ]
  
  @NgModule({
    declarations: [],
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>