CODEWITHSUNDEEP
phpreactjslaravelpusherlaravel-echo
Mihkel Allorg
Mihkel Allorg

Reputation: 989

Pusher/Laravel echo error on subscribing to private channel: Auth value for subscription to channel is invalid: should be of format 'key:signature'

I am having trouble subscribing to a private channel with PusherJS which is in React application.

Backend is Laravel but I am pretty sure the backend/frontend technologies do not contribute to this problem.

I am using JWT tokens for authentication and everything seems to be working on that part. The whole application is running fine but I am trying to add a socket to the system.

I will provide my backend and frontend code snippets here as I am pretty sure the fault lies in of them.

Frontend

const Socket = new Echo({
  broadcaster: 'pusher',
  key: config.pusher.key,
  cluster: config.pusher.cluster,
  authEndpoint: config.pusher.authEndpoint,
  forceTLS: config.pusher.tls,
  auth: {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  },
});

Socket.private('users.1').listen('newMessage', (data) => {
    console.log(data);
})

Backend auth endpoint

public function authorize(Request $request) {
    echo Pusher::socket_auth($request->get('channel_name'), $request->get('socket_id'));
    return;
}

The auth endpoint works, the data is returned as follows:

{auth: ":2535a2ea3a1ee8f461ceef3a95095518c0205949aa981e6f2xxxxx"}

In console I can see that frontend application has successfully connected pusher

Pusher : State changed : connecting -> connected with new socket ID xxxxxx.xxxxxx

But the subscribing has failed

Pusher : Event sent : {"event":"pusher:subscribe","data":{"auth":":2535a2ea3a1ee8f461ceef3a95095518c0205949aa981e6f2xxxxx","channel":"private-users.1"}}

Pusher : Event recd : {"event":"pusher:error","data":{"code":null,"message":"Auth value for subscription to private-users.1 is invalid: should be of format 'key:signature'"}}

Pusher : Error : {"type":"WebSocketError","error":{"type":"PusherError","data":{"code":null,"message":"Auth value for subscription to private-users.1 is invalid: should be of format 'key:signature'"}}}

I tried using only PusherJS package and had the same problem. Now I tried using Laravel Echo and the result is the same. Also what's important is that when I subscribe to a non private channel, the subscribing works and I can successfully receive the messages through the channel.

Pusher debug log only tells me the same thing:

Auth value for subscription to private-users.1 is invalid: should be of format 'key:signature'

I have been debugging this for a few hours and I have no idea where to go from here.

Upvotes: 3

Views: 1828

Answers (1)

kn100
kn100

Reputation: 304

Your auth endpoint does not appear to be responding correctly. Are your key, secret, and appID correctly configured server side? How about the Cluster? Is this correctly configured server and client side?

Upvotes: -1

Related Questions