Laravel Echo + VueJS broadcast/auth problem

Question

I'm using Laravel Echo and pusher as my server. It is working already on public channels.

Here is the photo of my laravel echo listener image link

Now my problem is when I use PrivateChannel and when I listen in the private channel this error pops out:

POST http://localhost:3000/broadcasting/auth 500 (Internal Server Error)

Inside the error in the console/network tab it says Route [login] not defined.

Here is an image inside the console/network https://i.stack.imgur.com/fnAGp.png

Things I have done:

-Uncommented App\Providers\BroadcastServiceProvider::class in config/app.php

-Added Broadcast::routes(['middleware' => ['auth:api']]); in BroadcastServiceProvider.php

-Used Echo.private('channel-name') instead of Echo.channel('channel-name') for listening to private channels

-Added authEndpoint : 'http://localhost:3000/broadcasting/auth' to bootstrap.js(This is where my Echo options are)

-Added a channel(probably the private channel) in my channels.php (here is a photo)

-Added csrf token meta tag in my main blade

In the pusher server it recieves the event when it is fired, here is a picture of the event successfully fired.

So the problem is when I listen to a private channel the error pops out but everything is okay when listening to a public channel, And I am not so sure how to assess with this problem.

can you please show your routes/channels.php file and also did you add the CSRF Token meta tag field in your base layout page? — Md. Miraj Khan, Nov 11 '19 at 04:25
@Md.MirajKhan I use Laravel Passport for my API authentication which uses the auth api middleware — Jonas, Nov 11 '19 at 05:37
so then you have to pass your api_toke with the pusher route. — Md. Miraj Khan, Nov 11 '19 at 05:39

score 4 · Accepted Answer · answered Nov 11 '19 at 05:57

4

You have to pass the auth header with the pusher request like below.

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'APP_KEY',
    authEndpoint: '/broadcasting/auth'
    auth: {
        headers: {
            'Authorization': 'Bearer your_api_Toke',
            'X-CSRF-Token': "CSRF_TOKEN"
         }
      }
    });

For more details:

https://github.com/laravel/echo/issues/26
Laravel Echo not using Auth Headers

answered Nov 11 '19 at 05:57

Md. Miraj Khan

377
3
15

1

To add to the answer, if using Laravel API on the backend with Vue on the front end you probably do not want to be using CSRF_TOKEN at all. So remove that from the header on the front end and on laravel go to app/Http/Middleware/VerifyCsrfToken.php and add 'broadcasting/auth' to $except[]. Can also do that for testing until you get everything else working. – fred Jul 11 '20 at 14:37

Laravel Echo + VueJS broadcast/auth problem

1 Answers1