Pusher not decrypting incoming notifications

I am working on a Laravel application which has a React front end. I have notifications setup using pusher which all works fine.

I am trying to use end to end encryption as described here https://pusher.com/docs/channels/using_channels/encrypted-channels

In my config/broadcasting.php I have the following

'pusher' => [
    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => true,
            'encryption_master_key' => env('PUSHER_ENCRYPTION_KEY'),
        ],
] 

In my .env PUSHER_ENCRYPTION_KEY is set and I can see notifications coming through in the Pusher debug console, encrypted as I would expect.

In my front end I am instantiating Pusher like this

const socket = new Pusher(process.env.MIX_PUSHER_APP_KEY, {
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    authEndpoint: '/api/broadcasting/auth'
});
socket.subscribe('private-encrypted-user.' + props.user.id);

socket.bind('App\\Events\\TaskCreated' , function (data) {            
    console.log(data)
});

I can see in my network tab /api/broadcasting/auth responds with an extra field now called shared_secret. According to the docs this is used to decrypt the incoming notification and decryption should be automatic. When I trigger App\\Events\\TaskCreated console.log(data) runs but the data is still encrypted.

It also says in the docs if a client is unable to decrypt a message, it will make another request to your auth endpoint to obtain a new decryption key. If the client is still unable to decrypt the message with the new key, it will throw an error. yet no errors are thrown and no further requests are made to /api/broadcasting/auth

I have enabled Pusher.logToConsole = true; and everything looks fine. I even get "pusher_internal:subscription_succeeded","channel":"private-encrypted-user.2" which leads me to believe the auth side of things is working as expected.

Can anyone see what I am missing?

I worked it out!

In my code above I am binding the event to the socket when I need to bind it to the channel. A day wasted but below is working code in case anyone else struggles with the same issue

const socket = new Pusher(process.env.MIX_PUSHER_APP_KEY, {
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    authEndpoint: '/api/broadcasting/auth'
});

const channel = socket.subscribe('private-encrypted-user.' + props.user.id);

channel.bind('App\\Events\\TaskCreated' , function (data) {            
    console.log(data)
});