Error: JSON returned from channel-authorization endpoint was invalid, yet status code was 200. Data was:

[anuradhan]

trafficstars

Version:

• @inertiajs/react version: 1.0.0

Describe the problem:

this error is produced when using private channel with pusher. public channel works fine without any error.

using Laravel Echo + Pusher on Laravel + React.js + Inertia.js

code on bootstrap.js window.Pusher = Pusher; window.Echo = new Echo({ broadcaster: 'pusher', key: import.meta.env.VITE_PUSHER_APP_KEY, cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'ap2', wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com, wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80, wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443, forceTLS: true, // forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https', enabledTransports: ['ws', 'wss'], });

code on react.jsx file window.Pusher.logToConsole = true; window.Echo.logToConsole = true; window.Echo.private('App.Models.User.'+user.id).listen('.notifications', (e) => { console.log(e); alert('hi'); });

code on notification event

i googled and found many are having similar issues. so, i tried changing auth endpoint, still no luck. does inertia have this issue unresolved? or do we have a solution for this?

[pedroborges]

@anuradhan Thanks for reporting this! Could you provide a reproducible repository or example that I can use to test the issue? It would really help in identifying the problem. Appreciate it!

[gabrielalmeida975]

I had the same problem, one solution was to create an auth route. I'm using laravel sanctum, so in my API routes I created an auth route for broadcasting.

see that I added the endpoint

authEndpoint: '/api/auth/broadcasting'

Vue

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    authEndpoint: '/api/auth/broadcasting',
    auth: {
        withCredentials: true,
        headers: {
            'X-CSRF-TOKEN': window.Laravel.csrfToken
        },
    },
});

window.Echo.private('qrcodeUpdate.' + org)
    .listen('QrcodeUpdate', (event) => {
        console.log(event);
    })
    .error((error) => {
        console.error(error);
    });

In my API route, I created the endpoint with the following content.

use Illuminate\Support\Facades\Broadcast;

Route::post('/auth/broadcasting', function (Request $request) {
    return Broadcast::auth($request);
});

[mu797462]

i'm using pusher with sanctum in laravel 11 blade template and i'm getting {type: 'AuthError', error: 'JSON returned from channel-authorization endpoint was invalid, yet status code was 200. Data was: ', status: 200}

is there any way to fix it or still its a open issue to resolve??

[pascalbaljet]

Modern versions of Laravel come with an install:broadcasting Artisan Command that creates the config/broadcasting.php and routes/channels.php files. I highly recommend following that route to get it to work and then customizing it later on.

There's now also a @laravel/echo-vue package that greatly simplifies the setup:

import { configureEcho } from "@laravel/echo-vue";
 
configureEcho({
    broadcaster: "pusher",
});

Check out the Broadcasting docs, it's all there! If you still have a problem specific to Inertia and broadcasting, feel free to open a new issue.

[Flobbos]

Modern versions of Laravel come with an install:broadcasting Artisan Command that creates the config/broadcasting.php and routes/channels.php files. I highly recommend following that route to get it to work and then customizing it later on.

There's now also a @laravel/echo-vue package that greatly simplifies the setup:

import { configureEcho } from "@laravel/echo-vue";

configureEcho({ broadcaster: "pusher", }); Check out the Broadcasting docs, it's all there! If you still have a problem specific to Inertia and broadcasting, feel free to open a new issue.

Did you ever find a solution for this? I am stuck at the exact same scenario. Everything works locally but as soon as I deploy the project to production I get this error. Highly frustrating to say the least.