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
07. Basic authentication with Sanctum

Episodes

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

Transcript

00:00
To be able to authenticate and listen on private channels within Nuxt, we obviously need to be able to sign into an account and have a user. So let's take five minutes just to set up some basic authentication on our client using Laravel Sanctum on the back end, and then we can go ahead and start to look at private channels. Before we do anything, let's go ahead and create out a
00:22
user in the database. So we'll go ahead and use the user factory here, create our user, and I'm just going to swap over some of the details here. Let's swap over the name here, and I'll just keep everything else as it is. By default within the user factory within Laravel, the password will just be set to password. The next step is going to be to install Laravel
00:42
Fortify, which is a headless authentication package for Laravel. You don't need to use this, but it just gives us all the endpoints we need to be able to log in, register an account, and all that good stuff. So we're going to go ahead and do a composer require on Laravel Fortify. That's going to go ahead and pull that in, and then just to get this installed, we need to run
01:00
the php artisan fortify install command. Okay, so now that we've done that, if we run php artisan root list, you'll notice that we've got a bunch of roots here that we can use to authenticate, reset password, all of that good stuff. You might already be using Fortify in your applications, in which case you'll know what to do. Either way, we've now got a login endpoint which we can use
01:23
to log a user in. Now, when we ran the php artisan install API command earlier, that went ahead and installed Laravel Sanctum. We're going to go ahead and configure Sanctum now so we can send a request through from the client side and actually authenticate using cookies. If this is a little bit fuzzy, don't worry. As we get to sending the request down from the client, I'll explain how
01:46
this is all working. Okay, so we want to configure Laravel Sanctum. So we're going to come over to our env file. The first thing that we're going to do is look for the session domain here and we're going to set that to realtime-nuxt-laravel.test. Next up, we're going to go over to config and Sanctum which will have been published for us and we're going to look for the stateful domains
02:06
section. When we make a request through to our client side and we have a stateful request for a user, e.g. they're signed in, we need to add the domain that we are working with to our Sanctum stateful domains list. So don't worry too much about all of this. This will just break these up and add some sensible defaults. We just want to come over to env and add this somewhere in here
02:28
with the realtime-nuxt-laravel.test domain but really importantly with the port for the client. Now that we've done this, we need to go ahead and configure cross-origin resource sharing or CORS. So we're going to go and publish the config for this. So let's say config publish CORS and that will create a CORS config file inside of our config directory. So the first thing
02:52
that we're going to do is change over supports credentials to true. That's pretty straightforward and obvious. We need to be able to send credentials down using CORS to get this authentication working. The second thing we need to do is add to our paths any of the paths that we want to hit. For our API, that's not a problem. It's already included in here but Laravel Fortify which we've
03:13
just installed gives us a login route which is technically a web route. We can use it for both web and API like we're doing. When we hit this login route a little bit later from our client, this will create a cookie, an authenticated cookie for us which we can then pick up on the client side to show that on the client we're authenticated. So we're basically just taking cookies
03:34
from these API requests, setting them as cookies on the client side and then we then have sharing of cookies between client and API. So we're just going to add login there for now but if you continue to add this you need to add more. Okay so last of all we're going to come over to our bootstrap app file and just under the middleware section we're going to enable the stateful API
03:56
just in here and that should be done. Okay so if we have any issues with this we'll come back to it. Now we need to work on the client side. So what's the best way to do this? Well the package that I'm going to use here is Nuxt Laravel Sanctum. It works really really nicely. Very very quickly we can get this installed and start to make requests down to that login endpoint to be authenticated
04:16
on the client side. We have other courses that cover this as well if you want to dive into it a little bit more deeply. Okay let's head over to the installation section and get started. So we'll go ahead and pull this in as a Nuxt module. So let's go ahead and pull this in and what that will do is install everything for us and if we just check out our Nuxt config file
04:36
that would have installed that for us as a module just down here and that's pretty much it we're ready to go. We just need to point this to our base URL for our API. So we're going to go ahead and bring in the Sanctum configuration option here. We're going to pull in the base URL which we know already comes from process.env and API URL and we are done. So you can configure this more
04:59
check out the documentation if you need to do that but we can now start to make some requests. So what I'm going to do is in the root directory here create out another directory called components. This will auto register these within Nuxt and I'm going to create out a view component in here for our overall navigation. This should just be where all of our authentication stuff
05:19
lives. So let's go ahead and include this on our app page just down here. So let's pull this in at the very top and now that we've done that we can start to build out what we need here. The first thing that we'll do is pull in all of the things that we need to authenticate and check if a user is authenticated and these come from the use Sanctum auth composable from the package that
05:41
we've just pulled in. So here are the methods that we can pull in. We've got login which will obviously log a user in. We've got the user which will give us all the details about the authenticated user. We've got an is authenticated flag which will tell us if we are authenticated and we've got the ability to log out. Now we are going to add the ability to log out
06:00
so let's just hop back over to our cause and just add the logout endpoint here before we forget. Okay so now that we've got these let's go ahead and start to build out a really simple button which is just going to sign us in. We're not even going to build a form here we just want this to manually pass these credentials over. So when we go ahead and click on this sign in button we're
06:20
going to call login action. So what I'm going to do is just alias this login import as login action and then I can create out our own login method just down here which calls that login action and passes over a bunch of credentials. So for us the email address let's just check out what this is in here. I'm actually going to change this over and let's grab that email address
06:49
go ahead and paste that into the credentials section. The password here is going to be password when we generated that with the factory and let's just put this as a string and that should work so that should authenticate us. So what we could do down here is we could wrap this out in a div or a template tag and we could say well if we are not authenticated
07:10
so v if not is authenticated then we want to show sign in and then we could do a v else here and create a button that when we click it calls the logout method from this package. So let's go ahead and say sign out and then maybe if we are signed in we could create a signed in as we could grab the user and then name. Okay so let's just really quickly review
07:42
this so we've got the ability to log in which will send a request to our api with that base url we specified when we created this package that's alias to login action so we can use it here we have the ability to grab the currently authenticated user which by the way comes from the api root just here by default and then we also have the ability to check for authenticated
08:04
and the ability to log out as well. Okay so heading over to the browser we should now see a sign in button and our standard send request button let's head over to the network tab and again filter by fetch xhr and go ahead and hit sign in that will go ahead and send a request over to that login endpoint that was registered with fortify that has then gone ahead and fetched
08:26
from our api all of the user details and obviously that's been populated into that ref which we can then show in here and likewise we can also go ahead and sign out as well. Okay so that is pretty much authentication done now that we can go ahead and sign in we need to look at sending a request down that broadcasts an event to a private channel and how we listen on that private channel.

