Error: userToken does not have a user_id or is not matching with user.id

Question

I'm getting this error Error: userToken does not have a user_id or is not matching with user.id

Here's my code:

onMounted(async () =\> {
 try {
  const data = await $fetch(`${config.public.apiBase}/v1/chat/token`, 
 {
  headers: {"authorization": "Bearer " + user.value.token},
 });

    if (data) {
      userToken.value = data.token;
    }

 } catch (error) {
  console.error(error);
 }

 await setupChat();
});

const setupChat = async () => {
 if (!userToken.value) {
  console.error("User token is not available.");
  return;
 }

 try {
  if(!chatClient.user){
   console.log(userToken.value, 'userToken')
    await chatClient.connectUser(
  {
    id: user.value.id,
    name: user.value.name,
  },
   userToken.value,
  );
 }

    console.log(chatClient.user, 'chatClient.user')
    
    showOnline.value = true; // Display user online upon connection

 } catch (error) {
  console.error(error)
 }

};

Has anyone faced this issue before? I'm using vue3 and vue composition api

The token api returns the token that was generated by getStream. Not sure why it's not working