'POST http://localhost:8000/broadcasting/auth 403 (Forbidden)

I am trying to make my app connecting to pusher on a private channel.

But I am getting the following error in console:

POST http://localhost:8000/broadcasting/auth 403 (Forbidden)

app.js

 /**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('payment', require('./components/Payment.vue'));
Vue.component('form-ajax', require('./components/FormAjax.vue'));
Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

    Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);

const app = new Vue({
    el: '#app'
});

Echo.private(`articles.admin`)
    .listen('ArticleEvent', function(e)  {
        console.log(e);
    });

Error

What maybe the cause of the error and how to resolve it.

laravel


Solution 1:[1]

Error 403 /broadcasting/auth with Laravel version > 5.3 & Pusher, you need change your code in resources/assets/js/bootstrap.js with

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your key',
    cluster: 'your cluster',
    encrypted: true,
    auth: {
        headers: {
            Authorization: 'Bearer ' + YourTokenLogin
        },
    },
});

And in app/Providers/BroadcastServiceProvider.php change by

Broadcast::routes()

with

Broadcast::routes(['middleware' => ['auth:api']]);

or

Broadcast::routes(['middleware' => ['jwt.auth']]); //if you use JWT

it worked for me, and hope it help you.

Solution 2:[2]

In my case I have used a custom auth guard which is causing the problem.

I have added the middleware to pass my custom auth guard and this solves the problem.

public function boot()
{
    Broadcast::routes(['middleware' => 'auth:admin']);

    require base_path('routes/channels.php');
}

This link explains more what's going on.

Solution 3:[3]

Have you tried to customise your authEndpoint.

this thing works on my end.

bootsrap.js

window.Echo = new Echo({
    broadcaster: 'pusher',
    // ...
    authEndpoint: '/custom/endpoint/auth'
});

Solution 4:[4]

I added below code to routes/web.php and it worked.

 Route::post('/broadcasting/auth', function () {
    return Auth::user();
 });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alex
Solution 2 Ralph519
Solution 3 James Brian
Solution 4 ParisaN

Related Questions