I have an AuthService with these methods:
signUp = (data: SignUp): Observable<AuthResponseData> => {
const endpoint = `${env.authBaseUrl}:signUp?key=${env.firebaseKey}`;
return this._signInOrSignUp(endpoint, data);
};
signIn = (data: SignIn): Observable<AuthResponseData> => {
const endpoint = `${env.authBaseUrl}:signInWithPassword?key=${env.firebaseKey}`;
return this._signInOrSignUp(endpoint, data);
};
private _signInOrSignUp = (endpoint: string, data: SignIn | SignUp): Observable<AuthResponseData> => {
return this.http.post<AuthResponseData>(endpoint, {
...data,
returnSecureToken: true
}).pipe(
catchError(error => this._throwError(error)),
tap(response => this._createAndEmitUserSubject(response)),
);
}
private _throwError = error => {
const errorMessage = error.error.error.message;
return throwError(errorMessage);
};
private _createAndEmitUserSubject = (response: AuthResponseData) => {
const expirationDate = new Date(new Date().getTime() + +response.expiresIn * 1000);
const user = new User(
response.idToken,
response.email,
response.idToken,
expirationDate
);
localStorage.setItem("user", JSON.stringify(user));
this.user$.next(user);
};
And in the sign-in and sign-up components, I call the those in following way:
submit = (): void => {
if (this.loginForm.invalid) {
return;
}
this.authService
.signIn(this.loginForm.value)
.subscribe({
next: () => this.router.navigate(["/recipes"]),
error: error => this.error = error
});
};
But the code within next is not executed. If I remove .pipe() it is. I was hoping I did not need to use .pipe() in two places.
Looks like this._throwError doesn't throw an error. If it was, next couldn't be called later. You are probably not throw'ing error in it and instead returning some value that goes into next
Removing this.user$.next(user) solves it, and I did't realize I did not need this at all, but I'd like to know why it blocked the flow.
private _createAndEmitUserSubject = (response: AuthResponseData) => {
// ...
localStorage.setItem("user", JSON.stringify(user));
};