CODEWITHSUNDEEP
reactjslaravel
NewProgrammer
NewProgrammer

Reputation: 295

react js front end unable to listen to private channel from laravel pusher back end

I have no problem getting laravel to broadcast in public channel, external react receives well on a public channel. Once I switch to a private channel, laravel responds with a 302 redirect.

Appreciate any help.

react code:

subscribeToPrivateChannel = (userId) => {
this.pusher = new Pusher('something', {
  broadcaster: 'pusher',
  appId: 'appid',
  key: 'key',
  secret: 'secret',
  cluster: 'cluster',
  authEndpoint: 'http://localhost:8000/broadcasting/auth'
})
this.channel = this.pusher.subscribe(`private-notification_${userId}`)

this.channel.bind('created', this.updateNotifications)
this.channel.bind('updated', this.updateNotifications)
this.channel.bind('deleted', this.updateNotifications)
this.channel.bind('App\\Events\\PushNotification', this.updateNotifications)

console.log("THIS PUSHER: ", this.pusher)
console.log("THIS CHANNEL: ", this.channel)
}

inside laravel BroadcastServiceProvider.php:

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

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

inside channels.php:

Broadcast::channel('notification_{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
});

When I remove the ['middleware' => 'auth:api'] from the BroadcastServiceProvider.php routes, laravel gives 403 forbidden.

Upvotes: 0

Views: 1840

Answers (1)

NewProgrammer
NewProgrammer

Reputation: 295

In the react code add the bearer token:

this.pusher = new Pusher('something', {
  broadcaster: 'pusher',
  appId: 'appid',
  key: 'key',
  secret: 'secret',
  cluster: 'cluster',
  auth:{
    headers:{
      'Accept':'application/json',
      'Authorization': 'Bearer ' + getToken()
    }
  }
  authEndpoint: 'http://localhost:8000/broadcasting/auth'
})

Upvotes: 1

Related Questions