Pusher: Error: Invalid key in subscription auth data: - laravel

Question

I want to create a collaborative text editor app and came across this tutorial. I accessed the repository on github and followed all the steps from the README file to install and use the app. Also, in the tutorial, after I created the app on Pusher, I checked the "Enable client events" option on the App Settings tab.
However, when I type anything in the note textfield, the two following errors appear on the browser's console:
1)
Pusher : Error : {"type":"WebSocketError","error":"type":"PusherError","data":
{"code":null,"message":"Invalid key in subscription auth data:
'xxxxxxxxxxxx'"}}}
2)
Pusher : Error : {"type":"WebSocketError","error":
{"type":"PusherError","data":{"code":null,"message":"Cannot broadcast
client event (connection not subscribed to channel presence-note.note-
test-for-pusherqjvQbgt4s9)"}}}
The second error happens when I type something and the first one right when I load the page. I presume the second one is happening because of the first one.
This is my broadcasting.php file:
'connections' => [
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
//
'cluster' => 'us2',
'encrypted' => true
],
],
'redis' => [
'driver' => 'redis',
'connection' => 'default',
],
'log' => [
'driver' => 'log',
],
'null' => [
'driver' => 'null',
],
],
The values set in the env file I get from the app keys on my Pusher account. I've already double checked if the values are set correctly and it seems to be fine.
I appreciate any help. Thanks in advance

Answer 1

The first client side error suggests your auth endpoint isn't sending a valid response to the client, and Pusher can't validate it. Have you specified exactly the same credentials in your server as in your client? Especially the specification of the cluster.
The second client side error you're getting suggests that your client hasn't actually subscribed to the channel, which would mean that client events wouldn't work.
Double check your client side code to make sure it is actually subscribing to the channel in question. Also, double check the app settings in your Pusher dashboard to ensure client events are enabled.
Perhaps it would be helpful to enable logging on your client side Pusher object. See https://github.com/pusher/pusher-js#global-configuration

Answer 2

We've had the same issue and solved it for Laravel + Vue.
The problem was that the front-end developer is using another Pusher account for local development and he is sending compiled front-end files to git repo.
So, when I get the compiled js files, Echo is created with different credentials than mine because in my .env file there are my Pusher channel credentials.
Solution: npm run dev on my machine. (So that it compiles the js files and Echo will be created with my .env Pusher credentials)
P.S. This solution affirms answer of #kn100

Answer 3

Following steps work for me
Check your app keys at server and client side
run php artisan config:cache
run ``php artisan optimize:clear`
run composer dump-autoload
Restart your IDE
Test your app