request running multiple times

Question

I have this function, it calls Google social login

 loginnn($event){
this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID);
this.socialAuthService.authState.subscribe((user) => {
this.frmLoginGoogle.patchValue({
email: user.email,
googleAuthToken: user.authToken,
});
console.log('loop after clicking again')
});
this.loginGoogle($event);
console.log('execute the function first than the one above')

}

the problem is that it runs this.loginGoogle before the this.socialAuthService

I already tried to put this.loginGoogle inside subscribe, but it ends up running several times after a few clicks

Answer 1

I think this is the right way to do it.

 this.socialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID).pipe(
   switchMap(() => this.socialAuthService.authState), // switching from one to another observable after emit the value
   tap((user) => {
     this.frmLoginGoogle.patchValue({
        email: user.email,
        googleAuthToken: user.authToken,
     });
     this.loginGoogle($event);
   }),
   take(1) // limit the observable to complete after one time
 ).subscribe();