Laravel Echo / Pusher authentication fails (403) - laravel-5.4

Question

Learning Laravel event broadcasting / Echo / Vue and playing around with this tutorial.
I keep getting 403 responses to authentication, and I suspect my lack of understanding on the channels.php routes is the issue. I am using Player model instead of User for Auth which works ok.
Event ChatMessageSend
class ChatMessageSent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $channel;
public $player;
public $chatMessage;
/**
* Create a new event instance.
* GameChat constructor.
* #param $chatMessage
* #param $player
*/
public function __construct(ChatMessage $chatMessage, Player $player)
{
$this->channel = session()->get('chat.channel');
$this->chatMessage = $chatMessage;
$this->player = $player;
}
/**
* Get the channels the event should broadcast on.
*
* #return Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel($this->channel);
}
}
Listener ChatMessageNotification (default / empty)
class ChatMessageNotification
{
/**
* ChatMessageNotification constructor.
*/
public function __construct()
{
//
}
/**
* Handle the event.
*
* #param ChatMessageSent $event
* #return void
*/
public function handle(ChatMessageSent $event)
{
//
}
}
Controller ChatController
class ChatController extends Controller
{
/**
* Send chat message
*
* #param Request $request
* #return \Illuminate\Database\Eloquent\Collection|static[]
*/
public function getMessages(Request $request)
{
return ChatMessage::with('player')
->where('progress_id', '=', session('game.progress.id'))
->orderBy('created_at', 'DESC')
->get();
}
/**
* Send chat message
*
* #param Request $request
* #return array|string
*/
public function sendMessage(Request $request)
{
$player = Auth::user();
$message = $request->input('message');
if ($message) {
$message = ChatMessage::create([
'player_id' => $player->id,
'progress_id' => session()->get('game.progress.id'),
'message' => $request->input('message')
]);
}
broadcast(new ChatMessageSent($player, $message))->toOthers();
return ['type' => 'success'];
}
}
Routes channels.php
Broadcast::channel(session()->get('chat.channel'), function ($player, $message) {
return $player->inRoom();
});
And in my Player class
/**
* A user can be in one chat channel
*/
public function inRoom()
{
if ((Auth::check()) and ($this->games()->where('progress_id', '=', session('game.progress.id'))->get())) {
return true;
}
return false;
}
When a player logs in, I store in session a chat room id which I would like to use as channel.
My vue chat instance is
Vue.component('chat-messages', require('./../generic/chat-messages.vue'));
Vue.component('chat-form', require('./../generic/chat-form.vue'));
const app = new Vue({
el: '#toolbar-chat',
data: {
messages: []
},
created() {
this.fetchMessages();
Echo.private(chat_channel)
.listen('chatmessagesent', (e) => {
this.messages.unshift({
message: e.data.message,
player: e.data.player.nickname
});
});
},
methods: {
fetchMessages() {
axios.get(chat_get_route)
.then(response => {
this.messages = response.data;
});
},
addMessage(message) {
this.messages.unshift(message);
this.$nextTick(() => {
this.$refs.toolbarChat.scrollTop = 0;
});
axios.post(chat_send_route, message)
.then(response => {
console.log(response.data);
});
}
}
});
But I keep getting
POST http://my-games.app/broadcasting/auth 403 (Forbidden)
Pusher : Couldn't get auth info from your webapp : 403

Answer 1

Error 403 /broadcasting/auth with Laravel version > 5.3 & Pusher, you need change your code in resources/assets/js/bootstrap.js with
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'your key',
cluster: 'your cluster',
encrypted: true,
auth: {
headers: {
Authorization: 'Bearer ' + YourTokenLogin
},
},
});
And in app/Providers/BroadcastServiceProvider.php change by
Broadcast::routes()
with
Broadcast::routes(['middleware' => ['auth:api']]);
or
Broadcast::routes(['middleware' => ['jwt.auth']]); //if you use JWT
it worked for me, and hope it help you.

Answer 2

It may be an idea to figure out whether your routes/channels.php file is doing as you expect. Maybe add some logging to see if that route gets called at all, and that your inRoom function is returning what you expect.

Answer 3

In case anyone still needs an answer, this worked for me.
Add to your broadcastServiceProvider.php
Broadcast::routes([
'middleware' => 'auth:api']);
add to your channels.php
Broadcast::channel('chat', function () {
return Auth::check();
});