How to Make a Passwordless Login System In Laravel

[Music] all right hey everybody in this layer bit we'll talk about password list login systems and real quick just to make sure we're all on the same page by that I mean you visit a website you go to the login page and you see an input for the email address but nothing for the password so instead when you submit that form a unique URL and a token is emailed to you and then when you open your inbox you click that link and and bada bing bada boom you're instantly logged in to the application so yeah we'll talk about this um not necessarily from the perspective of an evangelist for this approach I'm not telling you to switch over it really just depends on the application as always all right so let's get started from scratch I will Begin by generating a new application and we'll call it passwordless demo and why don't we go ahead and pull in Breeze which to be honest is a little ironic because that already includes a full registration and login system but we'll tweak it just a little bit awesome there we go all right so let's CD in there and then open it in my editor all right and while that's indexing why don't we view this in the browser and yeah here we go we have a standard installation of larl with Bree okay real quick let's open up my environment file and why don't we use SQ light and uh actually we can get rid of all of this in that case and then I will migrate my database all right so do we want to create a database.sql light file yes I do and now if I come back I can register a new user and yeah you can see right now it's asking for a password uh you can either keep this or remove it if you exclusively want um um email based authentication or or login all right so we are logged in but yeah immediately I'm going to sign out so that we can Implement our new system okay so let's see what we got here I'm going to open up the app HTTP controllers directory and yeah here are the off controllers that larel breeze creates for us so in our case what do we want here uh how about a new where are you authenticated session controller okay so this handles uh a visit to the login page and right now it loads the following view where it asks for your email address and a password but yeah now I'm going to delete that entirely and that gives us a simple email address okay and then also forgot your password can leave as well so can I get rid of all of this there we go looks good so now when we submit that form where does it take us well let's go back to our controller it's going to hit this endpoint here yeah of course traditionally what that's going to do is attempt to log the user in based upon the credentials that they provide but in our case we're not going to tackle it in that way instead as we discuss we will fire off an email to the user that contains a unique URL and we'll talk about that in just a minute okay so H how do we want to handle this um why don't we just get rid of all of this entirely like so and instead very quickly let's validate that the email address is required and then here yeah uh generate a temporary URL and email uh the user however before we do that we should probably determine if there is a uh a user in our application that matches the email address that the user provides instead an alternative approach would be to Simply tell the user hey if we have an account for that email address uh we will send the login link right now but you never actually confirm whether or not uh we we found a matching record okay but anyways for now we will tell them so why don't we return back to the form uh with errors and I'll just write it here no matching account found okay so why don't we start by testing that out I will type in gibberish submit the form uh and sure enough no matching account found okay other otherwise if we could find a matching account yeah it sounds like we need to generate a uh well actually we should talk about this there are a couple different ways that we could handle this traditionally what you do is you generate a token and that token can just be a random string that you associate with the user so for example string random uh 50 characters and then you attach that to the user's record in the database and maybe to make it simple you have a login token column directly on the user's table okay so now at this point you find the user and then you update that user's login token field with a random string then you fire off an email you you include that token as part of the query string when they click on the link it takes them back to your application you try to track down a user who has that token and then once again bada bing bada boom you log them in however because we're using larl and in this case I'm using larl 10 I think it's even easier if we use uh a simp Le temporary signed route and luckily laral makes this incredibly simple so let me show you I can say URL and I'll pull in the facade here and I want a temporary signed route and here we want to give it the name of the route and we haven't yet worked on that yet uh expiration date could be how about now at hour you have one hour to use this link and then finally if there's any uh specific uh parameter that we need to pass for example the US itself then we can do that here okay so why don't we open up a split and I will visit my routes file and if I scroll down you'll see that LEL Brees includes this off. PHP section and I'm sorry let's just do it all in full screen all right let's see what we got so we have a route uh to visit the login page we have a route to handle a post request to the login page but now yeah it sounds like we need another one we need one that actually performs the login so maybe login slash and then uh a user ID or something like that and again could be a security issue if you if you include the user ID so many sites do um including lar cast but again in certain situations you may not want to do that so in that case just use uh a unique ID or something like that a uyu ID okay let's give this a name of login um I don't know token or whatever ever you want something that that would make sense to you and then this will hit an action and usually I like to stick to uh the the seven restful actions so I might create a new controller here uh in a real project but for now let's just keep it simple and we'll call it login via token or something like that okay so now I know what my route is login slash and then a user ID so if I switch back to our controller the route will be login token and then I do need to pass through the user's ID so I could say user equals user ID okay and you know what why don't we do this why don't we just return that uh that that URL directly from the controller when I submit the form so let's do it I used Jeffrey at lc.com we log in and it didn't work uh oh yeah I'm sorry um these stinky types all right all right one more time and there we go so now you can see what has been generated so a temporary signed route is exactly what you think it is it is a route that includes the expiration date and a signature as part of the URL and here's the cool thing you can't simply copy this and then change it so so your first thought might be well what's to keep you from changing the user ID of one to six and then if you use that you URL instantly you're signed in as the user with an ID of six however because we are using signed routes that's disallowed if any piece of this entire URL is changed it is invalid and your authorization will fail that is the huge benefit so yeah anytime you're in a situation where you want to expose a secure or sensitive operation as a public URL without requiring that the person first Lo log in this is the approach you want to take okay great so now I have my link let's now email it to the user and uh how should we do this uh we could do a mailable or we could do a notification why don't we take the notification approach uh so that I can I can whip it up very very quickly so I'll say make notification login or something like that all right so let's go into my login notification and yeah here let's quickly generate this uh click here to instantly log in uh to whatever the application is in this case we'll just call it Breeze all right log n and this will be uh our link so I could do something like that and it sounds like we need to send that through or we could even generate the signed route uh as part of the notification but yeah for now we'll just say user not ify new login and then I will pass through the link all right so now if I come back we can accept the link public string link and then I can reference it like so all right click here to instantly log in De breze we have a button that includes our signed URL and uh we can keep that final line okay so let's do this um this is only for me you don't have to do this part but I'm going to pull in laravel Ray so that I can very quickly view the generated email uh otherwise just use the the log driver for your mail okay give that just one second and yeah I already have Ray installed which you can see here all right so we can test this out now I'm going to go back give this a refresh type in my email address and of course it fails you know just once it would be nice if I do a screencast and everything goes flawlessly but it never happens okay so anyways if we scroll up let's see what the issue is connection could not be established with mail pit yes of course uh let's do this instead let's go into my environment file and for my mail driver or mailer let's just use log for now all right so let's clear that out and give it another shot okay so that refreshed and now if I come over to Ray sure enough we have our email click here to instantly log in to Breeze and yeah you can see here is the the link that was sent to the user okay so now if they were to paste this in well let's see what it is login sln ID and then again we we include that full uh unique signature but at the moment we don't we don't do anything with it as you see there we're going to get a uh a method does not exist okay so that is our next step let's go into routes off and let's see so we handled this but I have not yet created the action so I can do it down here we're being pretty quick but I think this will all work okay so now here's one issue and it's a common mistake yes we generated a signed route but it doesn't magically work so here's what I mean if I were to say die and dump hello there come back give this a refresh I get hello there even if I change it you know I was just telling you if any if any part of it is changed it will fail but sure enough we're still hitting that uh action and that's because it's not enough to Simply generate the SED URL you also have to authorize or validate it and luckily again with larabel it's pretty easy let's go back to my o routes file and right down here I'm going to add the signed uh middleware as you see here okay so now if I come back and give this a refresh I already changed that URI so it's going to fail and in in in the situations where it fails we get a 43 invalid signature okay great so if we come back to our controller why don't we simply die and dump the user uh to see if everything is working okay so one more time let's log in a user all right uh we should provide some feedback and we'll do that in just a moment but sure enough the email was sent I will click on this actually I don't want to do that one more time I'm going to do it manually and just to show you if we were to try to log in a different user like the user with an ID of two well again you change the url so the authorization or the validation fails it has to be identical change it back to one oh and that's not working either that should work um let's figure this out so what's the issue here login one expire oh you know what that doesn't seem right that should be an equal sign H let's go into Ray oh yeah that's not right H maybe I'm doing this wrong let's have a look we generate our signed URL as our debugging I can pass this to Ray or D and dump if you prefer then we go to login maybe this can just simply be this link all right let's give it another shot try to sign in myself all right so if we open this up uh sure enough we can see yeah that's the URI that we want so let's copy that and see if it matches click here oh that's not working what's going on here now if I paste in that URL manually oh it does work okay well that's a little bit weird what's going on here because here here's the strange thing I've done this a hundred times I know this is right I haven't done it 100 times but dozens of times and I know this is right so here's what I'm thinking um let's do it one more time and then just check the log file because maybe there's some weird thing when it gets past array that the URL is is being encoded improperly or like that so we fired it off we'll go into my ll. log file all right and we can see yep there it is okay so it's just some kind of weird encoding uh situation so I'm going to copy that paste it in and it works okay but yeah once again if I were to tweak it to a different user well it's going to fail immediately and that only works again because we added the signed middleware uh to our route definition okay very cool so now finally we can get back to work uh authenticated session controller and yeah right down here if we hit this point we're all set to go so I can simply say off login user and then we can basically take them here so let's say request session you know gener generally it's a good practice to always regenerate your session file and delete the old one as part of your login so we'll do that here and then redirect the user and really at this point we'll just take them to whatever is defined here and in this case it's their dashboard all right so let's have a quick uh review you visit SL login you provide an email address and you submit the form that will hit this action here we make sure that you did provide a email address and if one exists in our application we generate a signed URL that includes that unique signature as well as has an expiration date and then uh we notify the user now as part of that notification we send them an email that says click here to instantly log in de breeze we include a corresponding link and they're all set to go then once they click on that link they are directed to where are you they are directed right here so this has the signed middleware applied so it's going to inspect that URL to make sure that it has not been changed since it was generated all right if they get past that they hit this endpoint where we log in the user we regenerate the session and then we direct them to their dashboard all right so cross your fingers um we will log in myself and we see a white screen oh yeah it's because um right here when they submit the form we notify them and then we don't do anything so of course it displays a blank screen so why don't we return back to that form that's fine for now and I'm going to add uh a status that says please check your email for a login link okay so if you're curious about this status uh item that we're adding to the session that's because within the off. login view you can see they pass or they look in the session and if there's anything for status they pass it to this blade component that simply displays it within a div okay so now if we give it one more try there we go notice we do have a status please check your email for a login link so I will grab that link and let's find it let's scroll up where are you where are you here we go this is the URL that we want so let's grab it and paste it in the browser and we're in all right so yeah in a nutshell uh in a very quick nutshell if that makes sense it doesn't make sense but yeah that's how you would Implement a passwordless login system in larl by leveraging temporary signed routes so finally I just want to wrap up by restating I don't think all applications should take this approach and in fact most of them almost all of them should not uh but yeah every once in a while you might run into situations where this very much is the way to go and again I I would point to Applications where maybe your your users only have a need to log in once or twice a year or something like that in this cases it's kind of a simple way to go uh and it would drastically cut down on uh customer support threads or maybe if your target market is a little older and they don't use password managers and things like that uh this might be a good approach as well but yeah let me know what you think and if you will be implementing this approach in your applications

Channel: Laracasts

Views: 8,796

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding, passwordless login, secure authentication

Id: XtD2cwUNwvE

Length: 19min 50sec (1190 seconds)

Published: Tue Oct 24 2023