How to block asynchronous event propagation from promises Typescript + RxJs

I need to create a mechanism that opens inside a Popup Window and notifies the parent page, and emits the event as a Promise.

parent.component.ts

.....
private async instance(): Promise<void> {
if (this.exist())
await this.getSSO();
}

private async getSSO(): Promise<void> {
const currentClientID = this.getClientID();
this.loading = true;
await this.ssoService.call().pipe(
finalize(() => {
this.loadingSSO = false;
})
).toPromise().then(result => {
if (result?.clientId === currentClientID) {
return result;
}
});
}
.....


sso.service.ts

ssoEvent = new Subject<any>();

public call(): Observable<any> {

const urlPage = this.getUrl();

const ssoPagina = window.open(urlPage);

window.addEventListener("message", this.handleMessage.bind(this), false);

return this.ssoEvent.pipe(
take(1),
);
}

protected handleMessage(event: MessageEvent): void {
if (event.origin !== window.location.origin) {
return;
}

if (event.data?.success) {
this.ssoEvent.next(event.data?.result);
}
}


I need to create a filter that if the clientID received via postmessage is not the same as the clientID of the parent component, the propagation of the event is blocked until the correct clientid is received, is this possible?

I tried using operators like 'filter', 'map' and other rxjs operators

await this.ssoService.call().pipe(
filter(result => result?.clientId === clientID),
finalize(() => {
this.loadingSSO = false;
})).toPromise()


Both observable filtering solutions, with 1 of the 2 concurrent executions issuing await of ok to all instance methods twice

Continue reading...