Real-time with Nuxt and Laravel
This episode is for members only

Sign up to access "Real-time with Nuxt and Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
10. SPA websocket authentication

Episodes

0%
Your progress
  • Total: 1h 2m
  • Played: 0m
  • Remaining: 1h 2m
Join or sign in to track your progress

Transcript

00:00
So the first step to solving the problem where we're trying to make a request to that broadcasting auth endpoint, but it's actually sending a request to our client is to switch over the way that we set up Laravel Echo. So by default, this is just going to choose if we just imagine there's a
00:15
property that exists somewhere inside of this auth endpoint, that's going to send a request down to broadcasting and auth. Now that implies that it's going to be on the domain that we're currently working on, which is port 3000, we spoke about that in the last episode.
00:32
So let's look at how we can change this up. So what we can do now is override the authorizer that is invoked when we're attempting to access a private channel or listen on a private channel. So when we invoke this, we'll get the channel name that we're
00:49
trying to connect to into here. So we can do something with that. Then we want to go ahead and return an object in here that contains the authorize method.
00:59
So this is just the way that the API looks. Let's go ahead and define it out. And into this authorize method, when this gets invoked, we get the socket ID in, which we can define out here as a string, and we get a callback in here
01:14
that we call depending on whether that particular socket ID can access that channel, so let's go ahead and just define that as a function. Okay. So now that we've got this, what we want to do is send a request down
01:28
to broadcasting and auth on our API. So we specifically want to change around the location of this so it doesn't try to connect to our client. With that data, we're going to send down the socket ID and the channel name,
01:43
which we saw in the last episode. And then we are going to use this callback with false and the token in here or the entire response data. But effectively we want a token in here if we were successfully connected.
01:59
And then otherwise we want a callback of true and then some sort of error to be passed in. Now, I'm not sure why we call this callback with false. If we're successfully connected, it might come to me, but let's go ahead
02:12
and just roll with it because that's how it works. Okay. So how do we send a request down to our API? Well, we already saw this earlier over in here when we use the Sanctum
02:22
fetch method, which we've called Sanctum fetch using the use Sanctum client. So we can take this and now we're confident that when we send a request down to our backend, it's going to send across our cross-source request forgery information.
02:34
It will know that we're authenticated and that's exactly what we want. So over in our plugin, let's go ahead and pull this in. So I'm just going to pull this into the top here and we'll keep calling this Sanctum fetch, but of course you can change it over.
02:47
So we want to do a Sanctum fetch down to broadcasting and auth. Now this isn't going to work at the moment. We've got one more step to configure after this, but let's just roll with this for now.
02:58
So we're sending a request down to broadcasting and auth. The method here is going to be post. So let's set that. But now we additionally want to send down a body.
03:08
So let's go ahead and set what we need to send out. We looked at the network request earlier. So we know that we need to send a socket ID down, which we get inside of here. And we need to send down the channel name.
03:20
So let's go ahead and from the channel that we get in here, grab out the name. Okay. So let's just leave it like that for now and just see what happens. So let's go over to our network tab, give this a refresh.
03:31
And now that we are sending a request down to the correct place. So this is our actual API. Now with broadcasting and auth, you can see that it does send down to the correct place, but we get back.
03:43
If we just have a look at here, a cause error. Now that makes sense because if we just remind ourselves over in our cause config over in our Laravel application, we don't have broadcasting and all set in here. Now we're not going to do that.
03:58
But what we are going to do is we're going to change around the way that this actually works. I'm going to set up our channel definitions to be under our API namespace and prefix, and also use the sanctum middleware.
04:12
So let's just remind ourselves over in our API endpoints. We have this middleware or sanctum. We effectively want that to apply to our channels list as well. Now, where are these things defined?
04:23
Well, they're defined over in bootstrap and app. So you can see here, we've got this with routing, which passes in the channels location. And this kind of assumes that we just don't really care how we're authenticating.
04:36
So what we're going to do is we're going to comment this out and instead we're going to call with broadcasting. And we're going to define this how ourselves with any of the middleware and anything else that we need.
04:47
So the first argument, this is the location of the channels files. We can just pull that directly over from there. The second is going to be any of the options that we want for this route. So we're going to set a prefix here of API because we're
05:00
hitting our API to check this. And then we can define out any middleware. So exactly like you would normally do inside of your routes. So we're going to apply the API middleware and also the
05:10
auth sanctum middleware to this. So what we can now do is send a request down to not, if we just head back over to our client, not broadcasting an auth, API broadcasting an auth. So that prefix that we just added over in here now makes
05:28
that under that API namespace. So if we hop back over to our client, this request should now work without any cause issues because we're sending a request down to our API. Let's check it out.
05:39
Okay. You can see sure enough, this is being requested and we get back an auth token, which means we are successfully connected to that channel and we can pass this auth token into echo Laravel echo to say that we are authenticated.
05:55
Now let's just try and make this fail just so we can demonstrate what this looks like. So if we come back over to our API and head back over to our channels, let's explicitly not authorize anyone on this private channel
06:08
just by hard coding and false. We give that a refresh. You can see sure enough, we now get a 403 forbidden. Great.
06:16
So this is now working and authentication is working, but we need to feed this back into Laravel echo. So to do this under the fetch method or composable within Nuxt, what we can do is provide in an on response.
06:30
And let's just go ahead and define this out really quickly. And into here, we should get back our response data. And we also have an on response error. So let's define that out as well.
06:45
And into here, we will get a response as well. So on response, which means a successful request and a successful request and not a 403 forbidden. We are going to use the callback, which is defined up here
07:03
to go ahead and pass in false. Like I said, I don't know why we pass false in, but it doesn't really matter. That's what we do to say that we're authenticated. And then from the response, we just want to pass in the entire payload.
07:15
Now under a response that we get back here, we just have underscore data. And that response underscore data will just contain that token that we just saw in our network tab. So otherwise what we're going to do is do a callback on true.
07:29
And then we are going to pass in. Well, let's just pass in the response data or we could just do nothing. It doesn't really matter what we do here. So I'm just going to leave this completely empty.
07:39
Okay. Let's go back over and try this out. So I'm going to give this a refresh and we get a 200 status of okay. So we know that we're authenticated on that channel.
07:46
Okay. Let's go ahead and hit send request and you can see that it's now works. Now, if we hadn't have done that callback here, Echo wouldn't have known that we're authenticated.
07:54
So let's just try that again. And you can see it just doesn't work. So that was the whole purpose of sending this data manually, getting back the payload with the token and passing it back into there.
08:05
So we know that we're authenticated. Okay. So now that we've done this, we have successfully moved around our channel definitions under our API with our sanctum middleware.
08:15
Remember we did that over in our bootstrap and app file where we're just changing around the prefix and the middleware that applies to our list of routes. So when we send a request down with our sanctum details, this can get picked up and we can be authenticated.
08:30
And then we've gone ahead and just added to the client that we created earlier and just manually send a request down. So we hit the right place. And then of course, manually verified that we have the correct token.
08:43
So there we go. Now, any private channels that you create, in our case, it's a very basic one can now be properly authenticated when we go ahead and try to connect with Laravel Echo.

