My AuthService has the following 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);
};
In my sign-in and sign-up components, I make use of these methods as shown below:
submit = (): void => {
if (this.loginForm.invalid) {
return;
}
this.authService
.signIn(this.loginForm.value)
.subscribe({
next: () => this.router.navigate(["/recipes"]),
error: error => this.error = error
});
};
However, the code within next is not executed. It works when I remove .pipe(), but I was hoping to avoid using it in multiple places.