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.

Episode summary

In this episode, we're building out a dedicated login page for our app. First, we set up a new Login view component and register it in our router, so the app knows where to find it. Along the way, we also create a reusable PageHeading component that takes a title as a prop, giving us consistent headings across different pages. We hook the login link in our navigation to this new login page, so users can actually get there from anywhere.

For the actual form, we move over our earlier login form and logic from the home page, tidy up the layout, and plug in those pre-made styles from the GitHub repo to make it look much nicer. We also make sure to bind our inputs for email and password, and display any errors right below them for better UX.

Next, we wire up the login form to actually log the user in, and after a successful login, we handle redirecting them straight to the dashboard page. We show how to do this programmatically with the router. For finishing touches, we do a quick clean up, remove the unnecessary code, and make sure everything works smoothly.

By the end of this episode, we've got a fully functional, good-looking login page with error handling and redirects, setting us up nicely for the rest of the authentication workflow!

Episode discussion

No comments, yet. Be the first!