I am currently developing an authentication system that operates in two parts.
Firstly, I need to make a call with the username and password. If the credentials are valid, a code is returned.
This code must then be checked for validity, and if it passes the check, the user is authenticated.
The following function is used to obtain the code:
requestAuthCode(request: models.AuthenticationRequest): Observable<any> {
return this.httpClient
.get<any>(environment.auth.authorize, {
headers: headers,
params: params
})
.pipe(
tap(val => this.authenticate(val.code)),
catchError(error => this.handleError(error))
);
}
This function verifies the code's authenticity and authenticates the user:
authenticate(code: string): Observable<any> {
return this.httpClient
.post<models.AuthenticationTokenResponse>(
environment.auth.token,
null,
{
headers: headers,
params: params
}
)
.pipe(
tap(data => this.setSession(data)),
catchError(error => this.handleError(error))
);
}
Objective
If requestAuthCode receives a code in its response, I want it to trigger the authenticate function. Otherwise, it should return an error.
However, when I use
this.authService.requestAuthCode(request)
.subscribe(
data => {
console.log(data);
}
I only retrieve the response data from my requestAuthCode function and not from the subsequent authenticate function call. Additionally, it appears that the authenticate function is not being executed.
Is there a way to ensure that requestAuthCode triggers the authenticate function and sends back the data to my component?