Custom Login | Laravel Livewire 3 CRUD

welcome to this episode in this episode I would like us to work on login logging in and already registered user you know for us to be able to do that I would like to first of all create some sort of navigation bar where we will be able to display um the login the register or something of that sort so let's go ahead and do that so I would like to go to terminal new terminal and here we are going to just have a PHP artisan make Live Wire and what I want is a navigation bar so I'll just call it Nava like that and of course we are going to have a navigation bar created it's taking a little bit of a while but is going to be created yes it is created already and so inside our navigation bar I would just like to go and get a navigation from my bootstrap a simple navigation bar so navba my internet is a little bit slow let me just pause a little bit then everybody is working so I mean the internet is back so let us look at simple enough but here maybe I can just pick this one just copy it from here you're going to put it inside here maybe you can just type it as a nav that way no need for the div and then now for us to be able to include it in our pages I would like to go to layout which we created in one of the tutorials so components layouts after split and before the slots so inside the container before the slots you can just be able to include our Live Wire component and so what you're going to do is just type Live Wire and then the name of the component so what did we call it we call it navba so nav hyphen bar like that and then we can be able to close it like that and I think our navba will be included in our in our page like this and so here I just want us to have some buttons which should be displaying conditionally whether a user is logged in or not and since I'm not doing something fancy just allow me to just flow with whatever it is that I have so I'm going to work with um these links and one of them I'm just going to do what I'm going to go to the nav bar where is it yes so you open enough bar.blade and I'm just going to create a some conditionals so we have several links we have one that is called home maybe this one we can call it um forward slash I mean forward slash customers like that and we call it customers instead of home and then I will because we have a href I'm just going to use where navigate so here maybe we can have fire navigate and this you lead us to sort of like the customers page when clicked like that so when we click on it it takes us to this same page now after that I would like to now be able to check whether our user is logged in or not and so I'm going to just check if a user is a guest so at a guest using the plate directive and as you can see even when we are working with liveware we can be able to just have our normal blood directly so it's perfect so at end guest like that and inside here I want us to have two links or maybe buttons maybe I can have them as patterns so copy and then paste let me just type them as buttons and one of them we are going to call register so if our user is not authenticated then we show them the register and login maybe we can begin with the login First and then register like that and then after that now when the user is authenticated then we can be able also to have some other links and in fact I'm going to bring up the link that we had previously there's a link that we have used there which we called customers I want to bring and show it only when the user is authenticated so we can say at health this you check if a user is authenticated I have typed it wrongly that out like that you can have at end oath like that so if our user is authenticated I want us to show two links here one of them will be one of them will be um you'll be customers the one that we have above the customers and then the link should be to customers maybe you can just copy it cut it and use it there so let me just cut these on and then move it here let's remove it here like that so when I navigate and also this one I want it to be log out so a user who is logged in can be able to see the logout link but uh the one who is not logged in cannot be able to see it so here we can just say href log out and then of course why navigate also but for this log out we do not even need to have a link we can just have it as an action so let me just have wire click and then we can say log out and we can be able to handle it in the same class so you handle it in the nav back class now in our in our page so we have it like that and so for these two I think everything is fine so let us try and see what is going to happen so when I refresh we are now having customers and log out meaning our user is actually currently logged in the system can be able to check that they're logged in so let me work on the logout maybe I can change it into a button and just change it into a button just for for maybe visibility and we can give this button a class of BTN BTN BTN primary maybe secondary select that you make it look a little bit nicer like that maybe we can make it a little bit smaller by BTN small like that so now we have a nice sort of a nice logout button when we click on it now we should be able to log out but currently as you can see there is no method I have attempted to click on it so you go to navback class here because that is the component that has it we don't need we might be able to emit uh an event and handle it elsewhere but for now we can just be able to just handle it here we can have public function log out like that and then inside here we can be able to have our logic I can just try to DD logging out and seeing if when we click on it that end point is going to be hit so how you attempt a click outside and then attempt again now you can see it's saying logging out I think that's good enough so we can be able to put our code for logging out our user and here I just want to pass it in request request and then of course I have to import the request um trade is it helper so let us do that so what we are going to do we are going to use it up here so we can say use in a minute http request like that not small letters Capital single request like that yes capital for just the first word and then now inside here we can be able now to work and log out our user so what we are going to do is just say auth log out and remember this is just that laravel way of doing things and then we can also be able to invalidate the session so we can say request session request session invalidate like that and then of course we can also regenerate the session token to prevent session hijacking so request session regenerate token like that and then now from here maybe I can be able to redirect to login even though of course we do not have the login page but that is what we are going to work on so return this redirects but in this case now we are going to the login and to be able to just give it a nice Spa without having a page reload so you can say navigate and set it to true like that in that you'll be able to do the trick in our login class in our login component there's nothing that we have inside here we just like to have a H1 tag maybe H1 H1 and close it each one we can just say uh login page such that we just attempt to log out and see if we can be able to see something of this sort then we'll be sure that our log logout method is working so let me refresh very nice and then when we log out it seems we have an error yes it says auth not found and that is uh because we have not been able to import the oh the author set so I will go back to our navbar and up here I'm going to import maybe use illuminate uh supports facets oath so I imported it all the facade of course you can just say use of nd2 work but we can just do it the long way so we click outside again and attempt to log out you can see you have a really a Reload and the login page is not found and that is true because you have not been able to set it so let's go to web.php and have a route that is called login so we have register I would like to just copy this one and call it login class and remember all these methods you can have them in a single class so it's not a must for them to be in all all over in many classes like that but I think also sometimes if you can be able to separate them it's very easy because now in case you have an error checking out the errand correcting ATP very easy so now we have the method of course if we refresh these we just go back to localhost 8000 and we refresh and we go to we attempt to go to customers as you can see we are having that the login root is not defined but this one is just that our login in our web.php doesn't have a named route so in this case I can just say name login what I have discovered is that this one we work only that we will always be having a page reload so whenever you visit a route that is not an that is an authenticated route then it will be redirecting you to this login page so even if I just type your customers again you will find you're still just end here oh but this one we're ending at register why is that oh because this is what I had initially so whatever whatever it is that you'll be ending at is login page and now you can see here we have register and we have login been displayed here so maybe I can go and um in our um navba.blade give those two the routes because we handled that the customers one but we did not handle the login and register so let me just do that and so here the href for login to go to login and then we can also have wire navigate and then also for this one it will be going to register and then we also have wire navigate remember what I'm I'm working on are these links that we're having above here because when you when I was clicking them they were not working now you see it's it's going to login but it's giving me an error and then when we click register it's actually also going to register that is also giving an error I think there's something that I need to check with my web.php the page so let us go to web.php yes so this one is yes you see it's only supposed to be login and the other one register so this you go to login class this one you go to register class I think that's the reason why you're having a problem so now when I click login now it's going to the login page as you can see when I click register it's now going to our register page and when I click login here is still going to our login page now let us create this uh login page and what I'm going to do I'm not going to do so much because you already have a register page I'm just going to copy the code that we have in this register page in fact I'm going to copy everything that we have here like that and I'm going to copy it I'm going to paste to use it in this login page I'm going to save obviously I can be able to check that our page is displaying nicely but now it's called register so let me change the name up there and change so many other things so here we have registered let me change it to login and then this the method that you'll be hitting now you know to be store user will be hitting a method in our login class and in this case let me just call a method login user so this wire submit so instead of store user let me just call it login user we have not created that method yet and then of course um every other thing I think remains exactly the way it is every other thing remains I don't think there's any yes down here I think we can change so if the user is uh in the login page we can ask them if they don't have an account so we can say don't have an account maybe it's poor English but we will navigate now to register not login register like that so if we refresh our page now it looks like this but if I click submit because we do not have a method to handle it you will see an error in a while so you can see the method login user is not there and that is okay so we can go to um login.php and inside here I want us to have another method which we are going to call login user so public public function login user like that no login user like that and then we will also have the properties so when we are logging I use logging in our user we will need uh an email and we also need a password so let me just copy this one sorry know what just happened yes and you have password so those two like that and then we will also require to have validation so instead of typing in the whole validation I would like to just adduct what we had in a store user function when we are registering or maybe creating a new user so just copy that and come and paste it in our login user like that inside here we are going to have request uh request like that and then obviously we do not need the name so the name we do not need so this one I'm going to delete because you just need the email and password to validate and then one more thing we do not need the email being unique so even this one I'm going to remove every other thing can't Remain the weight is and then now even minimum eight password we don't require that because let the user enter whatever password they hit or whatever password they think they have so now I uh this you assist us to be able to validate these news of course because we have used requests here again how you have to import that here so you can say use illuminate http request like that and then then we can go ahead and Now log in this user so if check if the password matches the email that they have provided and then we can be able to either decide to kick them out or maybe log them in so we can say if attempt and in this case what we are checking we're just using this validated so I just passing validated so if you pass in the email and the password now if this one passes so in other words we are checking if the password is matching the email the email exists in our database and its password is a password that is provided so it will be true if those conditions are satisfied then it means this user can be logged in so we can say request session regenerate like that request session regenerate and then we can be able to redirect these user now to customers page they can be able to view their customers because we have been able to reinfence the customer site that only an authenticated user or maybe a registered user can be able to access but remember these applications just for the purposes of working because somebody coming from wherever they're coming and then they can be able to register as an issue so let us go ahead and return this redirect so redirect and then we are redirecting to customers and then of course we can be able to say navigation set navigation navigate to true like that so this is one of the conditions the other condition now is uh that this user who has attempted to log in they have failed at it in other words the password did not match their email or maybe the email did not exist in the database or whatever so we can just be able to set a custom error this on the email input so in this case this add error like that then our error we wanted to go to the email input in other words wire model email then here we can be able to write whatever it is that you we want so we can say the password the password provided doesn't right does not does not does not match the email I don't know what that means of course we can just say the credentials provided do not match our records I don't know whatever it is that we have I think that would be fine so let us go and attempt and see if everything is okay have we included oath I don't think so so that is the next thing that I think is good for me to do that so you're going to say use illuminate support facades and then out like that obviously you can be able to just use the short form and say use oath now I want to just click like that and attempt to submit without writing anything now you can see email field is required and of course I do not know I have not deleted the name so I need to go back to that login class I mean login component and be able to delete the use a first input which is the name so we do not require the name actually we don't need the user to give us the name because that one has no meaning we just need to think so delete that one I'm going to save so again we will refresh our phone okay when I try to submit again it's telling me the email it feels required the password field is required so let me just create um give an email here which does not exist James at uh j.com and then a password these ones don't exist now this validation you failed so it says the password provided does not match the email so this was the custom message that we did put but in letter valuation I think it's just credential is not much our records now I want to log in a user that I know exists so you can have William at example dot net I think that one exists I do not know what the password is let me try to make a guess uh submit now you can see again even this one is failing at it maybe Juma let me try that one if it does not work with you just go and register another user maybe in that one is not working I just registered another user and maybe let us call this user um Albert and the email Albert that's Gmail .com and then the password just password something I can be able to remember so early but let me just copy that one such that submit now that user is logged in I would like to log them out and check our login method so the user is logged out and we have been returned to the login so I want to paste the email here and I want to type in their password and then I want to submit it says the pages expired so if you refresh so let us again paste the email and then the password attempt to submit it says the password provider does not match the email I think there is a problem in our code so let us go to login I think there is something that I have created that is a problem Jesus is validated no Guinea user this redirects attempt with attempt to validate it and then um redirects to customers why am I not able to log in my user can I post for a while such that I check it out and then once I'm able to figure it out we can be able to conclude this because we are almost towards the end I have attempted to debug and see the reason why my password is wrong and when we go to the register method in this case the Regis register class is something that I've discovered here which is so profound you see for the password I was encrypting a name my bad so that's the reason why we have been suffering all these while so what we need to encrypt here is the password like that I was wondering because why wasn't it working because I think eventually I was finding that um the problem could actually be the hashing but when I went back and checked I found out that I actually have a problem so I would like to because I was doing some debugging I was always getting a false matching and also we were getting the password and email combination as wrong let us try now and probably register a new user this new user we are going to call them team team and the email is team at example .com and then the password like that now we submit we will be able to login team with a register method but then I would like us to try the login method so I log the user out and then you now have team at example that did I say.com the password is just that can we submit it was it wants us to refresh the page let me write it again team example.com the password that let us see and now you can see we are also logged in successfully so so basically you have been able to implement login and log out and register methods thank you very much for following this tutorial up until this point I ask that you may please subscribe if you haven't subscribed and you can also be able to

Channel: LaraPhant

Views: 2,728

Keywords: Livewire, Laravel, Livewire 3, crud application, ajax application, custom authentication

Id: aI1ubuKJH4s

Length: 34min 45sec (2085 seconds)

Published: Thu Aug 24 2023