How to use the function "getStreamUserToken" from Firebase Authenticate with Stream Chat...

I am trying to use the getStreamUserToken function from Firebase Authenticate with Stream Chat extension in an Angular client-side application. However, my implementation is not working as expected. Here's the code I have tried:

The function:

// Get Stream user token.
export const getStreamUserToken = functions.https.onCall((data, context) => {
// Checking that the user is authenticated.
if (!context.auth) {
// Throwing an HttpsError so that the client gets the error details.
throw new functions.https.HttpsError(
"failed-precondition",
"The function must be called while authenticated.",
);
} else {
try {
return serverClient.createToken(
context.auth.uid,
undefined,
Math.floor(new Date().getTime() / 1000),
);
} catch (err) {
console.error(`Unable to get user token with ID ${context.auth.uid} on Stream. Error ${err}`);
// Throwing an HttpsError so that the client gets the error details.
throw new functions.https.HttpsError("aborted", "Could not get Stream user");
}
}
});


My client-side code attempt:

getStreamToken() {
const result = httpsCallable(
this.functions,
'getStreamUserToken'
);
result({}).then((response) => {
console.log(response.data);
});


The getStreamUserToken function is a Firebase Callable Cloud Function that requires the user to be authenticated. It uses the serverClient.createToken method to generate a Stream user token based on the authenticated user's UID.

I expect the getStreamUserToken function to return a Stream user token, but it throws an error instead.

Access to fetch at 'https://...' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
zone.js:1498

POST https://... net::ERR_FAILED


Can someone please guide me on how to properly use the getStreamUserToken function in an Angular client-side application? Any help would be greatly appreciated.

Continue reading...