Episode summary

In this episode, we set up basic authentication for our Nuxt frontend talking to a Laravel backend, using Laravel Sanctum for API authentication with cookies. The driving goal is to make sure that our users can sign in, which is a must before we start working with private channels and real-time features.

Here's what happens step-by-step:

  • We start by quickly creating a user in the database using the Laravel user factory. By default, the password is just password.
  • Next, we install Laravel Fortify, a package that gives us all the API endpoints we need for authentication (login, logout, etc.). We pull it in, run its install command, and check out the new routes it gives us.
  • Then, we tune our Sanctum and application config a bit. This includes setting up the session domain, configuring the Sanctum stateful domains to include both the backend and frontend origins (including the client port), and publishing the CORS config to support credentials and allow the correct paths (like Fortify's login and logout routes).
  • After some quick middleware tweaks (so that API state works as expected), we turn to the client side. We pull in the Nuxt Laravel Sanctum module, point it at our backend API, and get ready to actually make requests.
  • On the Nuxt frontend, we scaffold a super basic nav component with login and logout buttons. No fancy form yet — just hard-coded credentials for now so you can quickly test the flow. Using the provided composables (useSanctumAuth), we wire up login, logout, checking if a user is authenticated, and display the logged-in user's name.
  • Finally, we test it in the browser and see that our sign-in and sign-out flow is working: clicking "Sign In" exchanges cookies, gets our user from the API, and lets us see that info right there in the UI. Sign out works the same way.

Now that authentication is working, we're set up to move onto the real goal: sending and listening to events on private channels. Onward!

Episode discussion

No comments, yet. Be the first!