laravel echo wont subscribe to private channel even the user is authenticated

Question

I'm using

• Laravel: 8.54
• Laravel Sanctum: 2.11
• Pusher Php Server: 7.0
• NuxtJs: 2.15.7
• pusher-js: 7.0.4
• laravel-echo: 1.11.3

Event Class

    <?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

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

    /**
     * The event's broadcast name.
     *
     * @return string
     */
    public function broadcastAs()
    {
        return 'private-raffle-entry';
    }

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

On My Channels file

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

On nuxt plugin

       import Echo from 'laravel-echo';
        window.Pusher = require('pusher-js');
        export default ({ app }, inject) => {
          const echo = new Echo({
              broadcaster: 'pusher',
              key: "mykey",
              authEndpoint: `http://back.project888.test/api/broadcasting/auth`,
              encrypted: true,
              forceTLS: true,
              cluster: 'ap2',
              authorizer: (channel, options) => {
                return {
                    authorize: (socketId, callback) => {
                        app.$axios.$post('/api/broadcasting/auth', {
                            socket_id: socketId,
                            channel_name: channel.name
                        })
                        .then(response => {
                            callback(false, response.data);
                            console.log('from oklugib ');
                        })
                        .catch(error => {
                            callback(true, error);
                        });
                    }
                };
              }
          });
          inject(
    
    'echo', echo)
    }

Client Code

 this.$echo.private(`RaffleEntry.${this.$auth.user.id}`)
        .listen('.private-raffle-entry', (e) => {
            console.log(e);
        });

I can see the broadcast message into pusher dashboard, also the client connection, The user can be authenticated perfectly, issue is it doesn't subscribe after the auth. Please see these screenshots of the request for authenticating the user before subscribing. Do you have any ideas how i can solve this ?

Answer 1

Okay got this issue resolved, on my nuxt plugin file the authorizer option you just return the response var not respose.data

import Echo from 'laravel-echo';
        window.Pusher = require('pusher-js');
        export default ({ app }, inject) => {
          const echo = new Echo({
              broadcaster: 'pusher',
              key: "mykey",
              authEndpoint: `http://back.project888.test/api/broadcasting/auth`,
              encrypted: true,
              forceTLS: true,
              cluster: 'ap2',
              authorizer: (channel, options) => {
                return {
                    authorize: (socketId, callback) => {
                        app.$axios.$post('/api/broadcasting/auth', {
                            socket_id: socketId,
                            channel_name: channel.name
                        })
                        .then(response => {
                            callback(false, response);
                     
                        })
                        .catch(error => {
                            callback(true, error);
                        });
                    }
                };
              }
          });
          inject(
    
    'echo', echo)
    }