Laravel E-Commerce - User Authentication - Part 14

what's up guys welcome back and in this video I'd like to take a look at user authentication for our application so at this point for regular users we don't have any authentication in place and all users are guests by default the advantage of this is that anyone can check out but there are several disadvantages one for returning customers they have to keep entering their information if they want to play some more orders and two it's just generally a good idea to have a user dashboard which has information specific to that user if you look at any e-commerce application you'll see that they all have the ability to log in as a user if you take a look at this article over here which I'll link to below it gives several approaches as to how to handle your checkout flow for an e-commerce application I'll definitely be taking some pointers from here but for our application we'll give the ability to log in and also to check out as a guest let's take a look at how Amazon does it go into Amazon just pick some random product at the cart this is all outside of login but once we go to the cart we can still do this other guest but once we proceed to checkout it's gonna ask you to login so and after you login it will bring you to the checkout screen we will follow a workflow like this for our application so you might know that laravel already has some auth scaffolding in place so let's go ahead and make use of that so PHP artisan make off now if you go into our application you might be used to using this like with a default installation but if you just call it a route it actually works it's just the styling doesn't work because we're not using bootstrap but if we go to register this actually works it's making the user call it user user easier calm password password and if you register again that worked but the default functionality is it redirects you to this home route which we will fix later on but I just want to show you that it does work out of the box and we're gonna be making use of it I also want to show you that this works well with Voyager so if you're going to our admin back-end so that didn't work because we're still logged in as a normal user so if we log out of here and try to go to admin now this should work okay cool so let me just log in here and if we go to our users here you'll see that here's a user that we just created and it added the appropriate role to it you can edit it as expected and yeah it works really well with Voyager let me log out of here and show you a few more things back to here we go back to login this actually works as well forgot your password so if you go to use let me just put the user in but before I do this I'm gonna setup male trap so if you're not familiar with male trap it's a service that allows you to catch emails and display it in here I use it all the time definitely check it out but in our environment file I'm just gonna paste my my credentials in here and after that I'll show you that male trap works okay I put my credentials in there and if I do this that should work and if I check mail trap there is the reset password and we click on it and it should work so if I do this if I change the password - password to reset that password that should work again it redirects here but we'll change that later on if I log out and log back in so a user at user comm password - okay so that works cool so here's what I want to do I want the user to know what state they're in depending on if they're logged in or not so if they're not logged in I want to show the login and register links and if they are logged in I want to show the log out link and maybe later on we'll add a menu which allows them to access their dashboard for example if we go in to forge right now I'm not logged into it so it's showing the login and register menus but if I do log in then it shows this menu which allows you to log out for analogous to logout but later on we might do a menu like this I would also like to separate our menu out a bit I want like a left menu here so here which has our actual application menu so I'm gonna put shop about and blog in this left menu and on the right one will keep cart but we'll also add the register and login buttons menu items in here and like I said we'll leave cart here because every ecommerce application I've seen has the cart in the top right so we'll leave that there also for this right menu I am not going to make it dynamic because there's gonna be too much application logic in here like it's gonna be login and register and if you're logged in I want it to be log out so I don't think that the admin really needs to control that so I'm gonna make that not dynamic so let's go ahead and do that into our code and the musical landing page so first thing I wanna do is just shorten this title so we have more room in the menu okay and like I said I want a left menu and a right menu up here one up here and one to the right over here so let's go ahead and make a div right here so it's gonna be top nav left and we'll end it there you just indent that and we'll make another one called top nav right and like I said I'm not gonna make this right one dynamic so instead of including this line will just include it the normal way so include partials top menus that main call it main right so let's make that right now so resources use partials menus it's just this is duplicate this one let's call it main right and like I said we're gonna hard code these in so this one's gonna be [Music] register and we'll call it signup let's make one for login so let me login and we'll call it login and we'll do one more for the cart I believe it's called carton index it's name it cart and let's make sure we have that logic to show the card number of items in the cards we'll just copy that place that in there and then we no longer need this okay let's see how that looks probably look really weird because I didn't touch the CSS yet okay so at least this one's to the left and okay let's work on our CSS so let me just run my watch and most of the CSS should be in the header that sass should be down here in the header alright let's add one for that top nav left and top nav right like we did okay top and now left display flex and same for top nav right let's play flex and a line items Center okay it's looking better let's add some margin after the logo here so that should be where's that summer up here right here a logo it's two margin right 58 pixels there that looks it looks better and let's give this some spacing so let's go ahead and do that so right here I don't want to do this anymore because if you look at the menu episode I did a few episodes back if you do this then if you add menus in the admin there's not gonna be that dynamic so I just want to add margins in between the list items you save that and let me just add a new one here for Li and it's to margin-right 38 pixels and for the last one I don't want any margin see how that looks okay that's looking good and it's do the same thing for this so we don't need any of these anymore okay cool let's quickly get rid of this in the admin so here I mean let me just remove that from the menus so Tools menu builder main we don't need this okay see how it looks alright that's looking good to me now if you go into another page the menus gonna be screwed up because I have this logic in two places which I shouldn't have done but see it doesn't show the left menu here so let me just quickly fix that believe it's in navya so same deal here let's make a top nav left just put that here let's make a top nav right let's copy this but instead of this we want landing this cool see how that looks and we are good let's check the links if they work they do so that's the signup to check the login okay like I said I'm not gonna style this yet but if we go into our code it's in here resources views our login and if I just change this the lstart app is the one that Larry Bell provides but ours is just called layout which is right here or somewhere there lives so I feel changes to layout that should actually bring the header and the footer in so there you go still same for register so it should be in here change to layout again and if we go to register it looks half-decent now let's make it so that when we're logged in this change to logout back into our code where's this this main right so right here so we want this sign up and log in to show up if we're a guest and if we're not a guest so else we want me log out to show up but we can't just do and if here and guest sorry we can't just do a normal route we have to make it a form so let's see what laravel does in the original layout that it provides so where's the layouts that apically yeah so there should be a logout somewhere there it is right there just copy this and you also have to put the form so back to our menu let's just paste that in actually yes paste it in clean it up and let's make sure this is wrapped and in this title and if we did that correctly that should work so right now we are not logged in so these two links show so let's login user user comm password to login and let's just go back here and there we go let's log out see if that works and it does cool so now let's change the redirect as you saw it redirected to slash home and we don't want that that's pretty straightforward there is a controller up here at HTTP controllers called login controller off login controller and all we have to do is changed this to slash and that should redirect to the right place after we login and it does cool I actually want to make that a bit better let me show you what I mean I mean logout for a second and say we're shopping we go to this we're interested in buying this but when we login it's gonna redirect us back to the home page what I wanted to do is I wanted to stay on this page here so let me just show you well you really saw that so you know some you know it's gonna redirect to the home page like I said I wanted to redirect to the page that we were on so to do that let's make use of levels helpers and sessions so all we want to do is remember the page before we on the login page so let's go ahead and do this so in login controller let's override some of the methods from this trade so let's override this one which is just returning the view let's put it right underneath here and the only thing I want to add is put the previous URL in a session so session put let's call it previous URL and it's put in there's a helper called URL previous save that and now we also want to override this to use that previous URL but we can't just put it in here we have to override the let me show you there's another trait in here which is this is checking if that property exists if the method exists if a method exists called redirect to then use that but if it doesn't use this so let's make a new method called redirect to redirect to doesn't take any parameter in dump session get previous URL so if I just signed up that let me just show you what we get so if I log in here this should be the previous URL so it should be shop camera seven login user at user common password two and it is but we don't want this part of the URL we only want the slash shop slash camera seven so to do that all we have to do is make use of pH peace STR replace function and just replace that part with nothing essentially and if we do that that should work so let me just do this again this part means if this doesn't exist so that case would happen when we directly go to that URL and this should still work if it doesn't exist and it'll just go back to the home page so let's give that a try so let's go to lap top one and let's log in user user comm password to login and it redirects to the appropriate page cool and let me add that to the cart and show you how to require authentication before checking out it's pretty straightforward so right now there's no authentication in place so we can go to the checkout no problem but we can make use of the Revels middleware so we can't hit that checkout page unless we're logged in so it's really easy all we have to do is so for the checkout dot index let's call a middle layer and laravel has one called auth and now if we do that now if we try to go there it still works shouldn't work oh it's cuz we're logged in right yeah okay so if we're not logged in so at the current now this should bring up the login page because we're not logged in and it does cool now if we log in if hopefully lower Bell with directions to the checkout page and I believe that's the default functionality and it does awesome so let's change this because we're logged in and every user has an email address already so let's fill this in and make it read-only back to our code it's going to check out top blade up HP and right here for email let me just duplicate this and let's make it read-only and the value is gonna be the logged in users email so off user email see if that works there we go it's read-only because we're just getting that from the logged in user and later on once we build the user dashboard we'll fill in this information automatically as well but for now this is looking pretty good one more small thing I would like to take a look at let's look at the whole flow let's log out looks like I made an error here that shouldn't show so let's go to a menu right I believe main right yeah what'd I do wrong here yeah I forgot to do this if ya suppose just do that and if okay and let's go through this whole workflow like I said there's one more thing I want to show you and we'll fix it so let's buy an item as a guest I have to cart proceed to checkout so this page is we gonna have a few options one for checkout as guests or one to register right here so if you want to register we can click this name - let's do that let's do user to user to user user to user user to comm password password and I just want to show you that this redirects to that home page as well because by default it registers you and it logs you in and has has a different controller for that so yeah we don't want that we wanted to redirect to the checkout page so let's just change that there is a register controller here all we have to is changes to slash checkout and let's give that another try laptop 12 Add to Cart proceed to checkout sign up user 3 user 3 at user 3 calm password password and now this should automatically redirect to the checkout page awesome it does and here is our read-only field and looks like we're good ninja edit from the future one thing I caught was if we're logged in just log in real quick and we go back to the login page directly it redirects to home we don't want that so if we go into our redirect if authenticated middleware just change this obviously to slash or whatever you want and let's try that again login user at user calm password and if he visit that again okay and register should be the same cool so we managed to add an auth layer to our application which requires users to log in before they check out in the next video we'll allow for guest checkout which doesn't require a login for the user also I'm gonna run a poll for the next few days I actually designed the login page and the register page here in sketch and if you guys want to see me do the CSS for that just vote for it if not then vote no if you vote no that allows me to do other videos more quickly but if you want to see your CSS let me know just click that I in the top right of the video and put your vote in thanks for watching guys please like leave a comment and subscribe if you haven't already done so I'll see you guys in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 12,676

Keywords: laravel ecommerce, laravel e-commerce, ecommerce laravel, e-commerce laravel, laravel shopping cart, shopping cart laravel, drehimself, andre madarang, laravel, laravel login, laravel login and registration, laravel authentication, login laravel, authentication laravel, registration laravel, laravel artisan auth

Id: OUs7778ERYQ

Length: 26min 56sec (1616 seconds)

Published: Wed Feb 14 2018