Thanks for putting this together. I was able to complete steps 1-5. When I tried to complete Step 6 I get the following error message:
Error: userToken does not have a user_id or is not matching with user.id
StreamChat.setUser
node_modules/stream-chat/dist/browser.es.js:3186
new App localhost:3001/static/js/main.chun...
Error: userToken does not have a user_id or is not matching with user.id
All I changed:
mychat/settings.py on line 47 and 48 => 4tk***, zgbw6*********************************
chat-frontend/src/Chat.js on line 17 => this.client = new StreamChat("60XXX");
I ran into this same issue. Couldn't figure out if it was because the chat app was named auth but not listed as an installed app, or if it was because the UnauthedRoute.js has the function name as the one in AuthedRoute.js. If it has something to do with the encoded user id in the generated token not matching the cool-sky-9 id user listed in the demo. Did everything I could to troubleshoot it and couldn't figure it out. I just know that no API call is being made. Honestly at a loss here on getting this to work.
Edit: I figure it out! The issue is that the key on the backend is being generated with obj.user.id in the serializer. This needs to be changed to obj.user.username if you want to match the username on the front end. In this particular demo cool-sky-9 or whatever have you. This will let you authenticate. The only issue you should run into after this is that you need your API keys from the CHAT part of the website. To have the chat functionality there is a free trial otherwise it's $499 a month from what I saw. So if you're looking at this for a personal project or something fun make sure you don't get charged!
Thanks for putting this together. I was able to complete steps 1-5. When I tried to complete Step 6 I get the following error message:
Error: userToken does not have a user_id or is not matching with user.id
StreamChat.setUser
node_modules/stream-chat/dist/browser.es.js:3186
new App
localhost:3001/static/js/main.chun...
Any suggestions on what I might be doing wrong?
Happy to help. Any chance your API key is mixed up / not the same between your app and server-side code? This would throw that kind of error.
I have the same issue and I am using the following:
For the Frontend
this.client = new StreamChat("69XXX");
For the Backend at settings.py
STREAM_API_KEY = "g4eXXXXXXXXX"
STREAM_API_SECRET = "4wyXXXXXXXXX..."
I have the Chat.js and settings.py files updated with the same API key. Is there somewhere else the API key needs to be set that I missed?
The problem is that the Django User ID is an integer and the Chat is missing some code.
Following my examples:
github.com/rhenter/stream-chat-api
github.com/rhenter/stream-chat-react
PS: In the React Project I didn't create a Custom Readme, so you must to add you credentials on Chat.js if you wore to try to use
I have the same error, did you guys find a fix ?
Great tuto though.
Same error here.
Error: userToken does not have a user_id or is not matching with user.id
All I changed:
mychat/settings.py on line 47 and 48 => 4tk***, zgbw6*********************************
chat-frontend/src/Chat.js on line 17 => this.client = new StreamChat("60XXX");
I ran into this same issue. Couldn't figure out if it was because the chat app was named auth but not listed as an installed app, or if it was because the UnauthedRoute.js has the function name as the one in AuthedRoute.js. If it has something to do with the encoded user id in the generated token not matching the cool-sky-9 id user listed in the demo. Did everything I could to troubleshoot it and couldn't figure it out. I just know that no API call is being made. Honestly at a loss here on getting this to work.
Edit: I figure it out! The issue is that the key on the backend is being generated with obj.user.id in the serializer. This needs to be changed to obj.user.username if you want to match the username on the front end. In this particular demo cool-sky-9 or whatever have you. This will let you authenticate. The only issue you should run into after this is that you need your API keys from the CHAT part of the website. To have the chat functionality there is a free trial otherwise it's $499 a month from what I saw. So if you're looking at this for a personal project or something fun make sure you don't get charged!
I had the same issue and this was the solution. The 'id' value from client.setUser must match the argument for client.createToken
const streamToken = client.createToken('exactNameHere');
await client.setUser(
{
id: 'exactNameHere'
},