Passwordless Authentication with Firebase

Key Takeaways

[Music] over the past few years you may have noticed certain apps transitioning from email pastor authentication to just email link authentication and there's two main benefits to doing this first your users don't have to remember a password and two it provides a frictionless signup process that makes it more likely for you to onboard new users one app that does this is open collective and the possibility just became available to finder base developers a couple days ago and I wanted to send to thank you out to all angularfire BassPro members because your subscription allows me to donate to other open-source projects through open collective and I'm very grateful to be able to do that in today's video we're going to use firebase to build our own password lists off system which will take-it users email send them out an email link that will authenticate them into our firebase app I'm starting with a brand new angular app and making sure that it has a router then generating a new component called password list off from there you'll need a firebase project with angular fire - installed and if you're starting from an existing project make sure to update the firebase SDK to the latest version then go into the firebase console for your project and enable the email link method under the email password settings now quickly taking a look at the app module you should have the angular fire module as well as angular fire often here with you our firebase web credentials then initialize the app down here in the import section from there we'll jump over to the router and we'll route our component to the login path what's going to happen is the user will initially land on this component they'll get their email link and then they'll come back to this component with a special off code that we can use to log them in depending on your requirements you may want to break this down into two separate components one to get the actual link and then another one that they're redirected to to actually sign in for the sake of simplicity here we'll just do everything in a single component the end result should look like this the user enters their email address we notify them that we sent the email they go into their inbox and then they have a link that will redirect them back to this component firebase includes a special code in the URL and they also need to return with the same email address that they tried to sign in with for security reasons and the way we keep track of that between redirects is by saving the email in local storage if the user clicks the link and we don't have the email address and local storage we'll need to prompt them for it again that's most likely to happen if they request the link on one device and then try to sign in on a different device in progressive Web Apps we can handle this with just a simple browser prompt and if the user tries to enter an email that doesn't match it should throw an error so we'll build a component that has a way to display those errors then if we try to redirect the link again and this time enter the correct email address we should get authenticated successfully we can start this implementation out in that component type script we're going to need angular fire auth as well as the angular router then we'll jump down here and define a few properties to manage the state of this component first we have the user which isn't observable if it's null we know the users not logged in if it's an object we know the user is logged in we have an email string which represents the form input then we have a boolean that will flip to true once the email has been sent and lastly a string that we can use to display any error messages from there we'll inject angularfire auth and the router and the constructor then we'll define our user as the angularfire auth state observable then we need to get the full URL in the browser which we can do at the router by calling router URL then we're going to write a method that looks at this URL and determines if it's a valid firebase email wink URL and if so it will go ahead and login the user but first we need to have the user request the email link in the first place and to do that we need to define some action code settings in this case I'm just saying the redirect URL is going to be localhost 4202 our login component then because we're in an async function and also we're going to be interacting with the Dom I'm going to wrap everything in a try-catch block to save the email address and local storage we need to interact with the Dom window and that could fail with things like server-side rendering so we wrap it and try catch to make sure that that's a safe operation this method here will happen when the user clicks on the login button and we're going to await the promise send sign and link to email which resolves once that emails been sent we just need to pass it the email string and the action code settings that we defined earlier after that promise resolves we need to set the email address and local storage because the user will be redirected to a new instance of our angular app and it will have no memory of the email address that was used and then lastly we'll flip our email sent variable to true and if anything fails in here we'll display it in the error message so that handles the first part of the process that sends the email out to the user when they redirect we want to confirm that it's a valid link and sign them in to our app the firebase SDK can parse the link for us which we do by calling is sign in with email link and passing at the URL that we get with the angular router if it is a valid link then we need to check that the user has the same email address that they were redirected from that should be the email that's in local storage which we can call by saying get item email for sign in but if not we can just use a browser prompt to have the user re-enter their email address after the redirect at this point we should have the two pieces we need to sign the user in which is the email address and the URL so we'll go ahead and pass those items to the sign in with email link method on the firebase SDK and that's a promise that should resolve with the logged in user and lastly we'll clean things up by removing the email for sign in from local storage now we can put this all together in the HTML the first thing I'll do is show a success message if the users already logged in because our users an observable we can just unwrap it with the async pipe otherwise we're going to display this login template the role of the login template is to one collect the user's email address and to give them a button to click to send the email out to collect the email address we can just add the ng model directive here and then bind it to the email property in our component type script then just below that I'll add a button that's disabled if the emails already been sent and when clicked it will fire off the send email link method to the email address entered in the form that's the main thing we need there but I'll also go ahead and add another div here that will show a success message when emails been sent or an error message if there's any problem with the login process and that's basically all there is to it you should now have a working password lock system in your firebase app if this video helped you please like and subscribe and if you want all kinds of other exclusive content related to angular firebase development consider becoming a pro member at angular firebase comm you'll get a free copy of my book as well as access to my full length courses covering ionic and stripe payments thanks for watching and I'll see you soon