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.sstatic.net/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
– Md. Miraj Khan, Commented Nov 11, 2019 at 4:25
@Md.MirajKhan I use Laravel Passport for my API authentication which uses the auth api middleware — Jonas
– Jonas, Commented Nov 11, 2019 at 5:37
so then you have to pass your api_toke with the pusher route. — Md. Miraj Khan
– Md. Miraj Khan, Commented Nov 11, 2019 at 5:39

Md. Miraj Khan · Accepted Answer · 2019-11-11 05:57:08Z

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, 2019 at 5:57

Md. Miraj Khan

3773 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fred Over a year ago

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.

Collectives™ on Stack Overflow

Laravel Echo + VueJS broadcast/auth problem

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related