PrivateChannel 403 error Laravel Echo Pusher Laravel Websockets local setup - laravel

Question

I am getting a 403 on broadcasting/auth route.
I am using Laravel websockets package for web sockets and I have the below setup
- Backend Laravel server ( on port 8000 )
- Laravel Websockets Server ( laravel is running on 8001 and websocket server on 6001 )
- Standalone Ionic React app ( on port 8100)
Now everything works when I am trying Public Channel but when I try Private Channel it fails.
in the above screenshot of Laravel sockets dashboard I can see connection made as this is the same socketId which went with the request.
I am using Laravel Sanctum for Authentication.
PFB :- my client side code
const headers = {
'Content-Type': 'application/json',
Authorization: window.localStorage.getItem('token')
? `Bearer ${window.localStorage.getItem('token')}`
: '',
'Access-Control-Allow-Credentials': true,
};
const options = {
broadcaster: 'pusher',
key: 'abcsock',
authEndpoint: 'http://localhost:8001/api/broadcasting/auth',
authorizer: (channel, options) => {
return {
authorize: (socketId, callback) => {
axios
.post(
'http://localhost:8001/api/broadcasting/auth',
{
socket_id: socketId,
channel_name: channel.name,
},
{ headers, withCredentials: true }
)
.then((response) => {
callback(false, response.data);
})
.catch((error) => {
callback(true, error);
});
},
};
},
wsHost: '127.0.0.1',
wsPort: 6001,
encrypted: true,
disableStats: true,
enabledTransports: ['ws', 'wss'],
forceTLS: false,
};
Code from Laravel Websockets Server
api.php file
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Broadcast;
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
Broadcast::routes(['middleware' => ['auth:sanctum']]);
BroadcastServiceProvider.php
namespace App\Providers;
use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\ServiceProvider;
class BroadcastServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* #return void
*/
public function boot()
{
Broadcast::routes(['middleware' => ['auth:sanctum']]);
require base_path('routes/channels.php');
}
}
NewNotification.php
<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Messages\BroadcastMessage;
use Illuminate\Notifications\Notification;
use Illuminate\Broadcasting\PrivateChannel;
use App\AppNotification;
use App\User;
class NewNotification extends Notification
{
use Queueable;
public $notification;
public $user;
/**
* Create a new notification instance.
*
* #return void
*/
public function __construct(AppNotification $notification, User $user)
{
$this->notification = $notification;
$this->user = $user;
}
/**
* Get the notification's delivery channels.
*
* #param mixed $notifiable
* #return array
*/
public function via($notifiable)
{
return ['database', 'broadcast'];
}
/**
* Get the array representation of the notification.
*
* #param mixed $notifiable
* #return array
*/
public function toArray($notifiable)
{
$notification = $this->notification;
return [
'id' => $notification->id,
'title' => $notification->title,
'description' => $notification->description,
'button_text' => $notification->button_text,
'is_read' => $notification->is_read,
'created_at' => $notification->created_at,
[
'notification_for' => $notification->notifiable
]
];
}
public function toBroadcast($notifiable)
{
return new BroadcastMessage($this->toArray($notifiable));
}
public function broadcastOn()
{
return new PrivateChannel('Notifications.' . $this->user->id);
}
}
channels.php
<?php
use Illuminate\Support\Facades\Broadcast;
Broadcast::channel('Notifications.{id}', function ($user, $id) {
return (int) $user->id === (int) $id;
}, ['guards' => ['sanctum']]);
I have attached whatever I felt was sufficient to explain the issue and for you to troubleshoot but if you need anything more please ask.
Any help will be appreciated

Answer 1

i liked this package because its wrote in php but its sortof abandon and a lot of issues that not solved.
alternative of this server is laravel-echo-server(as laravel docs recommends) very easier to use.
https://stackoverflow.com/a/61704796/7908390 more info if you can work with laravel-sockets im glad to see a new example

Answer 2

Have you added authentication for your channels.php? Please refer here:
https://laravel.com/docs/7.x/broadcasting#defining-authorization-routes
What does it look like?
I think you are doing everything correctly but you have not authorized your routes.

Answer 3

I had the similar error with Laravel & pusher.
I have fixed using decodeURIComponent and moving BroadCast::routes(['middleware' => ['auth:sanctum']]) to routes/api.php from BroadcastServiceProvider.php
Also, add withCredentials = true.
const value = `; ${document.cookie}`
const parts = value.split(`; XSRF-TOKEN=`)
const xsrfToken = parts.pop().split(';').shift()
Pusher.Runtime.createXHR = function () {
const xhr = new XMLHttpRequest()
xhr.withCredentials = true
return xhr
}
const pusher = new Pusher(`${process.env.REACT_APP_PUSHER_APP_KEY}`,
{
cluster: 'us3',
authEndpoint: `${process.env.REACT_APP_ORIG_URL}/grooming/broadcasting/auth`,
auth: {
headers: {
Accept: 'application/json, text/plain, */*',
'X-Requested-With': 'XMLHttpRequest',
'X-XSRF-TOKEN': decodeURIComponent(xsrfToken)
}
}
})
I hope this helps a bit.