Web Authentication APIs Next Steps & Best Practices
Transcript from the "Next Steps & Best Practices" Lesson
>> The final thing that I have here is just a list of quick tips and ideas to follow after this workshop. So native apps, yeah, so, there are ways today to connect your login credentials being password-based or passwordless between the web and the native app of the same project.
[00:00:23] So if that's the case for your company or in the website you have a website and also native apps you can now connect both of them. So for password managers, for WebAuthn and passkeys, so that works for all of them, okay? And for that you need to handshake or make a handshake between your web, your site, your domain, your origin, and your native app.
[00:00:49] On iOS, on Android, or Windows, how you do that is different, so go on learn that part. How you can associate a website with an app, with a signature of the app and then you are ready to go. Ideas, that you can implement or you should have in mind when you are doing everything that we have done today.
[00:01:12] Keep use of detonation after login always, we're not doing that right now. So if the user wants to get to a URL and he needs login, and then you have web authentication, a lot of processing in the middle, remember the original URL and return the user to that URL after a successful login.
[00:01:31] Always confirm user emails if they are real, okay? So wait for an email confirmation. Ask about autologin, don't autologin automatically. Ask the user, do you want to log in again automatically next time? Check privacy's legislation because that might differ per country or per region, Europe is one case.
[00:01:52] So if you're doing this, check what you can do and how, okay? Security's too important here. So, don't deploy things where you're not still sure that your flows are okay, that your security is as good as it can be. And test your login UX experience flows to see if users actually understand what's the flow and how to work with this.
[00:02:23] In terms of our project as homework, okay, after today's workshop, I have a couple of ideas or things that you can do. I have the slides here, but also you have that in the project's website, if you were following along, the last chapter, bonus, next steps. So here I have things recommendations on what to do in case you wanna continue working on this project.
[00:02:48] Add all the validations that we are missing, proper error management for every situation. We are not managing errors on every situation right now. Add better database integrity right now it's a JSON, yeah, we can make that better. Add a forget password flow, confirm email and registration as I mentioned before.
[00:03:06] You can try signing with Apple if you're willing to pay the Apple developer account to do that. You can also add an OAuth 2.0 flow with Facebook, GitHub, or any other company. Try to log in with other providers following their guidelines. There are code examples. Add a magic link, so in this case you create the magic link.
[00:03:29] There are libraries to do that, you send an email with a link and then you log in the user with that link. Implement passkeys conditional UI, this is to make this do you make the browser or the login with Baskin, something like that? And the simple web a fan, if you go to the passkey section will help you on what to do or how to do this.
[00:03:55] I think it's at the bottom they have a link here somewhere that says if you wanna read about conditional UI, here you have everything that you need to do, okay, to make your website passkey compatible with this idea, okay? But this is I still have in mind that this conditional UI is still in the works.
[00:04:18] I mean, it's not completely clear how it's going to work on every browser. And the final suggestion here is to add a multi-factor manager. So for example users could be able to delete server-side authenticators. So right now I have a USB key, I have face ID but I cannot remove them as a user.
[00:04:43] So I can see everything that I've had added I can remove that and even name the authenticator. So this is my key, this is my USB key, light blue then I have an orange one so I can say, this is Face ID on my iPhone, this is Face ID on my iPad, so I can name my authenticators.
[00:05:02] And also try to add the authenticator app support, that is for example, Google Authenticator, where you receive a QR code and you add your website to an authenticator that's also possible there are NPM libraries to help you with that, it's not so difficult. And it can help you also to have another set of validation over your authentication.