not able to use laravel-echo in vue cli project

Question

I am tryint to create a chat app using vue cli project with laravel-echo. But getting error as 419 unknown status /broadcasting/auth. This is my main.js filr

import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import i18n from "./i18n";
import VueConfirmDialog from "vue-confirm-dialog";
import VueChatScroll from "vue-chat-scroll";
import Echo from "laravel-echo";


Vue.use(VueConfirmDialog);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

window.Pusher = require("pusher-js");

window.Echo = new Echo({
  broadcaster: "pusher",
  // key: process.env.MIX_PUSHER_APP_KEY,
  host: "http://localhost:8000",
  authEndpoint: "http://localhost:8000/broadcasting/auth",
  key: "key",
  // cluster: process.env.MIX_PUSHER_APP_CLUSTER,
  cluster: "ap2",
  forceTLS: true
});

and this is how i am trying to listen to events

window.Echo.channel("Chat").listen("SessionEvent", e => {
      let friend = this.friends.find(friend => friend.id === e.session_by);
      friend.session = e.session;
      this.listenForEverySession(friend);
    });

Can anyone tell me whats the problem? This is front end and laravel project is backend

This is error I am getting

Answer 1

in your channels.php add guards

Broadcast::channel('Chat', function ($user) {
    return true;
}, ['guards' => 'web']); //  add this guards

and remove authEndpoint it should auto detect