Not being authenticate through broadcasting/auth from external JS client(eg. VueCLI)

[alimranahmed]

I am working on an application where my server should be aware about user's channel subscription. So, I was trying to use Pusher's presence channel but somehow I am not being able to pass the broadcasting authentication. Our API client's are using our Laravel's API through bearer token authentication. Seems I am missing something silly:

My setup and approach is as below:

My Set up

Laravel("laravel/framework": "5.8.*") as Server
VueCLI("vue": "^2.6.11") app as client

How I am trying?

In my vue cli app:

pusher = new Pusher('<PUSHER_APP_KEY>', {
          cluster: 'ap2',
          authEndpoint: url + '/broadcasting/auth',
          encrypted: true,
          auth: {
            headers: {
              Accept: 'application/json',
              Authorization: 'Bearer ' + token
            },
          }
        });

In Laravel

To ensure that the user can get authenticated through api token. Added this in Laravel's BroadcastingServiceProvider.php boot() method:

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

in routes/channels.php

Broadcast::channel('presence-test-{id}', function ($user, $id) {
    info(__METHOD__.' Hit! User: '.json_encode(compact('user', 'id')));
    return true; //I just want it to work, and hit this url. 
});

What am I getting?

403 Forbidden

{message: "", exception: "Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException",…}
exception: "Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException"
file: "..../vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/Broadcaster.php"
line: 81
message: ""
trace: [{,…}, {,…}, {,…}, {,…},…]
0: {,…}
class: "Illuminate\Broadcasting\Broadcasters\Broadcaster"
file: ".../vendor/laravel/framework/src/Illuminate/Broadcasting/Broadcasters/PusherBroadcaster.php"
function: "verifyUserCanAccessChannel"
line: 51
.
.
.

I have even tried to make custom authentication(inspired by an issue discussion here) as below:

In api.php

Route::post('/broadcasting/auth', 'BroadCastingController')->middleware('auth:api');

In BroadCastingController I have:

function __invoke(Request $req) {
        return Broadcast::auth($req);
}

Getting Same error.

What am I missing? What am I doing wrong?

[alimranahmed]

Got it my issue was in routes/channels.php

Broadcast::channel('presence-test-{id}'....

Should be:

Broadcast::channel('test-{id}'....