I'm having problems with Laravel Websockets. I build a chat app using Laravel Websockets, Vue.JS and Laravel-Echo. The web app works correctly, so I started working in a Mobile version with React Native, but I can't connect to private/presence channels.
I can connect to public channels withour problems. I have the following code:
useEffect(() => {
const echo = new Echo({
broadcaster: 'pusher',
key: 'pusher-app-key',
cluster: 'mt1',
wsHost: 'my-domain.com',
wsPort: 6001,
wssPort: 6001,
encrypted: true,
forceTLS: false,
enabledTransports: ['ws', 'wss'],
authEndpoint: 'https://my-domain.com/broadcasting/auth',
auth: {
headers: {
Authorization: authToken,
},
},
});
const channel = echo.private(channelUri);
channel.subscribed(() => {
console.log("connected");
}).listen(eventName, (event) => {
console.log(event);
}).error((error) => {
console.log(error);
});
}, []);
If I change my channel URI to a public one, it connects and I can listen to events without problems. But, using the same configuration for a private channel, I can not connect. I got the following error:
{"error": "Unable to retrieve auth string from channel-authorization endpoint - received status: 403 from https://my-domain.com/broadcasting/auth. Clients must be authorized to join private or presence channels. See: https://pusher.com/docs/channels/server_api/authorizing-users/", "status": 403, "type": "AuthError"}
I am sending my Bearer token in Authorization like this: "Bearer ${token}" and it works for HTTP requests, it is not expired.
Other stuff tried: -CORS configuration -SSL is configured, web app is working.
Any suggestions that I could try? Thanks a lot.
More info: -PHP 8.1 -Laravel 10 -laravel-websockets 1.14 -Inertia