Episode summary

In this episode, we tackle the tricky problem of authenticating WebSocket connections from a single-page app (SPA) using Laravel Echo, especially when dealing with private channels and Laravel Sanctum.

First, we realize that Laravel Echo tries to authenticate WebSocket connections by hitting a default endpoint that matches the client's origin, which isn't correct in a typical dev setup (like localhost:3000 for the frontend and another port for the API backend). We walk through how to override Echo's default authorizer so it can correctly reach our API's broadcasting auth endpoint, sending the necessary socket ID and channel name for authentication.

You'll see step-by-step how to send off a request using our existing Sanctum setup, making sure things like CSRF tokens are included for proper security. There’s a little config tweak to ensure the request is POSTed to the right auth endpoint and that the request body contains exactly the data Laravel’s broadcaster expects.

But of course, things aren't quite done yet! We run into CORS (cross-origin resource sharing) issues, which we solve by ensuring the broadcasting routes are prefixed with /api and use Sanctum and API middleware. This makes sure our auth requests are handled the same way as our other API requests and gets rid of those pesky CORS errors.

After getting everything setup in both the backend and frontend, we confirm that we can now connect to private channels and get the expected auth token back. We test both success and failure cases (including when access is denied), and explain how the callback system lets Echo know if we’re authorized or not.

By the end, we’ve got a smooth SPA WebSocket authentication flow via Sanctum, and your app is ready to securely use private event channels via Laravel Echo. Any new private channels you add will 'just work' with this setup!

Episode discussion

No comments, yet. Be the first!