Echo configuration problem

Hello everyone,

I hope you're doing well. I'm currently working on a project that involves using React with a Laravel API, specifically utilizing Sanctum (SPA) for authentication, which means I'm using cookies-based tokens instead of Bearer tokens.

So far, everything is functioning properly. However, I'm now looking to implement real-time notifications. To achieve this, I've incorporated the beyndcode/Laravel-websocket package. The server-side functionality is working as expected. Additionally, I have installed Laravel Echo and pusher-js in my React application.

While using the public channel works fine with React, I encountered an issue when attempting to utilize the private channel. In React, the problem I'm facing is "POST http://192.168.0.43:8000/api/broadcasting/auth 419 (unknown status)".

I would greatly appreciate it if you could guide me on how to configure Echo correctly or share any ideas that could potentially assist me in resolving this matter.

Just to provide some context, both my React app and Laravel are standalone applications. I'm feeling quite exhausted from trying to troubleshoot this myself, so any help would be highly appreciated.

const ws = {
  WEBSOCKET_APP_KEY: "local",
  WEBSOCKET_HOST: "192.168.0.43",
  WEBSOCKET_PORT: "6001",
  WEBSOCKET_APP_CLUSTER: "mt1",
  WEBSOCKET_END_POINT: "http://192.168.0.43:8000/api/broadcasting/auth",
};

export default ws;

const getCookieValue = (name) => {
  const cookies = document.cookie.split(";");
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(name + "=")) {
      return cookie.substring(name.length + 1);
    }
  }
  return null;
};

window.Pusher = Pusher;
window.Echo = new Echo({
  broadcaster: "pusher",
  key: ws.WEBSOCKET_APP_KEY,
  cluster: ws.WEBSOCKET_APP_CLUSTER,
  wsHost: ws.WEBSOCKET_HOST,
  wsPort: ws.WEBSOCKET_PORT,
  wssPort: ws.WEBSOCKET_PORT ?? 443,
  forceTLS: false,
  disableStats: true,
  authEndpoint: ws.WEBSOCKET_END_POINT,
  auth: {
    headers: {
      Authorization: getCookieValue("XSRF-TOKEN"),
      Accept: "application/json",
    },
  },
  authorize: (socketId, callback) => {
    axios
      .post("/api/broadcasting/auth", {
        socket_id: socketId,
        channel_name: channel.name,
      })
      .then((response) => {
        callback(false, response.data);
      })
      .catch((error) => {
        callback(true, error);
      });
  },
});
window.Echo.private("private.1").listen("PrivateTest", (e) => {
  console.log(e);
});

Thank you very much.

LaryAI

2 years ago

Level 58

The error "POST http://192.168.0.43:8000/api/broadcasting/auth 419 (unknown status)" indicates that the server is not able to authenticate the user. This could be due to a misconfiguration of the Echo package or the Laravel application.

Here are some steps to try and resolve the issue:

Check if the Sanctum middleware is applied to the routes that require authentication. If not, add the middleware to the routes.
Verify that the XSRF-TOKEN cookie is being set correctly. You can check this by inspecting the cookies in the browser's developer tools.
Ensure that the XSRF-TOKEN cookie is being sent with the request to the auth endpoint. You can check this by inspecting the network tab in the browser's developer tools.
Check if the auth endpoint is returning the expected response. You can do this by making a request to the auth endpoint using a tool like Postman or cURL.
Verify that the Pusher credentials are correct and that the Pusher app is configured to use the correct cluster.
Check if the Laravel-websocket package is configured correctly. You can do this by checking the configuration files and verifying that the package is installed correctly.

Here is an updated version of the code that includes some changes that may help resolve the issue:

const getCookieValue = (name) => {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(name + '=')) {
      return cookie.substring(name.length + 1);
    }
  }
  return null;
};

window.Pusher = Pusher;
window.Echo = new Echo({
  broadcaster: 'pusher',
  key: ws.WEBSOCKET_APP_KEY,
  cluster: ws.WEBSOCKET_APP_CLUSTER,
  wsHost: ws.WEBSOCKET_HOST,
  wsPort: ws.WEBSOCKET_PORT,
  wssPort: ws.WEBSOCKET_PORT ?? 443,
  forceTLS: false,
  disableStats: true,
  authEndpoint: ws.WEBSOCKET_END_POINT,
  auth: {
    headers: {
      'X-CSRF-TOKEN': getCookieValue('XSRF-TOKEN'),
      'Accept': 'application/json',
    },
  },
});

window.Echo.private('private.1')
  .listen('PrivateTest', (e) => {
    console.log(e);
  })
  .listenForWhisper('test', (e) => {
    console.log(e);
  });

Note that the changes include using the X-CSRF-TOKEN header instead of Authorization, and adding a listenForWhisper method to the Echo instance.

Please or to participate in this conversation.