What Is Email Only Authentication - Magic Link Auth

I know it may sound crazy to have an email only login system that doesn't require any passwords at all but it's actually more secure than a traditional email and password login system not only that but it's incredibly easy to implement and users of the system actually prefer it because they don't have to memorize long complex passwords big companies like slack actually use this system and in this video I'm going to be talking about how you can actually implement this system what it actually is and why it's better than a normal password and email based system [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and today we're talking about passwordless login using email only you may also hear this referred to as a magic Link login system the first thing I want to talk about is how this actually works the way it works is once your user registers an account all they need to do is enter their email address when they register no passwords no other information you just need an email address you then store that in your database somewhere just like you would a normal user in a password-based system they just don't have a password in this version then when they go to log in what they do is they enter their email address into the form that's all they need they hit submit what's going to happen is you're going to send them an email and that email is going to have a special token inside of it that is essentially a unique identifier that allows this user to log in so when they submit their email to your server your server is going to see that email find the user for that email and it's going to create a token for that user to identify them uniquely in our case we're going to be using Json web tokens because they allow you to do all the things like expirations and making sure it's signed correctly all in one so it's really easy you can do it however you want you just create some type of unique identifier that links that user to this unique identifier you then send them an email generally it's going to have a link in that email and that link already contains that unique identifier for them that token that you sent down to that user when they click on that link it'll send back to your server the information will say okay here's that token you created you verify the token is still correct and then you have that user be logged in so as soon as they click on that link in their email it's going to send them back to your website and that's what authenticates them as long as that token in the link is still valid then they're going to be logged in and you can store their login information in like a session or cookie however you want to do that the way that I like to think about this is that the token that you create on your server when they enter their email address is almost like a temporary password that you send down to their email address and once they log into their email account and click on that link it's essentially verifying that they are who they say they are that they have access to that email address and that's enough to verify that this user is the correct user and you can log them into your application the way that this is secure is because you still need to log into your actual email client depending on how the user has this setup they may need to enter their password to enter their email or they need to enter some two-factor authentication code whatever it is they need to log into their actual email provider first to be able to click on the email and that's how you authenticate they actually have access to that email and they are the user that they say that they are now just by looking at this you're probably immediately thinking this seems less secure than a normal password and username login system so let's look at the weaknesses of both systems to figure out why one is more secure than the other if we look at the system we just talked about where there's no passwords at all involved the way that you can hack into someone's account the only way is if you have access to their actual email account that way you can send the email to their account and then you can log into their email account so if you already have access to their email account then you have access to every single site that they ever used passwordless login to sign in for which is a big downside because now you have access to all of their sites that they use this system for now if we take a look at a traditional password-based login system if the user gains access to your password obviously they have access to your account that's the most traditional way you think of someone hacking into your account but also if they have access to your email they have access to your account now that's because 99.9 of websites that Implement password-based login have a forgot your password button where you click on that button you enter your email and it'll send you a link to reset your password so if someone has access to your email they already have access to reset all of the passwords on all of your accounts that have this feature which let's be honest is pretty much all of them this is why the password-based system is actually less secure because there's two vulnerabilities the first is if they get access to your password and the second is that they get access to your actual email account so there's a second vulnerability of when they get access to your password that only is available in the password-based login system so if you don't have a password for them to get a hold of it's going to automatically be more secure another reason I really like this password this login system is because you don't have to trust the company that you're giving your password to that they'll secure it and store it in a way that is correct because a lot of times you hear about companies where they have database breaches and passwords are leaked and that's obviously not good especially if you reuse your password which a lot of people do so if you don't even have a password at all for the company to leak there's no way for the company to actually leak your data in any way other than sending out your email which is something a lot of companies already have access to anyway now that's just a high level overview of how this system works next I want to dive into an actual example using node.js and if you're not using node.js it doesn't matter all the concepts are going to be the same we just have node specific apis here is the final working version of our application in node.js you can see the entirety of the code is maybe 100 lines in total so it's really not that large at all I'm going to go through exactly what's happening line by line but first I want to demo how this works so let's assume that I already have an account created you can see we're emulating a database here with this user's array and I have an account with the email of Kyle webdefsimplify.com my name is Kyle and my ideas one so it's just emulating what would happen with a real life database so what I can do to log in is I can type in that email so I'm just going to copy it over I'm going to paste it into here and I'm going to click log in and you can see it's going to say check your email to finish logging in it sent me up a request and now it sent me an email so if I go find my email you can see if I pull this over it has sent me an email that just has the subject line finished logging in it sent it from my test email that I'm using and it has a login button when I click on that login button what it's going to do is it's going to bring me to this page which it pulled up on another page and you can see auth as Kyle and is sent along that token right here inside of that email and at this point you could essentially send down like an cookie for a session or whatever authentication system you want to do I've just verified that this is actually me and if for some reason my token was incorrect like let's just remove some stuff from it and I'm going to resubmit this request you can see they're now unauthorized because we don't have the correct token which is like that temporary password I talked about before so let's actually go through the code to figure out exactly how this is working get everything back to how we had it before so the very first step is our login form this is super basic all we have is a label for an email an input for an email and it's just posting that to this login route that we have on our server so if we go back to our server you can see that we have this login route right here and this login route contains all the information we need for logging in the user so first what we do is we take the email from the body that we're sending up and we find our particular user this is like querying your database if you're using a database the next thing we're going to do is we're going to check to see if our user exists if they don't exist we're just going to skip all this and we're just going to send down a message that says check your email to finish logging in now the reason we don't send any type of error code is because we want to make sure that we don't allow hackers to figure out what the emails of our users are or if we sent down an error that said your email is incorrect then a hacker will know okay there is no account for that email but if we send a message that says check your email to finish logging in only when they have a correct email the hacker will know that that is someone's email for our actual system it's a small thing but it's better to do it this way just so people can't get extra information now if we do have a user what we need to do is we need to create a token and this token is where all of the magic for this application happens we're using a Json web token and if you're unfamiliar with Json web tokens I have a full video going in depth in them I'll link at the cards in description but for the purposes of this video all you need to know is it's a token that can contain some type of information in our case we're putting the user ID inside of the token then we're going to use some type of secret code to be able to encrypt that message that's what this secret is right here and then optionally we can make it so this expires for our example we're making it so this token expires within one hour that way if they don't click on the link within one hour it's automatically going to be invalid and they're not going to be able to sign in I can actually show you an example of this if we change this to one second and I save everything and now I try to log my user in again if I click login you're going to see it's going to say check my email if I pull up the email that it sent me and just give it a second here we go I've got the email pulled up I'm clicking on the login button and if I bring this over you can see it says unauthorized even though the token is 100 correct it's still unauthorized and that's because the token has actually expired because it is only valid for one second and I did not click the link within one second of logging in obviously that's way too quick so an hour is a pretty good medium level where pretty much anyone can get to their email within one hour you can shorten it or Link in it depending on your specific needs now to kind of visualize what's happening with these Json web tokens I'm just going to drag this window over and what this window does is essentially allows you to paste in a token I just took the token that we just created pasted it in here and as long as you pass in the correct key for your encryption you can see that it has information for our user ID which is one it has the time that we issued at as well as the time that this token expires at which is essentially one second after we initialize it as you can see here by these numbers they're just one apart so this is the one second expiration payload now we can close out of that and we can kind of finish what's going on in this login section we have this message for sending along our magic link as long as everything goes well and there's no errors and all this message does is it use some type of email servers I'm using send grid it really doesn't matter what you use at all they just had a free tier so that's why I signed up for it and you pass along all the information you need but the important thing is you have this one link somewhere in your email this link is going to go to a route you create in our case it's the verify route and we want to make sure we pass along that token that we created in this previous step here so we're taking that token and we're sending it along in the email as part of this URL for us verifying the user if we go back to our server we can see that we have this verify route and this verify route is going to take in the token that the user sent up so whatever this token is as long as we have a token we're going to continue and try to use that token and we're going to again use that Json web token library to verify that this token exists and to decode it so we pass in the token and we pass in our secret key here and it's going to give us a decoded token and then we can get the user ID from that to figure out what user it is that's logging in so we can get that user and from here you can do whatever you want with that user you can save their session instead of a cookie you can do some type of other authentication system like an API key it really doesn't matter you just know that at this point your user is authenticated and whatever system you want to do to show them as authenticated you can do that here if you want to go like the cookie session route I have a full video covering that I'll link in the cards and description for you now really the only other thing to explain is what exactly this secret key is the secret key can be literally pretty much anything that you want it to be it just needs to be a long random string of characters and there's actually a really good way to generate that using JavaScript the JavaScript has a crypto library and you can use it to generate a key and in our case the default hashing library for JWT and a hashing library is just the way that it encrypts the message is going to use this hmac and it's going to use sha-256 as the actual hashing algorithm so we can just enter that information for the key we want to generate and it doesn't really matter what we put in this array here I just put sign and verify because that's kind of what I'm doing here and then it's going to generate us a key and this key is going to have a bunch of information it's more of like a JavaScript specific crypto key for the library here but what we can do is we can export that key in our case I'm using jwk here to export it and the K property on the export is just going to be the raw actual key so this is this little bit of code right here is going to generate a key for me and if I actually save this we can see the output here so if I just look at my console and click save you can see this output down here is just a random string of letters and numbers and underscores and all that stuff and this is going to be valid with our library because we made sure we use the correct hashing library that we're using for our Json web token Library you can again change this hashing algorithm if you want in your Json web token and if you do change this down here but every time I save you can see we're getting a random key and all I'm doing is I'm saving that inside of my environment variables section and then I can pull that in with this process.env.jwt secret so this right here is just one of the ways that you can generate a random key there's a lot of other ways to do it but I like this because it's cryptographically random which is ideal and that's all it takes to create this passwordless login system if you want to learn more about how you can actually store the authenticated user inside of a session using cookies I have a full video that linked right over here and if you want to check out a password-based login system I also have a video on that it's going to be linked right over here with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 63,720

Keywords: webdevsimplified, email only auth, authentication, auth, auth js, authentication js, passwordless login, email only authentication, email only login, magic link auth, magic link js, magic link, magic link login, email login, email authentication

Id: b6qHfPdv4Y8

Length: 11min 59sec (719 seconds)

Published: Sat Jan 28 2023