Q:

Angular Firebase authentication always redirects to home page

In this Angular project which I am practicing through a tutorial,when I try to access pages that require authentication, I am redirected to login page and even the URL changes to http://localhost:4200/login?returnURL=%2Fcheck-out.
But after logging in ,it always redirects to home page irrespective of the links.
app.component.ts:
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Router } from '../../node_modules/@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private auth:AuthService, router:Router){
    auth.user$.subscribe(user=>{
      if(user){
        let returnUrl=localStorage.getItem('returnUrl');
        router.navigateByUrl(returnUrl);
      }
    });
  }
}

auth.service.ts:
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '../../node_modules/angularfire2/auth';
import { Observable } from '../../node_modules/rxjs';
import * as firebase from 'firebase';
import { ActivatedRoute } from '../../node_modules/@angular/router';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user$: Observable<firebase.User>;
  constructor(private afAuth:AngularFireAuth,private route:ActivatedRoute) {
    this.user$=afAuth.authState;
   }

  login(){
    let returnUrl=this.route.snapshot.queryParamMap.get('returnUrl') ||'/';
    localStorage.setItem('returnUrl',returnUrl);

    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());

}

  logout(){
    this.afAuth.auth.signOut();
  }
}

app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';
import {AngularFireAuthModule, AngularFireAuth} from 'angularfire2/auth';
import { Observable} from 'rxjs'; 
import {RouterModule, RouterOutlet, Routes} from '@angular/router';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { BsNavbarComponent } from './bs-navbar/bs-navbar.component';
import { HomeComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { CheckOutComponent } from './check-out/check-out.component';
import { OrderSucessfulComponent } from './order-sucessful/order-sucessful.component';
import { MyOrdersComponent } from './my-orders/my-orders.component';
import { AdminProductsComponent } from './admin/admin-products/admin-products.component';
import { AdminOrdersComponent } from './admin/admin-orders/admin-orders.component';
import { LoginComponent } from './login/login.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AuthService } from './auth.service';
import { AuthGuard } from './auth-guard.service';
export const appRoutes: Routes = [

  {path:'',component:HomeComponent},
  {path:'products',component:ProductsComponent},
  {path:'shopping-cart',component:ShoppingCartComponent},
  {path:'login',component:LoginComponent},

  {path:'check-out',component:CheckOutComponent,canActivate:[AuthGuard]},
  {path:'order-sucessful',component:OrderSucessfulComponent,canActivate:[AuthGuard]},
  {path:'my/orders',component:MyOrdersComponent,canActivate:[AuthGuard]},

  {path:'admin/products',component:AdminProductsComponent,canActivate:[AuthGuard]},
  {path:'admin/orders',component:AdminOrdersComponent,canActivate:[AuthGuard]}

  ]

@NgModule({
  declarations: [
    AppComponent,
    BsNavbarComponent,
    HomeComponent,
    ProductsComponent,
    ShoppingCartComponent,
    CheckOutComponent,
    OrderSucessfulComponent,
    MyOrdersComponent,
    AdminProductsComponent,
    AdminOrdersComponent,
   LoginComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFireDatabaseModule,
    NgbModule.forRoot()

  ],

  providers: [AngularFireAuth,AuthService,AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

A:

Seems to be in your localStorage.getItem('returnUrl'); always set to root of the application better to first check if there is a value and then remove that value and redirect the user like below:
let returnUrl = localStorage.getItem('returnUrl');

if (returnUrl) {
  localStorage.removeItem('returnUrl');
  router.navigateByUrl(returnUrl);
}

Hope this will helps you!

