GetStream / website-react-examples

125 stars 219 forks source link

× Unhandled Rejection (Error): The "id" field on the user is missing #22

Closed ehsanham closed 3 years ago

ehsanham commented 3 years ago

Hi , I am trying to use your livestream chat example . I pulled the files and then run npm install and after that i do a npm start. but i got this error :

Unhandled Rejection (Error): The "id" field on the user is missing

What should i do ?

cosmini commented 3 years ago

Same issue. The documentation is terrible.

If you open App.js in customer-support you can see that some env vars can be configured or can be provided via query string.

Also, in the read me file there's a mention to use env vars, but no useful explanations.

Can someone explain what it takes to make a demo work?

wasita commented 3 years ago

did either of you figure out any solutions? i am also experiencing the same issue.

tried providing vars via query strings and via env vars (installed dotenv and created a .env file) but no luck! have ultimately resorted to hard-coding userId, userToken in src/components/GamingChat/GamingChat.js, but i'm unsure of what format it's expecting apiKey to be in so am getting this error at the moment:

Cursor_and_React_App

will comment again if i have any updates, but until then we're at the mercy of the developers

wasita commented 3 years ago

oop okay, update, am now able to get the demo working!

used an apiKey i found from https://github.com/GetStream/website-react-examples/commit/7795472fd733cae2c6390aa783b5e1345e418ab0#diff-7ddad7b4105c5e901499c68b69268ea63ef7193134abeb4236bd59dbda357740

so try setting the vars in src/components/GamingChat/GamingChat.js like so: const apiKey ='gx5a64bj4ptz' const userId = 'weathered-sun-4' const userToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoid2VhdGhlcmVkLXN1bi00IiwiZXhwIjoxNjIxMDMwMzU4fQ.rNU9RqIGWQJUbHX9HGrqhLR8fgtkG_0Xi-BNNDdOSOg' const targetOrigin = 'http://localhost:3000/'

ideally should be env vars in .env file but hard-coding for now until i figure that out

[edit] just realized apiKey should be given to you once you make a stream account, woops

cosmini commented 3 years ago

Thanks @wasita. I tried with the apiKey of course it didn't work since it needs a user id and token as well.

How did you create a user? Using the API ?

wasita commented 3 years ago

@cosmini honestly no, at least not directly haha. i don't remember how or where, but via inspect element i was able to find the randomly generated user and usertoken for my specific instance

i just wanted to get the demo working to see what it was all about, so i used the values from my prev comment, which might work for you too if you also just want to get a demo working

DanC5 commented 3 years ago

Did you all figure out what you need to get these apps running? All of your credentials need to be injected to replace the environment variables, so you can't just simple yarn; yarn start these apps to get them running.

Let me know if you have outstanding questions, thanks.

GuikiPT commented 3 years ago

Hello, im have the same error and, what the keys im use to make the app work, The index.js have some process.env, but, i dont know what keys im using because in Stream Chat Api just have the "key" and "secret", and in index have 4 variables to get tokens

DanC5 commented 3 years ago

@LucarioZilla you need three different environment variables to run the app: your Stream Chat API key, a user ID, and a user token. If you do not yet have a valid user ID and token registered to your app, you can create one with our online JWT generator.

https://getstream.io/chat/docs/react/token_generator/?language=javascript

Using your API secret, enter the user ID you would like to create and the generator will deliver you a valid token. Then if you enter the corresponding ID and token into your .env file you'll be able to run the app. Note of course that in a production setting your backend would create the token and send it to your front end.

See the Tokens & Authentication section in our docs for more information...

https://getstream.io/chat/docs/react/tokens_and_authentication/?language=javascript

I'm going to close this issue as it hopefully contains all the info you need to run an app, but do let me know if you still have issues, thanks.