Real time react web app with pusher and laravel

The default route broadcasting/auth can't retrieve a suitable response so I added the custom authEndPoint.

web.php:

Route::get('pusher/auth', 'PusherController@pusherAuth');

and added PusherController:

class PusherController extends Controller
{
    /**
     * Authenticates logged-in user in the Pusher JS app
     * For presence channels
     */
    public function pusherAuth()
    {

        $user = auth()->user();

        if ($user) {
            $pusher = new Pusher('auth-key', 'secret', 'app_id');
            $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
            $callback = str_replace('\\', '', $_GET['callback']);
            header('Content-Type: application/javascript');
            echo($callback . '(' . $auth . ');');
            return;
        }else {
            header('', true, 403);
            echo "Forbidden";
            return;
        }
    }
}

This works and subscribes the channel.

You can think of accessing a private channel as if you are making a private auth request to the server . You Cant Directly Access A private channel from react Because of Security Reasons. As Mentioned In CodeAcademy ....

Servers are used to host web pages, applications, images, fonts, and much more. When you use a web browser, you are likely attempting to access a distinct website (hosted on a server). Websites often request these hosted resources from different locations (servers) on the Internet. Security policies on servers mitigate the risks associated with requesting assets hosted on different server

You Need a policy in your laravel app to add CORS (CROSS ORIGIN REQUEST SHARING ) Initially It was a bit complicated But You can use this library.

Now You can make any kind of private requests to your laravel app.

PS

Dont Forget to add checks in your broadcasts routes in channels.php as you are just simply returning true without any checks.