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
08. Sanctum API requests
Episodes
01. Introduction
02. Realtime Basics with Nuxt and Laravel
03. Private channels
04. Broadcasting to others
Transcript
00:00
Before we go ahead and look at broadcasting and listing to a private channel, it's super
00:04
important to work out what's actually happening now that we're authenticated with Sanctum. Now, we know that when we send that standard request down to go ahead and push a public event, we just use fetch within Nuxt, make a request down to the endpoint under our API that we want with our base URL. Now, this isn't quite going to work anymore. Let's make sure we have our
00:27
network tab open and hit send request. You can see that we actually get a 419 status back. This is basically a page expired. Now, the reason that this is happening is the way that Sanctum works is when we go ahead and hit any page in our application, this is going to go ahead and set off a cross-site request forgery token cookie. That comes from the endpoint that
00:49
Sanctum provides, and we've already seen this over in our course. So what we now need to do for any further requests going forward, we need to specifically use the composable from this package to send any requests down. Let's switch this over now so we can get it to work, and then we'll move over in the next episode to start looking at private events. Okay, so instead of
01:14
using fetch, what we're now going to do is somewhere up here, create out a Sanctum fetch value, and we're going to use the use Sanctum client composable. Now, this is a wrapper around fetch, but the only difference is this will then send down a cross-site request forgery token so all of our requests now work. So any requests going forward that we send down to our application, we're going to use this.
01:42
Now, I've called it Sanctum fetch, but you could just call it fetch if you wanted to. It's entirely up to you. I've just named this so we know the difference. So what we're going to do now is swap this over, because it's a wrapper, the API is very similar, but we can get rid of the base URL because remember we already have that configured over in our NUX configuration under Sanctum. So because
02:02
this composable comes from this package, it will use this base URL. So we can get rid of the base URL, we can keep the method here, and this should just continue to work. So you can see now that we're successfully sending requests down, the cross-site request forgery token cookie gets refreshed with a new value, and this is now working. Now that doesn't help us much with authenticated requests
02:24
and verifying that we can access a private channel. We're not at that stage yet, but this is a really important thing to note when we're sending authenticated requests down from Nuxt to our Laravel APIs. So now that we've got that out of the way, let's go over to the next episode and broadcast an event to a private channel and attempt to listen to it.
12 episodes•1 hr 2 mins•6 months ago
Overview
Using Reverb and Laravel Echo, let’s add real-time broadcasting to a Nuxt SPA, driven by Laravel.
We’ll start with the basics of public channels without authorization. Once we’re set up and able to broadcast to all clients perfectly, we’ll dive into authentication and authorizing private channels by modifying how Laravel Echo authorizes with our API.
By the end of the course, you’ll have everything you need to start adding real-time broadcasting to your Nuxt/Laravel applications.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!