laravelwebsocketpusherlaravel-websockets

'/api/broadcasting/auth' 403 Forbidden


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"
    }
   ]
 }

Solution

  • 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