Pusher Auth value for subscription to private-channel has invalid format 'key:signature'

Question

We are using Pusher to broadcast Laravel notification events.

I have a problem with authorizing users on a private channel. The auth 'key:signature' is returned but in a different format.

The object returned looks like the image I uploaded

auth: ":xoxoxoxoxox"

When according to pusher documentation it should look like this

{"auth":"49e26cb8e9dde3dfc009:a8cf1d3deefbb1bdc6a9d1547640d49d94b4b512320e2597c257a740edd1788f",}

My pusher js

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://js.pusher.com/4.1/pusher.min.js"></script>
    <script>
Pusher.logToConsole = true;

const socket = new Pusher('17d5cedc0062ecd557ff', {
    encrypted: true,
    disableStats: true,
    authEndpoint: '/broadcasting/auth',
    auth: {
        headers: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
        }
    },
    enabledTransports: ['ws', 'xhr_streaming','xhr_polling','sockjs'],
});

var channel = socket.subscribe('private-App.User.' + {{Auth::user()->id}});

var socketId = null;
socket.connection.bind('connected', function() {
    socketId = socket.connection.socket_id;
});

channel.bind('Illuminate\\Notifications\\Events\\BroadcastNotificationCreated', function (data) {
    console.log(data);
});

broadcasting.php

return [

/*
|--------------------------------------------------------------------------
| Default Broadcaster
|--------------------------------------------------------------------------
|
| This option controls the default broadcaster that will be used by the
| framework when an event needs to be broadcast. You may set this to
| any of the connections defined in the "connections" array below.
|
| Supported: "pusher", "redis", "log", "null"
|
*/

'default' => env('BROADCAST_DRIVER', 'pusher'),

/*
|--------------------------------------------------------------------------
| Broadcast Connections
|--------------------------------------------------------------------------
|
| Here you may define all of the broadcast connections that will be used
| to broadcast events to other systems or over websockets. Samples of
| each available type of connection are provided inside this array.
|
*/

'connections' => [

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('17d5cedc0062ecd557ff'),
        'secret' => env('fef9521f13ca7bb4675a'),
        'app_id' => env('321223'),
        'options' => [
            'cluster' => 'mp1',
            'encrypted' => true
        ],
    ],

.env

    BROADCAST_DRIVER=pusher
    PUSHER_APP_ID=321223
    PUSHER_APP_KEY=17d5cedc0062ecd557ff
    PUSHER_APP_SECRET=fef9521f13ca7bb4675a

And app.js or Echo looks like this

    import Echo from "laravel-echo"

    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: '17d5cedc0062ecd557ff'
     });

   Echo.private('App.User.${userId}')
        .notification((notification) => {
        console.log(notification.type);
    });

Laravel 5.3, Laravel-Echo, PusherJS and pusher-http-php library

Answer 1

The default route broadcasting/auth can't retrieve a suitable response so you can add the custom authEndPoint like this

in web.php

Route::get('pusher/auth', 'PusherController@pusherAuth');

and make PusherController :

class PusherController extends Controller
{
    /**
     * Authenticates logged-in user in the Pusher JS app
     * For presence channels
     */
    public function pusherAuth()
    {

        $user = auth()->user();

        if ($user) {
            $pusher = new Pusher('auth-key', 'secret', 'app_id');
            $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
            $callback = str_replace('\\', '', $_GET['callback']);
            header('Content-Type: application/javascript');
            echo($callback . '(' . $auth . ');');
            return;
        }else {
            header('', true, 403);
            echo "Forbidden";
            return;
        }
    }
}

The response should be given in the correct format and we have to customize the answer to this form

        $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
        $callback = str_replace('\\', '', $_GET['callback']);
        header('Content-Type: application/javascript');
        echo($callback . '(' . $auth . ');');

Answer 2

I see some problem there,

try to change this file: broadcasting.php to:

| Default Broadcaster
|--------------------------------------------------------------------------
|
| This option controls the default broadcaster that will be used by the
| framework when an event needs to be broadcast. You may set this to
| any of the connections defined in the "connections" array below.
|
| Supported: "pusher", "redis", "log", "null"
|
*/

'default' => env('BROADCAST_DRIVER', 'pusher'),

/*
|--------------------------------------------------------------------------
| Broadcast Connections
|--------------------------------------------------------------------------
|
| Here you may define all of the broadcast connections that will be used
| to broadcast events to other systems or over websockets. Samples of
| each available type of connection are provided inside this array.
|
*/

'connections' => [

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => 'mp1',
            'encrypted' => true
        ],
    ],

it Looks like you are trying to get the env variables in bad way,