NuxtJS + Laravel8 + laravel echo server socket io = subscription_error

Question

I have this weird issue I can't fix with authenticating private channels. I am using Laravel 8, NuxtJS (SPA app), Redis, and separate Docker containers for everything.

When I am trying to listen in my SPA NuxtJs app for the private channel I get the following error:

42["subscription_error","private-robert-test-1",0]

I assume this is because of my echo confing in nuxt.config.js:

  echo: {
    broadcaster: 'socket.io',
    host: 'http://publisher-local.co.uk:8080',
    // authModule: true,
    // disconnectOnLogout: true,
    // token: this.token
  },

Then the call looks like this(in the ws tab in my browser):

42["subscribe",{"channel":"private-robert-test-1","auth":{"headers":{}}}]

I assume it should have something in the auth object. So I followed the documentation of NuxtJS Laravel Echo Server package and tried to set authModule to true. As soon as I do that I get this weird error:

Now I imagine that if it worked then auth module would simply add a token to the subscription message I showed before (the one with an empty auth key).

In Laravel I have already done this Broadcast::routes(['middleware' => ['auth:api']]); in the BroadcastServiceProvider.

Although I don't think I am even getting there.

This is my Laravel echo server config file.

{
    "apiOriginAllow": {},
    "authEndpoint": "/broadcasting/auth",
    "authHost": "http://publisher-local.co.uk:8080/api/v1",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "host": "redis",
            "port": "6379",
            "keyPrefix": "",
            "options": {
                "db": "0"
            }
        },
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        },
        "publishPresence": true
    },
    "devMode": false,
    "host": null,
    "port": 6001,
    "protocol": "http",
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "socketio": {},
    "subscribers": {"http": true, "redis": true}
}

Public channels on the other hand work just fine.

What am I missing here? Thank you in advance.

EDIT:

I have also tried creating a plugin for echo where I could populate information I need myself and it looks like this:

export default function ({ $echo, $auth}) {
  console.log($echo.connector.options.auth)
  let authData = {
    headers: {
      Authorization: $auth.strategy.token.get(),
      Accept: 'application/json',
      "X-Requested-With": 'XMLHttpRequest'
    },
  };

  $echo.connector.options.auth = authData;
  $echo.options.auth = authData;
}

So I do have the token now and other headers I can see them in the WS tab but it does not make any difference.

Answer 1

Probably not relevant anymore.. But if so..

You should update your version of laravel echo to v2* => https://github.com/nuxt-community/laravel-echo-module/releases/tag/v2.0.0-alpha.5