'Laravel Echo + Laravel Passport auth in private / presence websockets channels

I'm trying to connect to a presence wesocket channel using Laravel Echo. I'm also using Laravel Passport. I followed lots of tutorials, but I'm getting 403 error codes, 302 codes and so on. I'm hosting my websocket server locally, using laravel-websockets library to handle connections. Vue is my front-end library.

This is what I tried:

  • Edit the BroadcastServiceProvider's boot function.

    public function boot() {
                Broadcast::routes(["prefix" => "api", "middleware" => "auth:api"]);
                require base_path('routes/channels.php');
            }
    
  • Add the Authorization token to Echo headers and add an authEndpoint property in bootstrap.js

    window.Echo = new Echo({
     broadcaster: 'pusher',
     authEndpoint: '/broadcasting/auth',
     key: process.env.MIX_PUSHER_APP_KEY,
     auth:{
         headers:{
             'Authorization': 'Bearer ' + auth_token,
         }
     },
     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
     //encrypted: false
     wsHost: window.location.hostname,
     wsPort: 6001});
    
  • Try joining the channel from Vue.

    mounted(){
    Echo.join(`game.0`)
        .here((users) => {
            alert("In the channel!");
        })
        .joining((user) => {
            console.log("Someone entered");
        })
        .leaving((user) => {
            console.log(user.name);
        })
        .listen('GameEvent', (e) => {
            console.log("Hey")
        });}
    
  • routes/channels.php file:

    Route::prefix('/user')->group(function(){
    Route::post('/login','api\v1\LoginController@Login');
    Route::middleware('auth:api')->get('/all','api\v1\user\UserController@index');});
    
  • The event file:

class GameEvent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $gameEvent;
    public $gameId;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($gameEvent,$gameId)
    {
        //
        $this->gameEvent = $gameEvent;
        $this->gameId = $gameId;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        //return new PrivateChannel('channel-name');
        return new PresenceChannel('game.0');
    }

    public function broadcastWith(){
        return $this->gameEvent;
    }
}


At this point, if I try to connect to the channel, the broadcasting/auth request gets a 302 code (Found). I found an answer in another post that claimed to solve this by adding this to the routes/web.php file.

Route::post('/broadcasting/auth', function(Request $request){
$pusher = new Pusher\Pusher(
    env('PUSHER_APP_KEY'),
    env('PUSHER_APP_SECRET'),
    env('PUSHER_APP_ID'),
    array(
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'useTLS' => false,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'http',
    )
);

IT WORKED, the broadcasting/auth request gives a 200 code, and I get this as a response: {"auth":"ABCFEDG:0bfff7db6506158755b012a47873799849d4e6b331f68da4bedd1caea04ad657"}

but the here, joining, leaving functions are not triggering.

Echo.join('game.0')
    .here((users) => {
        alert("In the channel!");
    })

What should I do to get this to work?

Screenshot of the network inspector: enter image description here



Solution 1:[1]

Did you add auth route in channel.php ? please check it You should make it based on channel name

Route::channel('game.'.$id,function($user,$id){
return .....
})

Solution 2:[2]

no channels there . Did you miss Broadcast::channel ?

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 Mohammad Aliyari
Solution 2 justyr