Cognito hoisted Ui on integration with angular appliocation throwing error 400

I'm trying to integrate cognito hoisted UI with my angular application which has different login screen, so i'm trying to leverage all the login (including normal login and social login) functionalities but not the user interface.But it is throwing 2 Errors. 1.POST https://my****.auth.us-west-2.amazoncognito.com/oauth2/token 400 (Bad Request)

2.[ERROR] 16:57.445 OAuth - Error handling auth response. Error: invalid_client This is my code in login component

signInWithCognito(){
    if(this.user && this.user.email && this.user.password){
      this.cognitoService.signIn(this.user)
      .then(()=>{
        this.router.navigateByUrl('overview')
      })
      .catch((error:any)=>{
        this.displayAlert(error.message);
        this.inpuValue = "";
          this.showEmailField = true;
        this.showError = true;
        this.showPasswordField = false;
      })
    }
    else{
      console.log("Incorrect Id or Password")
    }
}

  signInGoogle(){
   Auth.federatedSignIn({
    customProvider: 'Google'
  })
  }

enter image description here