sbkl's avatar
Level 17

Laravel passport with pusher: private channel authentication using react native

I want to setup a private channel with pusher for broadcasting events between my laravel app and my react native app.

I'm using laravel passport for the oauth server.

And here is what I have implemented:

react native pusher channel subscription:

let token = 'oauthUserToken';

    var pusher = new Pusher('pusher_key', {
        authEndpoint: 'http://url.com/broadcasting/auth',
        auth: {
            headers: {
                'Accept': 'application/json',
                'Authorization': 'Bearer ' + token
            }
        },
        cluster: 'ap1',
        encrypted: true
    });

var channel = pusher.subscribe('private-hello');

Event class:

class HelloPusher implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('hello');
    }
}

routes/channels.php:

Broadcast::channel('hello', function () {
    return true;
});

BroadcastingServiceProvider is commented out in the config/app.php.

And I keep having Pusher : Couldn't get auth info from your webapp : 500.

When I use laravel Echo and Vue on the webapp, private channel subscription is working properly.

I believe it is related to the fact the Broadcast event can't find any user logged in. Any way to use the oauth authorization from laravel passport instead?

Thank you

0 likes
6 replies
mtflud's avatar

Laravel already does that for you. As the documentation states, the "broadcast" routes will automatically place its routes within the web middleware group; however, you may pass an array of route attributes to the method if you would like to customize the assigned attributes. To use them with Passport you would have to use something like this in your BroadcastServiceProvider:

Broadcast::routes(['middleware' => 'auth:api']);

Also, make sure you are using pusher as your BROADCAST_DRIVER in your .env file. Your pusher implementation on react native's side looks OK. Hope this helps!

1 like
sbkl's avatar
Level 17

The thing is I need to use the broadcast routes for both web and api guards. How would you manage that?

onemorething's avatar

Hello @sbkl

I have an electron app and I'm trying to use pusher with laravel... Did you find the solution for this?

mzk_ky's avatar

hi @sbkl if you don't mind, can you share how to make pusher works with Laravel + Vue with CORS configuration? i've try few methods but not works

Please or to participate in this conversation.