[SOLVED] How to use private channel in Laravel Pusher.js

How to use private channel in Laravel Pusher.js

I use Pusher.js in Laravel.

Here is a private channel:

    return new PrivateChannel('user.'.$this->user->id);

With permissions:

Broadcast::channel('user.{userId}', function ($user, $userId) {
    return true;
  });

The PrivateChannel has channel prefix name in constructor:

parent::__construct('private-'.$name);

Therefore I use private- prefix in JS client:

var channel = pusher.subscribe('private-user.1');
channel.bind('PrivateEvent', function(data) {
  console.log(data);
});

The problem is I got client error, because the private channel awaits auntification:

Pusher :  : ["Error: Unable to retrieve auth string from channel-authorization endpoint - received status: 404 from /pusher/auth. Clients must be authenticated to join private or presence channels.

Why should I use auntification twice if Laravel already checks this in route channel?

Solution

You need first to authorize your request by adding the authEndpoint and add the jwt_token like this after that you could listen to the channel

var pusher = new Pusher("PUBLIC_KEY", {
  cluster: 'eu',
  authEndpoint: `https://domain_name.com/broadcasting/auth`,
  auth: {
    headers: {
      "Authorization": "Bearer YOUR_JWT_TOKEN",
      "Access-Control-Allow-Origin": "*"
    }
  }
});

var channel = pusher.subscribe('private-user.1');
channel.bind('PrivateEvent', function(data) {
  console.log(data);
});