Angular-ionic 4: Authentication function failed sometimes and work some other time

I have an app built with angular-ionic 4 that authenticate users. I have an issue; when user logs in they don't get redirected to the homepage, they remain stocked on the login page even though their login credential is valid, when the app is exited and open again, the user would be logged already. i don't really know what am doing wrong, below is my code: Angular: 8.1.2 Ionic: 4.7.4

authentication.service.ts

  login(email: String, password: String) {
    return this.http.post<any>(`${this.env.API_URL}auth/login`, { email, password })
        .pipe(map(token => {
            // store user details and jwt token in local storage to keep user logged
           // localStorage.setItem('currentUser', JSON.stringify(user));
           this.storage.set('token', token)
                   .then(
                     () => {
                       console.log('Token Stored');
                     },
                     error => console.error('Error storing item', error)
                   );           
            this.currentUserSubject.next(token['user_object']);
            return token;
        }));
}

login.page.ts

  async login() {
    const thisref = this;
      //Animated Loader can go here or start here
   await this.loadingCtrl.create({
      message: 'Authenticating...',
      // duration: 2000
    }).then((overlay) => {
      this.loadingOverLay = overlay;
      this.loadingOverLay.present();
    });


    this.authService.login(this.onLoginForm.value.email, this.onLoginForm.value.password)
        .pipe(first())
        .subscribe(
            data => {
               //Animated Loader closes here    
             thisref.loadingOverLay.dismiss();           
             thisref.alertService.presentToastSuccess("Logged In");  
             thisref.navCtrl.navigateRoot('home');
             return;
            },
            error => {            
              thisref.loadingOverLay.dismiss(); 
              console.log(error);
                thisref.alertService.presentToastError("Unauthorized");
               // thisref.navCtrl.navigateRoot('home');            

             // console.log(error.error.message);//error.error.message returns "message" undefined when user input is valid
            });

}

Laravel Backend Code:

    public function login(Request $request) {

        $request->validate([
            'email' => 'required|string|email',
            'password' => 'required|string',
            //'remember_me' => 'boolean'
        ]);


        $credentials = request(['email', 'password']);
        if(!Auth::attempt($credentials))
            return response()->json([
                'message' => 'Unauthorized'
            ], 401);

        $user = $request->user(); 
        $tokenResult = $user->createToken('Personal Access Token');
        $token = $tokenResult->token;
        if ($request->remember_me)
            $token->expires_at = Carbon::now()->addWeeks(1);
        $token->save();

        return response()->json([
            'access_token' => $tokenResult->accessToken,
            'token_type' => 'Bearer',
            'expires_at' => Carbon::parse(
                $tokenResult->token->expires_at
            )->toDateTimeString(),
            'user_object' => $user,
            'message' => 'Authorized',
        ]);
    }

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/31p2NGJ
via IFTTT