Angular SSOLogin method: TypeError 'undefined' where a stream was expected in HttpClient GET...

I’m working on an Angular authentication service that includes an SSOLogin method for single sign-on functionality. Some query parameters are checked and if there are available, SSOLogin method will be called. When calling the SSOLogin method, I encounter the following error:

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.
RxJS 57
ssoLogin login.page.ts:104
ngOnInit login.page.ts:136
Angular 18
RxJS 49


The error occurs when making an HTTP GET request with custom headers, and I’ve confirmed that the parameters passed to the method (username, access_token, id_token, consented_on) are not undefined. However, something in the process seems to be causing this error, possibly related to the headers or how the HTTP request is structured.

Here’s the relevant code snippet:

// login.page.ts

/** First lifecycle hook */
ngOnInit() {
const username: string = this.activatedRoute.snapshot.queryParamMap.get('username');
const access_token: string = this.activatedRoute.snapshot.queryParamMap.get('access_token');
const id_token: string = this.activatedRoute.snapshot.queryParamMap.get('id_token');
if (username && access_token && id_token) {
this.ssoLogin(username, access_token, id_token, Math.floor(Date.now() / 1000).toString());
}
}

/** Method for logging in user retrieving query parameters (SSO Login) */
ssoLogin(username: string, access_token: string, id_token: string, consented_on: string) {
this.authenticationSvc.SSOLogin(username, access_token, id_token, consented_on).subscribe({
next: (res: Response) => {
if (res.success && res.rows && res.rows.includes('extra')) {
if (res.rows['extra'] === 'USER_EXISTS') {
this.clearLocalStorage();
this.requestLoginToken(this.authenticationSvc.consentedOn);
} else if (res.rows['extra'] === 'USER_NOT_FOUND') {
this.navUserNotFound();
} else if (res.rows['extra'] === 'REG_WAIT_APPROVAL') {
this.toastService.showError('Component.Toast.account-pending-approval', 'warning');
} else {
this.toastService.showError('Component.Toast.something-went-wrong');
}
} else {
this.toastService.showError('Component.Toast.something-went-wrong');
}
},
error: (error: Error) => {
console.log(error);
this.toastService.showError('Component.Toast.something-went-wrong');
}
});
}

// authentication.service.ts

/**
* SSO Login
* @param username
* @param access_token
* @param id_token
* @param consented_on
* @returns Service response
*/
SSOLogin(username: string, access_token: any, id_token: string, consented_on: string) {

let headers = {
username: username,
authorization: `Bearer ${access_token}`,
jwt_token: id_token,
consented_on: consented_on,
client_id: environment.client_id,
client_secret: environment.client_secret,
clientKey: environment.clientKey
};

return this.http.get<any>(environment.baseUrl + 'user/getExistence', { headers })
.pipe(
map(
(res: Response) => {
if (res && res.success && res.extra === 'USER_EXISTS') {
this.username = username;
this.jwt = id_token;
this.token = access_token;
this.consentedOn = consented_on;
}
return res;
}
), catchError(this.handleError));

}


I’d very much appreciate any guidance on debugging or resolving this issue. What could be causing this error?

I've tried so many things and nothing worked, they all gave me the same error. I verified that all input parameters (username, access_token, id_token, consented_on) passed to the SSOLogin method are defined and not undefined or null. I also checked the structure of the headers object to ensure it was formatted correctly. I've tried to return an : Observable but did not work.

I expected the HTTP GET request to execute successfully, with the server responding. However, instead of the expected response, I encountered the error above.

Continue reading...