Auth info required to subscribe to private-App.User.undefined using Laravel, Vue and Pusher

Question

I am trying to send a notification that broadcast on a private channel using pusher with laravel api. Everything is ok while sending notification and pusher server is receiving the event. However, when I try to listen to those events nothing display in the console. The error logs in pusher shows the following:

Here is my code of main.js to listen to broadcast

let userId=document.head.querySelector('meta[name="user-id"').content;
console.log(userId)
window.Echo.private('App.User.' + userId)
    .notification((notification) => {
        console.log(notification.type);
    });

This is my code of bootstrap.js

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
 });

This is my meta tags from welcome.blade.php

<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="user-id" content="{{Auth::check() ? Auth::user()->id:''}}">

This is my channels.php file code

Broadcast::channel('App.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
},['guards'=>['api']]);

Finally the boot function from BroadcastServiceProvider.php

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

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

Any help would highly appreciated.Thank in advance.

Answer 1

I had the same problem but using Djago and Javascript. My suggestion is:

• make sure the URL that Pusher uses for private channels authentication is working
• "Enable client events" from "App settings" is ON

Answer 2

I'm grappling with the same issue. From what I've read, if you're using api, you need to add authentication headers to the echo instance in your bootstrap.js file like so:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true,
    auth:{
        headers: {
            Accept: 'application/json',
            Authorization: 'Bearer ',
        },
    },

 });

Try this out.