React GetStream Error: Both secret and user tokens are not set

When a user navigates to my chat page, I am getting the following error message:

Error: Both secret and user tokens are not set.

When the user navigates to my chat page, I am passing the userId as a param. I would like to use the userId to call queryUsers() to get the user object from GetStream and then pass the user object as a param in my connectUser call.

However, when I include the queryUsers() call, I get the following error message. When the queryUsers() is not included and I provide the connectUser() call with a hardcoded user object (see testUserObject in code below), the error disappears. Full error message below:

Uncaught (in promise) Error: Both secret and user tokens are not set. Either client.connectUser wasn't called or client.disconnect was called
    at TokenManager.getToken (token_manager.ts:140:1)
    at StreamChat._getToken (client.ts:2621:1)
    at StreamChat._enrichAxiosOptions (client.ts:2579:1)
    at _callee5$ (client.ts:936:1)
    at tryCatch (regeneratorRuntime.js:44:1)
    at Generator.<anonymous> (regeneratorRuntime.js:125:1)
    at Generator.next (regeneratorRuntime.js:69:1)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:22:1)

The below is the code for my chat page:

useEffect(() => {
async function init() {
  const chatClient = StreamChat.getInstance(apiKey);

  const response = await chatClient.queryUsers({
    id: { $in: [testUserId] },
  });
  const userObject = response.users[0];

  await chatClient.connectUser(
    userObject,
    chatClient.devToken(userObject.id)
  );

  const channel = chatClient.channel("messaging", "react-talk", {
    image: "https://getstream.io/random_svg/?id=john&name=John",
    name: "React Talk",
    members: [userObject.id],
  });
  await channel.watch();

  setChannel(channel);
  setClient(chatClient);
}

init();

return () => {
  if (client) {
    client.disconnectUser();
  }
};

}, []);

My GetStream project is in development mode, GetStream authentication is turned off, and I am using the prebuilt chat ui components from the GetStream React SDK.

Solution

The issue with the code is that you need to authenticate the user before calling other methods such as queryUsers.

What this means is that your code flow should look something like this:

const chatClient = StreamChat.getInstance(apiKey);

await chatClient.connectUser(
  'userid',
  'user-token'
);

/* Rest of your code */

That also means that you can't find the id of the user by querying all users from the client in order to authenticate someone.