Winging A Laravel Comment System
This episode is for members only

Sign up to access "Winging A Laravel Comment System" right now.

Get started
Already a member? Sign in to continue
Playing
09. Scaffolding basic authentication

Episodes

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

Transcript

00:00
So I said that we were going to write tests for our post comment or our comment store but I've just gone ahead off camera and run test and you can see that we get a failure here now in itself that's not too bad because we can actually fix this we know exactly what I know exactly what the issue is I'm going to explain that to you now but this is going to get in the way of our tests
00:21
because what we're doing at the moment is under our web routes we're faking this user being logged in now tests are not going to like that because at this point the migrations of the database have not been run so it's not going to be able to log the user ring from that table so if we get rid of this our tests run really nicely our home controller is all good but that means that every time we go
00:41
between running our tests and manually testing this we're going to have to log in specifically using this id so what I'm actually going to do is very quickly now create out the register not registration but login functionality for this and log out functionality so we can very quickly jump in and test this of course if you're using a starter kit or you already have authentication
01:01
you don't really need to follow this but I'm going to go ahead and add it in anyway so let's create out two controllers let's create out a controller we'll put this under an auth directory and let's call this login controller and let's create another one here called logout controller we might add registration later it doesn't really matter so for the login controller and have I
01:24
done that wrong it should be fine let's go and make this invocable let's bring in our request here and let's validate this so I'm just going to do this sort of blindly for now but then we'll go in and we'll test this out so let's validate and say that the email is required and needs to be an email and we'll say the password is required and I think that should be it
01:55
then we're going to say auth and attempt I think it is it's been a while since I've done manual logging in this goes ahead and takes in just an array of credentials here so here we can just say request only email and password and then what do we want to do return redirect to the home page maybe okay so we'll leave it at that there's obviously stuff that we can do better
02:28
here but we just want this to be super simple same with the logout controller as well I'm going to go ahead and just fill this in really really quickly so let's go ahead and make this invocable and we're just going to say auth and is it logout let's have a look yep and we're going to return and we'll redirect to the home page again and again there's other stuff that we can do in here
02:54
as well but we'll just keep it super simple for now okay so let's register the routes for this so let's head over to our web routes and let's go down here at the bottom and we'll create out a root group specifically for guests so this is going to be for guests only and that's going to be the login controller
03:17
so let's say post in fact I'm going to change this over to a non-invocable controller I think it's going to be a little bit easier so let's say login and let's say login controller and let's say index give this a name of login.index or just login and then we'll have another route in here to post through and I'm just going to call this store just to keep the
03:45
the sort of conventions restful conventions but you can call it anything you like so this is going to be store and then we're going to have the index here which will show the view so let's return login or auth.login and we don't need a logout view obviously we can just do that straight from the menu so let's go ahead and create out the auth login view and
04:16
let's just write login in here for now and let's go back over to our web routes and we'll check this out okay so this is only applicable to guests and we also want to be able to post through to logout and we'll just reference our logout controller because that just has one job one job okay high chance that something has gone wrong here but let's go ahead and just
04:46
check this out okay yeah so let's have a look what we've got here in our logout controller and okay great so let's test logout first so let's build the ability to actually log out so that's over in app.play.php where we have our navigation here this actually needs to be a form and not an anchor because we need cross-site request forgery protection here so we're going
05:11
to have a submit button in here with logout the action of this is going to be logout if we named that properly we probably didn't let's say logout and let's go back over to here logout and the method here is going to be post which means we can protect this without cross-site request forgery protection it's pretty much going to look exactly the same and what you can also do is add a cursor
05:44
pointer on there so it looks like a link so when I click this I'm logged out we don't see anything in the navigation but now in the navigation what we can do let's find that we can now have instead of the auth directive we could have a guest directive and in here we could have some list items for logging in which we can link to because we now have the page for that so this is going to
06:11
go through to login and we should be good so there we go we're signed out but we can click login and go through to that page so let's go to our home page still the template for this head over to login paste this in and say login that is going to be our form just here we'll pull that out now really really quickly we'll just make it super basic and submit that through to our controller
06:33
and we should be good so the method here is going to be post the action here is going to be the same action because it's the same routes that's just going to be to login we're going to of course include our cross-site request forgery protection in here let's just steal the design over from our comments for the input that we created for our text area i just want to keep things looking
06:55
fairly similar so we'll have a label here for the email address and let's go ahead and say sr only paste this in i'm going to change this over of course to an input and this type is going to be email and the name here is going to be email id is going to be email obviously we don't have rows here and this is going to be like eg alex at codecourse.com and we don't need to do that
07:26
so that should look a little bit better great and why don't we have a header again i'm going to take any of these headers just to keep this as consistent as possible this is going to be login okay so let's set this with a margin top of six and yeah that will do okay so next up to the password so this is for password change the text over type is going to be do we have a type of
08:03
password yeah we do don't we yeah password password and then we'll just get rid of the and then we'll just get rid of the eg for the placeholder in fact we'll get rid of the entire placeholder class is going to be exactly the same and let's have a look and what have i done there so yeah let's just actually grab these i deleted them by accident
08:27
okay great so we need some spacing between these so what i would typically do i wouldn't add this to the i wouldn't add like a space y3 to here because what that's going to do is it's going to create a gap where the cross site request forgery token is so instead i'm just going to wrap all of the fields that i've got here that i want to space out specifically to keep some
08:47
consistency with a space y of say three like that and then down here underneath that i'm going to go ahead and create a button to submit this and we can just steal the really bad button design from over here and we can say log in and we can add a margin on the top either of that or we can wrap this in a separate div with a margin because we don't necessarily want that to be the same as the
09:15
these two so let's actually bump this down a little bit and yeah i think that's fine it doesn't look great obviously but we can deal with it for now okay so let's submit this and just see what happens so let's go alex at codecourse.com my password was password let's hit log in and yeah great it worked the first time which is rare and we are now signed in we redirect it over but
09:40
obviously what happens if this doesn't work so let's go and just say alex at codecourse.com and give the wrong password and you can see that sure enough that just still redirects us back so what we want to do here so we're in the login controller we want the email and the password here what can we do i have a feeling there's a validation rule for checking if this no there probably isn't
10:08
is there so what we're gonna have to do in this case is just an if statement so we'll say if not auth attempt so if something goes wrong there we're going to redirect back with errors and we can attach an error to the email field and rather than use language files or anything like that let's just add this directly in so we'll say those credentials do
10:37
not match a record i think that's pretty much what everything says hit login that doesn't work that's good we're redirected back use a dummy password and yet we're redirected back again so last job is just to go ahead and fill in the errors so to do this we use the error blade directive that goes ahead and gives us out a specific message for this thing so let's
11:04
create a paragraph in here slight margin on the top and let's say text red 500 to test this out there we go and we can make that text small as well again design not great but at this stage we don't really care let's say password there we go so both of them are working let's go ahead and introduce an incorrect password and there we go the credentials do not match our record so
11:35
actually one more thing we're losing the email address every time we resubmit so for this we're going to say value and caps value and output old email that should do the trick so now if we type in our email address and we get our password wrong that still doesn't work so why is that let's have a look here value old email so I should keep that in there so what is happening here
12:07
just wondering if we need to do something else here let's try with input I think that's it let's go and just pull these down so they're a little bit tidier and let's just try that out so I think that yeah I had a feeling it was the manual redirect here let's try that there we go perfect so by default if validation fails it will always redirect back
12:31
with the input otherwise it won't so if I click log in there the values here will be saved already if that did go through okay so we should now be able to log in and we've implemented probably the most basic authentication system in Laravel now but that now means that we won't get an error with our test which was the whole point of doing this and again apologies if you really want to
12:56
use a starter kit for this and didn't want to implement north yourself but you know a couple of lessons here to be learned so our tests are now running and in the next part we truly now are going to get on with testing the functionality that we built a little bit earlier with posting comments

Episode summary

In this episode, we take a quick detour from our original plan to write some tests for our comment functionality. Instead, we identify an annoying issue caused by our temporary approach to "faking" authentication in our routes. This hack was breaking the tests because the database migrations hadn't run yet, so users didn't exist at that point.

To solve this, we decide to scaffold a super basic authentication system—just a login and logout setup (no registration for now). The episode shows the entire process: setting up new controllers for login and logout, writing basic logic for authentication, and handling redirections. Then, we set up the routes and create a very simple login form in the view, keeping the styling consistent with the rest of the app.

We also adjust the navigation to show the correct login/logout options depending on whether the user is logged in or not, and make sure CSRF protection is in place. Some UX touches are added, like keeping the entered email in the form when login fails, and neatly showing error messages for invalid credentials.

By the end of the episode, we've got a functional minimal authentication system that works with our manual testing and, crucially, lets our automated tests run without error. Next up, we'll finally dive into testing our comment posting logic with this improved setup!

Episode discussion

No comments, yet. Be the first!