How to authenticate for Pusher through Laravel Passport (Part 1)

Photo by Cristina Gottardi on Unsplash

Imagine you have a Laravel application, an iOS application and some data that is pushed between those applications. The iOS application needs to display data from the Laravel application as fast as possible (realtime). Here is where Pusher comes in handy. In this first part of a 2 post series, we will setup Laravel to handle authentication requests with Laravel Passport and we will configure Pusher to send events.

I created the following diagram to illustrate the process:

1. The iOS application tries to authenticate to a private channel. This is done by requesting access from the Laravel application.
2. If authentication succeeds a socket token is sent back to iOS.
3. With the socket token iOS can subscribe to a private channel in Pusher.
4. If Laravel sends an event out over a private channel, iOS is able to receive it😃

This all seems fairly simple but the authentication process was a bit harder than expected. Since I couldn’t find any good tutorial on how to authenticate through Laravel Passport, which implements oauth, I thought I would write a simple tutorial.

Setting up Pusher

To use Pusher as broadcast service you can create a free account here. Create an application in Pusher named laravel-pusher e.g. When the application is successfully created you will the various code to implement Pusher. Search for the .env implementation. Keep this open cause we will use it later on.

Setting up Laravel

Setup a new Laravel project using the following command:

$ composer create-project laravel/laravel laravel-pusher

This will create a directory laravel-pusher with a fresh Laravel project. Next we will install Laravel Passport and the Pusher dependency:

$ composer require laravel/passport pusher/pusher-php-server

For the sake of brevity I will not explain the whole installation for Laravel Passport but here is the installation guide provided by the documentation.

If we open up .env we will see various environment variables. The ones we are looking for are the following:

PUSHER_APP_ID=PUSHER_APP_KEY=PUSHER_APP_SECRET=PUSHER_APP_CLUSTER=mt1

Now we go back to the Pusher website you should still have in your browser and copy paste the code from Pusher into your .env file. The PUSHER_APP_CLUSTER variable is not provided by Pusher but fill in the cluster you have selected during creating the Pusher application.

Another important step is to set the BROADCAST_DRIVER to pusher .

Since the iOS is going to request access to subscribe to Pusher, we need to create a HTTP route where we handle the authentication request. We will create the route in the routes/api.php. I added one route to the file:

Since the route is placed in the routes/api.php file it gets automatically prefixed with /api. The full path will be /api/broadcast/auth.

This route points to a controller which doesn’t exist yet. Create the controller:

php artisan make:controller Api\\BroadcastAuthController

This will create a folder named Api within app\Http\Controllers and the controller itself. The following method will authenticate a request from the iOS app:

In this method we will call the Pusher library directly with the incoming channel name and socket id. The socket_auth method will create a socket token we can use in future requests from the iOS application.

Frontend

We will create a simple text input to send messages to Pusher.

Enter a message to submit

Go ahead and create a beautiful web page with a fancy theme or copy my form HTML into your welcome.blade.php

Next we will create the route we referenced in the above HTML, in our web.php:

When posting to /broadcasting we will send an Event with the input text. To send an event to Laravel we can create a separate class for that:

php artisan make:event SendMessage

In this event we will set a class variable called $message which will be available for the iOS app. Remember that all public variables in a Laravel event will be available for applications who are listening for the event. The content of the class will be:

This will send an event in the channel messages with the name message.sent . The content of the message can be found in the $message variable.

Open up the debug console in your Pusher dashboard and go test if you see any events incoming!

Pusher dashboard

This is part 1 of a serie where we are going to build two applications who can communicate to each other through websockets. The focus hereby is on authenticating through Laravel Passport. You can find all code from this tutorial on GitHub.

Sjors van Dongen is a Dutch guy with a passion for development, entrepreneurship and personal growth. He’s currently working on his startup for digital visitor registration software Incheckert✅