onSuccess is not called after sign up succeeds in the ngx-auth-firebaseui

[zhangquan0126]

Bug Report or Feature Request (mark with an x)

- [X ] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

Windows 10

Versions

Angular 11

Repro steps

Reproduce from chrome browser with logs. From the logs it shows that the this.onSuccessEmitter.emit(userCredential.user); is called, but the registered function is not called after sign up succeeds.

The log given by the failure

No error log

Desired functionality

onsuccess should be called, and it is called when signIn succeeds,

[robertzxz]

This bug is still up after a year and its pretty frustrating, Im forced to use the login and reg components separately, cuz they do trigger the event on those.

[AnthonyNahas]

@robertzxz A PR would be appreciated

thank you

[zhangquan0126]

After quite some time spent on the investigation, I finally found the reason is that I put the ngx-auth-firebaseui under the login ng template which is defined as below:

<div *ngIf="auth.user$ | async as user; else login">
</div>
<ng-template #login>
</ng-template> 

And the auth.user is defined as

    this.user$ = this.auth.authState.pipe(
        switchMap(user => {
            if (user) {
                return this.store.doc<User>(`users/${user.uid}`).valueChanges();
            } else {
                return of(null);
            }
        })
    );

I am not sure what exactly could be the impact on ngx-auth-firebaseui. @AnthonyNahas 

[zhangquan0126]

I meant the onSuccess is called from the signup after I remove the ngIf.

[DavidTheProgrammer]

@zhangquan0126 Okay I think I see where the problem might be. Angular's *ngIf is a structural directive that removes the element from the DOM when the predicate is false. Most likely what's happening is that when firebase successfully authenticates the user is defined and the Login Component is removed from the DOM including the registered callbacks. As an alternative you can try using [ngClass] + dispay: none to hide the component from the DOM while maintaining the callbacks. here's a helpful link with conditional classes https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass