2

For 4 days I have been trying to connect to a private channel. Combined all the possible properties that I could find, but nothing solved the problem. A deeper understanding of the issue is needed.

I am creating an application using Laravel Sanctum, Nuxt.js, Nuxt-auth. I need to connect to a broadcasting private channel.

At first I tried to create a connection using the @nuxtjs/laravel-echo package. After long attempts to configure the connection, I found that the PisherConnector instance is not even created if I set the authModule: true (Public channels connect perfectly). Having discovered that this package is not actively supported and the fact that I do not have full access to connection management, I decided to abandon it.

Then I tried to set a connection using Laravel-echo and then directly through Pusher. Nothing works, I get either a 401 or 419 error.

I have a lot of questions and no answers.

  1. When do I need to use laravel-echo-server?
  2. When do I need to use pusher/pusher-php-server?
  3. In which case do I need to connect to broadcasting/auth, and in which to api/broadcasting/auth? My frontend runs on api/login, but I don't want to provide external access to my API.
  4. I added Broadcast::routes(['middleware' => ['auth: sanctum']]) to my BroadcastServiceProvider and to routes/api.php too (for testing). I'm not sure here either. Broadcast::routes(['middleware' => ['auth: api']]) may be needed or leave the default Broadcast::routes()?
  5. What are the correct settings for configs: config/cors.php, config/broadcasting.php, config/sanctum.php, config/auth.php? What key parameters can affect request validation?
  6. Should I pass CSRF-TOKEN to headers? I have tried in different ways.
  7. When do I need to set the encrypted:true option?
  8. What middleware should be present in the Kernel and what might get in the way?

If I set authEndpoint to api/broadcasting/auth I get 419 error (trying to pass csrf-token does not help). If I set authEndpoint to broadcasting/auth I get 401 error.

I do not provide examples of my code, since I tried all the options in all configs. I also tried to learn the documentation for my issue on the Laravel site, Pusher.js, looked at examples. Various examples mention some options but not others, and vice versa.

I would be glad to any advice.

Andrej Koval
  • 43
  • 7

2 Answers2

1

I had the same issue as you. I had forgot to add the BroadCastingServiceProvider in my /config/app.php.

The app/Providers/BroadcastServiceProvider.php now looks like this:

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\ServiceProvider;

class BroadcastServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Broadcast::routes(['middleware' => ['api', 'auth:sanctum']]);
        require base_path('routes/channels.php');
    }
}

I have not added Broadcast::routes to any other route file.

This is what my Laravel Echo init looks like:

new Echo({
    broadcaster: 'pusher',
    key: 'korvrolf',
    wsHost: window.location.hostname, // I host my own web socket server atm
    wsPort: 6001, // I host my own web socket server atm
    forceTLS: false,
    auth: {
        withCredentials: true,
        headers: {
            'X-CSRF-TOKEN': window.Laravel.csrfToken
        }
    }
})

Without the CSRF-token the endpoint will return the 419 status response.

In my index.blade.php for my SPA I print out the CSRF-token:

<script>
    window.Larvel = {
        csrfToken: "{{ csrf_token() }}"
    }
</script>

Now, the /broadcast/auth endpoint returns a 200 response.

enter image description here

Albin N
  • 1,401
  • 2
  • 16
  • 27
0

I had the same issue with Laravel & pusher. I have fixed using decodeURIComponent and moving BroadCast::routes(['middleware' => ['auth:sanctum']]) to routes/api.php from BroadcastServiceProvider.php

Also, add withCredentials = true.

const value = `; ${document.cookie}`
const parts = value.split(`; XSRF-TOKEN=`)
const xsrfToken = parts.pop().split(';').shift()
Pusher.Runtime.createXHR = function () {
                    const xhr = new XMLHttpRequest()
                    xhr.withCredentials = true
                    return xhr
                }
const pusher = new Pusher(`${process.env.REACT_APP_PUSHER_APP_KEY}`,
                    {
                        cluster: 'us3',
                        authEndpoint: `${process.env.REACT_APP_ORIG_URL}/grooming/broadcasting/auth`,
                        auth: {
                            headers: {
                                Accept: 'application/json, text/plain, */*',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-XSRF-TOKEN': decodeURIComponent(xsrfToken)
                            }
                        }
                    })

I hope this helps a bit.

shud L
  • 36
  • 2