Laravel Echo + Laravel Passport + CORS

Viewed 4825

Lately I've encountered an error with authentication in laravel-echo-server.

I've managed to set up an application with Laravel Passport + Vue.js, and endpoints protected by auth:api middleware working just fine.

However, when I try to authenticated user with Laravel Echo, I'm getting 405 exception in the log of laravel-echo-server.

In order to add authentication to the api endpoint of laravel-echo-server, I've changed the contents of BroadcastServiceProvider.php to
Broadcast::routes(['prefix' => 'api', 'middleware' => 'auth:api']); and here is how my laravel-echo-server.json file looks like

{
  "authHost": "http://192.168.225.128",
  "authEndpoint": "/api/broadcasting/auth",
  "clients": [
    {
      "appId": "APP_ID",
      "key": "APP_KEY"
    }
  ],
  "database": "redis",
  "databaseConfig": {
    "redis": {},
    "sqlite": {
      "databasePath": "/database/laravel-echo-server.sqlite"
    }
  },
  "devMode": true,
  "host": null,
  "port": "3389",
  "protocol": "http",
  "sslCertPath": "",
  "sslKeyPath": "",
  "sslCertChainPath": "",
  "sslPassphrase": "",
  "apiOriginAllow": {
    "allowCors": true,
    "allowOrigin": "http://192.168.225.128",
    "allowMethods": "OPTIONS, GET, POST",
    "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
  }
}

And this is how the echo server is configured from within the Vue.js app:

import Vue from 'vue';
import Echo from 'laravel-echo';
const io = require('socket.io-client');
import store from '~/store';
window.io = io;

if (typeof io !== undefined) {
    let authenticationToken = store.getters['account/token'];
    let authenticated = store.getters['account/authenticated'];

    let echo = new Echo({
        broadcaster: 'socket.io',
        host: window.location.hostname + ':3389',
        auth: {
            headers: {
                Authorization: (authenticated) ? 'Bearer ' + authenticationToken : ''
            }
        }
    });
    window.Echo = echo;
    if (! Vue.hasOwnProperty('$echo')) {
        Object.defineProperty(Vue.prototype, '$echo', {
            get() {
                return echo;
        }
        });
    }
    if (! Vue.hasOwnProperty('$io')) {
        Object.defineProperty(Vue.prototype, '$io', {
            get() {
                return io;
            }
        });
    }
}

Given the fact that laravel-echo-server spits out the 405 error, that means that all the data passed to the subscription service is correct, however, for some reason I'm getting method not allowed in the laravel-echo-server error log.

For clarification, I'm attaching the log itself.

1 Answers

I'm guessing that broadcast routes are not being linked.

You need to un-comment App\Providers\BroadcastServiceProvider::class in config/app.php.

You can confirm then when you run php artisan route:list and api/broadcasting/auth should appear there.

Related