Authentication with Laravel Sanctum and Vue
This episode is for members only

Sign up to access "Authentication with Laravel Sanctum and Vue" right now.

Get started
Already a member? Sign in to continue
Playing
15. Building the login page

Episodes

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

Transcript

00:00
So to build out a login page, of course, we're going to need another view. So let's create out a view component in here called login, and we'll go ahead and register this over in our router index. So let's just grab one of these that we have here, pull this down.
00:14
We're going to call this login and give it a name of login. And of course, reference that new login component that we've just created. Okay. So before we do anything with the login page, I'm going to go ahead and create
00:25
out a separate component under our components directory, and this is going to be a view file, which gives us a nice page heading that we can reuse on any of our pages. So let's head over to page heading and let's just start this out.
00:38
So I'm going to create out a header here, give a div in here and let's add in a title prop, which we'll define just up here. So let's say define props and we'll go ahead and pull in that title, which is going to be a string.
00:51
Okay. So in here, let's start to start this text up. We'll make this bold and three XL. Let's set the leading to tight and we'll set the tracking to tight as well.
01:03
And we'll go ahead and set the text to great 900. Okay. So now that we've got this, let's get rid of our scoped styles just in here. We're not going to need them.
01:12
And let's go over to our login page and pull this in. So let's say page heading and the title here is going to be login. Okay. Let's go over and we will head over to that login page.
01:26
There we go. Great. We've got a nice header. Okay.
01:28
So now that we've got our login page, we can pretty much link to it anywhere that we need. So again, over in our navigation, let's look for anywhere we have a login, change this over to a router link and just hook these up.
01:42
So let's say to name login, let's find the mobile version of this and we'll do the same thing. Route a link and swap this prop over. And again, this is going to be exactly the same thing to log in.
01:57
Great. So now we can, as well as logging out, which we don't have yet. So we'll do that manually. Let's go ahead and clear out our session.
02:10
And now we should be able to hit login to come through to that login page. Okay. So once again, I have some pre-made styles that you can grab from the GitHub repository.
02:18
If we go ahead and just indent this page heading here and then paste in all of them styles from the GitHub repository, let's go over and you can see that we have a much nicer page and in fact, we don't need the header here. We are going to use this.
02:31
We're going to use this for the dashboard, but at least we've created it. So we'll get rid of this just for now. Okay. So we've got a sign in page.
02:39
Let's go ahead and actually bump down the padding in here. So let's set this to eight. Okay. So we've got everything in here that we already know that we can use.
02:51
So we're going to go over to our home component and just start to pull everything over. So we'll take this login function. We'll take the form.
02:59
We'll take pretty much everything from here, and we're going to get rid of this and also get rid of our entire main content inside of here, because we already know what to do. Instead, we'll go ahead and create out a page heading with that component
03:13
that we already created, and we'll just give this a title of home. So over in the login component, let's go and paste in everything that we had before, and let's just check out the homepage, which we haven't linked to. Looks good.
03:27
Click to log in and we can start to hook everything up. So let's look for each of these inputs. We've got an input for this email, so we can hook this up to form an email. We can display the errors in a second as well.
03:40
Let's do the same thing for the password. So B model and that's form password. And of course, when we submit this overall form, we just want to call login. So V on submit, prevent that default behavior of actually submitting, and
03:54
then go ahead and invoke login. Okay. Let's go ahead and see if this works. So let's hit sign in and yeah, sure enough.
04:01
We're logged in now. Now, of course we need to redirect here. We're going to redirect over to the dashboard page, which is really important. So let's go ahead and log ourselves out, implement some validation, and
04:12
then we'll get that redirect done. So let's log ourselves out by clearing out our session. Let's go and look at validation, which again is incredibly simple. We just want to do an if statement on any of our errors for the email.
04:25
And if that's the case, we just want to output in here errors and email and the first one. We do exactly the same thing for the password. Switch this over down here.
04:39
And we should be done. Now, the last thing is we have a register link down here. I'm probably not going to hook it up, but you can go ahead and do so if you want to. Okay.
04:47
I'm going to get rid of this, hit sign in and yeah, our errors are coming through. Okay. So now that we have this, let's look at redirecting once we've signed in. So we're going to redirect over to the dashboard page.
04:59
So over on our dashboard page, let's bring in that page heading and we'll set the title to dashboard. We can get rid of these scope styles as well. Over in our login page.
05:12
Once we have logged in, we then want to redirect somewhere. So let's go ahead and just console log out redirect for now, just to make sure that this is actually working and then we'll do the redirect. So pulling open our console, let's go and sign ourselves in.
05:32
And there we go. Great. So this is where that redirect needs to happen. Now to do that, we want to go ahead and import our router.
05:39
So let's import our router here from index.js under that router directory. And then under here, we want to say router push, and then give exactly the same object that we would normally do within a router link. So in our case, we want to redirect over to the dashboard.
05:56
So we just push that to the router stack and that's going to move us over to that page. Okay. Let's go ahead and just try this out.
06:02
So again, I'm going to have to manually clear these out because we've not got to logging out yet. And let's sign in and there we go. We're redirected.
21 episodes•1 hr 35 mins

Overview

Learn how to authenticate with a Laravel API from Vue using the Composition API.

We'll start by setting up a fresh Laravel project with Sanctum and Fortify, configure everything step-by-step, and then implement the ability to authenticate from Vue with a simple auth module — thanks to the flexibility of the Composition API.

In the second half of the course, we’ll create our own beautiful starter kit with more features, including registration and middleware to protect routes.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.