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
08. Sanctum API requests

Episodes

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

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.

Episode summary

In this episode, we hit a little speed bump when trying to make API requests with Laravel Sanctum. First, we notice that our standard fetch requests from Nuxt are no longer working as expected after setting up authentication with Sanctum — we get a pesky 419 (page expired) status back! This happens because Sanctum uses a CSRF token (that it sets on first page load), and our fetch requests aren't automatically sending it.

To fix this, we switch to using the useSanctumClient composable, which is designed to include the CSRF token with each request. From now on, anytime we need to talk to our Laravel API, we'll use this handy wrapper instead of the usual fetch, ensuring every request is properly authenticated.

We walk through updating our code, explaining why we can now drop the manual base URL (since it's already configured in our Nuxt/NUXT config) and showing that requests are now working, with the CSRF cookie being refreshed each time.

By the end of the episode, our API requests are flowing smoothly, setting us up for the next step: working with private event broadcasting. If you're scratching your head about 419 errors with Sanctum and Nuxt, this episode gets you back on track!

Episode discussion

No comments, yet. Be the first!