Laravel echo authenticating private channel return 401

I am building SPA using Vue Cli app and Laravel 9 API. and I want to use Pusher to send realtime notification.

I followed laravel docs for integration with Pusher.

but the endpoint broadcasting/auth return 401. I am using Sanctum SPA cookie based authentication and all my protected api routes work fine except for this one.

main.ts

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
 
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    wsPort: 443,
    disableStats: true,
    encrypted: false,
    authEndpoint: `${import.meta.env.VITE_PUSHER_HOST}/broadcasting/auth`,
});

App.vue

onMounted(() => {
	Echo.private(`booking-team-${team.value.uuid}`)
    .listen('BookingCreated', (e: Event) => {
      console.log(e);
    });		
})

class BroadcastServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {

        $mws = ['middleware' => ['api', 'auth:sanctum']];

        Broadcast::routes($mws);

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

Broadcast::channel('booking-team-{uuid}', function ($user, $uuid) {
    return (int) $user->currentTeam?->uuid === $uuid;
});

class BookingCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(public Booking $booking)
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('booking-team-' . $this->booking->team->uuid);
    }
}

"laravel-echo": "^1.15.0",
"pusher-js": "^8.0.2",

 "pusher/pusher-php-server": "^7.2",

uniqueginun

3 years ago

Best Answer

Level 9

was able to get it working by reading the docs:

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: import.meta.env.VITE_PUSHER_KEY,
  wsHost: import.meta.env.VITE_PUSHER_HOST,
  cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
  wsPort: 443,
  disableStats: true,
  encrypted: true,
  authorizer: (channel, options) => {
    return {
      authorize: (socketId, callback) => {
        axios.post(`${import.meta.env.VITE_PUSHER_HOST}/broadcasting/auth`, {
          socket_id: socketId,
          channel_name: channel.name
        })
          .then(response => {
            callback(false, response.data);
          })
          .catch(error => {
            callback(true, error);
          });
      }
    };
  }
});

Please or to participate in this conversation.