CODEWITHSUNDEEP
laravelvue.jspusherlaravel-echo
Johhn
Johhn

Reputation: 1049

Getting 403, error when using private channels with laravel broadcast

Unable to authenticate users in my chat app. I am getting a 403 error from the console. This happens though when I use private channels, but when using a public channel, this is working really fine but I definitely want authenticated users only. It is more like an spa, hence using axios for almost everything including user authentication requests to laravel. below is my code:

BroadcastServiceProvider:

` public function boot()
{
    Broadcast::routes();

    require base_path('routes/channels.php');
}`

Channels.php:

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

Broadcast::channel('chat', function ($user) {
    return Auth::check();
});
`

listen directive from vue component: 

`Echo.private('chat')
            .listen('.App\\Events\\Chats\\MessageSent', (e) => {
                console.log(e);
                this.sentMessages.push({
                    message: e.message.message,
                    user: e.user
                });
`

MessageSent event: 

`   public function broadcastOn()
{
    return new PrivateChannel('chat');
}
`

Now using the vue-echo wrapper but still I got this problem, I still haven't figured out what I am missing

Upvotes: 3

Views: 8611

Answers (3)

Israel Nkum
Israel Nkum

Reputation: 124

I spent a lot of hours on this, I added the endpoint to the api route before it worked.

Route::post('/broadcasting/auth', [BroadcastController::class, 'authenticate'])

Dont forget to import the class: Illuminate\Broadcasting\BroadcastController

Make sure you put it in the auth:sanctum middleware group

new Echo({
  broadcaster: "reverb",
  key: import.meta.env.VITE_REVERB_APP_KEY,
  wsHost: import.meta.env.VITE_REVERB_HOST,
  wsPort: import.meta.env.VITE_REVERB_PORT,
  wssPort: import.meta.env.VITE_REVERB_PORT,
  forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
  authEndpoint: import.meta.env.VITE_API_PATH + "/broadcasting/auth",
  enabledTransports: ["ws", "wss"],
  auth: {
    headers: {
      Authorization: `Bearer yourBearerToken`,
    },
  },
});

NOTE: I added another key: authEndpoint to the Echo instance.

Upvotes: 0

iftekharul islam
iftekharul islam

Reputation: 1

For private channel i have done this few things I am using vuejs 3 and generated echo.js

// resources/js/echo.js
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    cluster: import.meta.env.VITE_REVERB_APP_CLUSTER, // Add cluster
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'], // Add this to point to Laravel Echo Server auth route
    auth: {
        headers: {
            Authorization: useCookie('accessToken').value,  // If using token-based auth
        },
    },
});

here i have added

auth: {
    headers: {
        Authorization: useCookie('accessToken').value,  // If using token-based auth
    },
},

and then on channel.php route added this if you are using sanctum auth or you can use any other auth middleware that you are using.

Broadcast::routes(['middleware' => ['auth:sanctum']]);

this problem 403 issue has gone.

Upvotes: 0

Johhn
Johhn

Reputation: 1049

It's is just basically as the error suggests, an authentication problem, well I am using tokens for authentication in my app but now needed to also pass this token issued to the user as well to vue-echo.

And also change: 

Broadcast::routes();

to 

Broadcast::routes(['middleware' => ['auth:api']]);

since am creating a single page application hence using axios for authentication which therefore interprets to me using the api middleware.

Guided by the answer provided by Alex on the question 'Laravel /broadcasting/auth Always Fails With 403 Error ' You can get more details there.

Thanks all .

Upvotes: 0

Related Questions