0

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.

syahiruddin
  • 401
  • 5
  • 14

0 Answers0