I'm trying to build connection between my react.js app & laravel 10 (both are separate)
channel is Private
For react side
import React, { useEffect } from "react";
import Pusher from "pusher-js";
import GetUser from "../lib/get-data";
const MyComponent = () => {
const user = GetUser();
const token = JSON.parse(localStorage.getItem("token"));
console.log("user", user);
useEffect(() => {
const pusher = new Pusher("ABCD", {
wsHost: "localhost",
wsPort: 6001,
forceTLS: false,
disableStats: true,
enabledTransports: ["ws", "wss"],
cluster: "mt1",
authEndpoint: "http://127.0.0.1:8000/api/broadcasting/auth", // Laravel broadcasting authentication endpoint
auth: {
headers: {
"Access-Control-Allow-Origin": "*",
"Cross-Origin-Opener-Policy": "same-origin",
Accept: "application/json",
Authorization: `Bearer ${token}`, // Send your authentication token here
},
},
});
const channel = pusher.subscribe("private-chat.1");
channel.bind("new-message", (data) => {
console.log("Received event:", data);
});
return () => {
channel.unbind_all();
channel.unsubscribe();
};
}, []);
return <div>{/* Your component content */}</div>;
};
export default MyComponent;
Laravel side (i'm using laravel-websockets)
api.php
Broadcast::routes(['middleware' => ['auth:sanctum']]);
BroadcastServiceProvider.php
public function boot(): void
{
Broadcast::routes(['middleware' => ['auth:sanctum']]);
require base_path('routes/channels.php');
}
channel.php
Broadcast::channel('private-chat.{receiverId}', function ($receiverId) {
return auth()->user()->id == $receiverId;
});
i have tried a lot of fixes available on internet but nothing works
BroadcastServiceProvider.php is uncommented in Providers
Api user is logged in
Error log in front-end side
{
"message": "",
"exception": "Symfony\\Component\\HttpKernel\\Exception\\AccessDeniedHttpException",
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Broadcasting\\Broadcasters\\Broadcaster.php",
"line": 128,
"trace": [
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Broadcasting\\Broadcasters\\PusherBroadcaster.php",
"line": 86,
"function": "verifyUserCanAccessChannel",
"class": "Illuminate\\Broadcasting\\Broadcasters\\Broadcaster",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Broadcasting\\BroadcastManager.php",
"line": 490,
"function": "auth",
"class": "Illuminate\\Broadcasting\\Broadcasters\\PusherBroadcaster",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Support\\Facades\\Facade.php",
"line": 355,
"function": "__call",
"class": "Illuminate\\Broadcasting\\BroadcastManager",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Broadcasting\\BroadcastController.php",
"line": 24,
"function": "__callStatic",
"class": "Illuminate\\Support\\Facades\\Facade",
"type": "::"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Controller.php",
"line": 54,
"function": "authenticate",
"class": "Illuminate\\Broadcasting\\BroadcastController",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\ControllerDispatcher.php",
"line": 43,
"function": "callAction",
"class": "Illuminate\\Routing\\Controller",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Route.php",
"line": 260,
"function": "dispatch",
"class": "Illuminate\\Routing\\ControllerDispatcher",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Route.php",
"line": 205,
"function": "runController",
"class": "Illuminate\\Routing\\Route",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 806,
"function": "run",
"class": "Illuminate\\Routing\\Route",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 144,
"function": "Illuminate\\Routing\\{closure}",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Middleware\\SubstituteBindings.php",
"line": 50,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Routing\\Middleware\\SubstituteBindings",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Middleware\\ThrottleRequests.php",
"line": 159,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Middleware\\ThrottleRequests.php",
"line": 135,
"function": "handleRequest",
"class": "Illuminate\\Routing\\Middleware\\ThrottleRequests",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Middleware\\ThrottleRequests.php",
"line": 87,
"function": "handleRequestUsingNamedLimiter",
"class": "Illuminate\\Routing\\Middleware\\ThrottleRequests",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Routing\\Middleware\\ThrottleRequests",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Auth\\Middleware\\Authenticate.php",
"line": 57,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Auth\\Middleware\\Authenticate",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\View\\Middleware\\ShareErrorsFromSession.php",
"line": 49,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\View\\Middleware\\ShareErrorsFromSession",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Session\\Middleware\\StartSession.php",
"line": 121,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Session\\Middleware\\StartSession.php",
"line": 64,
"function": "handleStatefulRequest",
"class": "Illuminate\\Session\\Middleware\\StartSession",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Session\\Middleware\\StartSession",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Cookie\\Middleware\\AddQueuedCookiesToResponse.php",
"line": 37,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Cookie\\Middleware\\AddQueuedCookiesToResponse",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Cookie\\Middleware\\EncryptCookies.php",
"line": 67,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Cookie\\Middleware\\EncryptCookies",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 119,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 807,
"function": "then",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 784,
"function": "runRouteWithinStack",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 748,
"function": "runRoute",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Routing\\Router.php",
"line": 737,
"function": "dispatchToRoute",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
"line": 200,
"function": "dispatch",
"class": "Illuminate\\Routing\\Router",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 144,
"function": "Illuminate\\Foundation\\Http\\{closure}",
"class": "Illuminate\\Foundation\\Http\\Kernel",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest.php",
"line": 21,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\ConvertEmptyStringsToNull.php",
"line": 31,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\ConvertEmptyStringsToNull",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest.php",
"line": 21,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\TrimStrings.php",
"line": 40,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\TrimStrings",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize.php",
"line": 27,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Middleware\\PreventRequestsDuringMaintenance.php",
"line": 99,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Middleware\\PreventRequestsDuringMaintenance",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Http\\Middleware\\HandleCors.php",
"line": 62,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Http\\Middleware\\HandleCors",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Http\\Middleware\\TrustProxies.php",
"line": 39,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 183,
"function": "handle",
"class": "Illuminate\\Http\\Middleware\\TrustProxies",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Pipeline\\Pipeline.php",
"line": 119,
"function": "Illuminate\\Pipeline\\{closure}",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
"line": 175,
"function": "then",
"class": "Illuminate\\Pipeline\\Pipeline",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\Http\\Kernel.php",
"line": 144,
"function": "sendRequestThroughRouter",
"class": "Illuminate\\Foundation\\Http\\Kernel",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\public\\index.php",
"line": 52,
"function": "handle",
"class": "Illuminate\\Foundation\\Http\\Kernel",
"type": "->"
},
{
"file": "C:\\Users\\dhruv\\Desktop\\psychetric rounds\\website\\back-end\\psy\\vendor\\laravel\\framework\\src\\Illuminate\\Foundation\\resources\\server.php",
"line": 16,
"function": "require_once"
}
]
}
So i found the solution. Thanks to @Adefowowe
I have create a new contorller PusherController
PusherController.php
<?php
namespace App\Http\Controllers\ApiControllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Pusher\Pusher;
class PusherController extends Controller
{
public function pusherAuth(Request $request)
{
$user = auth()->user();
$socket_id = $request['socket_id'];
$channel_name = $request['channel_name'];
$key = getenv('PUSHER_APP_KEY');
$secret = getenv('PUSHER_APP_SECRET');
$app_id = getenv('PUSHER_APP_ID');
if ($user) {
$pusher = new Pusher($key, $secret, $app_id);
$auth = $pusher->socket_Auth($channel_name, $socket_id);
return response($auth, 200);
} else {
header('', true, 403);
echo "Forbidden";
return;
}
}
}
api.php
Route::post('/pusher/auth', [PusherController::class, 'pusherAuth']);
And after adding this url /api/pusher/auth in my react.js code it worked