 Passwords are the first line of defense in our digital lives, so it's never been more important to keep them safe. But when you're traveling dozens of passwords across multiple websites, it feels like there's always a new account to set up or manage. Now, one day we might live in a world without passwords, but for the moment, we're stuck with them. And if you don't get password management right on your website, people will tend to devise unsafe workarounds. So this session will show you how to make the most of platform features, in particular, how to work with AutoFill and how to successfully interact with password managers like the ones that are already built into Chrome and other browsers to encourage strong passwords and avoid compromise, reused or weak passwords. You'll learn best practices like allowing your sites and apps to share passwords through digital asset links and will give you some stats and examples to help your team prioritize. We'll also show off some new tools and capabilities in Chrome. Now, one thing before I get started, this session is about front-end best practices. I won't be talking about back-end services for managing authorization and passwords. If you wanna learn more about back-end best practices, check out the links in the description for this video. I've added links there to all of the resources I refer to in this session. I will not be trying to squeeze URLs on screen. Anyway, let's start with the bad news. Billions of passwords are compromised due to data breaches each year. More than 15% of internet users have reported experiencing the takeover of an email or social networking account. And there've been hundreds of major security breaches and they're still happening. If you're wondering what this all costs, well, check out the IBM cost of a data breach report from last year. They estimate the average cost of a data breach at 3.9 million US dollars. And it's worth noting that healthcare and small businesses were hardest hit. And the average time to identify and contain a data breach was 280 days. Getting password handling right becomes even more important as we spend more time working remotely and when more of our work, leisure, shopping and financial transactions happen online, increasingly at home or in public places where we don't have some of the protections that can be provided in an office. So why do we keep on getting problems with passwords? Well, firstly, people reuse and share passwords. And according to our metrics, nearly half of every password stored is a reused password. As I'm sure you know, reusing passwords is a problem because a password data breach on one site can compromise security on all the sites that use the same password. We also tend to use passwords that aren't strong enough or which have already been compromised in data breaches. For example, capital P for SSW0RD hash might seem like a strong password but it's been compromised multiple times. So as a developer, well, what can you do about it? Well, before you start thinking about the details of password management, make sure you've got the basics right. So here are the basics. Firstly, avoid unnecessary login and enforce strong passwords. Don't force password updates. Never allow compromised passwords. I'll show you more about how to do that later and make it simple and obvious how to change passwords. You can find out more about all of these topics and lots more detail about getting password forms right in our guide to sign up form best practices. One really good way, of course, to reduce password vulnerability and improve sign in completion rates is to offer federated login. Now, this example from reddit.com shows how they focus on federated login while also offering an email option. In some cases, you might also want to offer alternatives that don't require a username and password for initial sign up. One way to do that is to verify a user with an email address or phone number instead. Security needs to be proportional to risk, of course, but you should certainly consider enabling your users to set up multi-factor authentication. In other words, multiple types of authentication rather than just using a password. For example, something you know, like a password, as well as something you have, such as a security key or something you are, such as a fingerprint. The thing is, it doesn't matter how strong your user's passwords are if they get stolen and multi-factor can really help with that. In a 2019 report, Microsoft found that their user accounts are more than 99.9% less likely to be attacked if they use multi-factor authentication. They defend against hundreds of millions of password-based attacks every year and have found that attacks which target non-password authenticators are much more rare. Making multi-factor authentication really simple to understand and set up for your users is one of the best ways you can help keep your users and your business safe. Biometric authentication can be a good way to do this and the Web Auth N API, which is widely supported now, makes it easier to implement. You can try this out at our code lab. And if you want to see biometric authentication in action, take a look at ebay.com. Their sign-up page focuses on federated login and then offers biometric authentication. It's simple and friendly. Now, if people forget their password or discover their password has been compromised, you need to make it really easy for them to set up a new one. Quick and easy password reset can help protect your site and reduce your support and help desk costs and reduce the number of users who just give up and don't come back when they get their password wrong. According to a UBK report from 2019, I don't exactly know how they work this out, but apparently US users spend an average of 10.9 hours every year entering passwords. So make password reset simple and make it easy to access. To make it even simpler for users to change passwords, add a well-known change password URL redirect to your site. This enables password managers to navigate your users directly to your password management page. This feature is now implemented in Safari, Chrome, and is coming to other browsers, and you can find out more from our web.dev article. Making sure your sign-up and sign-in forms work well with password managers that are built into browsers or accessed as separate apps is one of the easiest ways that you can make your site more secure. Password managers suggest and store unique passwords so that users don't need to choose, remember, or type passwords themselves. Password managers can help minimize the likelihood of problematic passwords, and because they enable users to avoid typing in passwords, they help reduce opportunities for password theft. With password managers, passwords are bound to the origin where they're generated, which makes it harder for passwords to be stolen by phishing sites, pretending to be something else. And that also helps stop social engineering attacks where users are tricked into providing their password on a site that's actually different from the site where they normally use it. So password managers are great for security, and they also improve sign-in completion rates. You might be concerned that password managers become a single point of failure, but that's far less likely than user-generated passwords being compromised. As security expert Troy Hunt put it, password managers don't have to be perfect, they just have to be better than not having one, and that's why organizations such as the UK National Cyber Security Centre advocate for them. You can check out links to their resources, by the way, in the description for this video. Now, you might also need to handle sign-in on multiple sites without requiring separate account handling for each site. For example, lots of global companies have a different top-level domain for each country where they operate, and you know, what about password management across web and native platforms? Browsers now have a way to set up affiliations that password managers can access. Android and Chrome offer digital asset links, iOS, macOS and Safari have shared web credentials. So for example, Chrome to enable the built-in password manager to work across sites, you create a JSON file like the one shown here. You host the file in the well-known directory for every site where you want to use it, in this example, the .com and .com AU sites. Make sure that your host permits Google to retrieve the file, adjusting your robots.txt if necessary. Now, to enable automatic sign-in across a website in Chrome and an app on Android, you create an asset links JSON file that declares the relationship between the website and the app. The JSON you serve here will be used on the app side, so you need to include the site itself as a target. Next, you need to declare the association in your Android app. Add a metadata element to the manifest file under application, and add an asset statements string resource to the strings.xml file, specifying the asset links JSON file to load. You'll then need to publish the app to the Play Store, released in the public channel. You can find out more about digital asset links from our article on developer.chrome.com. So, password managers can sync across devices, across native and web apps, and for new devices, so users don't have to worry. And each time you remove the necessity for the user to re-enter their password, you take away a point of vulnerability and the potential to lose a customer. Password managers like the one in Chrome also check for compromised passwords and allow you to check if any of your existing passwords have been compromised. And, you know, password managers really work. As a result of safety check and other improvements launched in 2020, we saw a 37% reduction in compromised credentials stored in Chrome. I mean, that's fantastic. All in all, password managers are a big step towards a future where users never need to think about or type in their passwords. So, again, as a developer, what can you do to make your sites more accessible to password managers? Well, you don't need to do anything fancy, just stick to widely supported, standardized web platform features. First up, make sure to use type equals password for password inputs, fancy tricks that do something different, you know, like flipping input type from text to password or setting like text security disk as the font of the text input or whatever. All this just makes it harder for password managers to understand what's going on. When the browser encounters a password input, it classifies the form that contains it as sign in, sign up or change password. Depending on the type of the form, the password manager changes its behavior. But, well, you know, how do password managers guess the form type? Well, different password managers use different heuristics to guess the form type and meaning of inputs. It's a wild world out there on the web, as you know, and browsers try to do their best. But you can help. First up, for a new password on a sign up or change password field, use autocomplete equals new password. And for the password input in a sign in form or the input for the user's old password in a change password form, use autocomplete equals current password. Another simple thing you can do to help your site work well with password managers, let users paste passwords. Not allowing password pasting, you know, can break password manager interactions. But, okay, what about people who don't want to use a password manager to generate and store passwords? What about rules for strong passwords? Password managers are great, but many people still want to use their own passwords. So you do need to implement rules for password strength. I won't go into the details here, but the US National Institute of Standards and Technology provides full guidance. Now, here's where we hit a problem and you've probably encountered this. We use your password manager to enter a strong password only to discover it's not acceptable for the website we're trying to sign up for. As a web developer, the answer is to set minimal rules on new passwords, but not to allow compromised passwords and not allow passwords that are in some way easy to guess or crack. Don't apply any other constraints, insisting on upper and lowercase letters, numbers, and you know, special characters doesn't in itself make a password secure. For example, like I said above, the password capital P4SSW0RD hash has been found in multiple data breaches, even though it satisfies password rules on many sites. Insisting on really long passwords kind of sounds good, but it can encourage insecure workarounds, such as repeating words or writing down passwords. Insisting on special characters encourages obvious substitutions and additions. Arbitrary constraints make password entry tiresome for users and password validation more complex for developers. Worst of all, your password rules may not allow strong passwords suggested by password managers, and that's likely to encourage weaker passwords made up by users attempting to fit the rules, or you know, they may just give up and leave your site. Rather than apply constraints on password format, you should make sure that new passwords are secure by, as I said, not allowing compromised passwords and not allowing passwords that are inherently weak. Avoid dictionary words, repeated or sequential characters, and context-specific words like product and usernames. Use an API such as Habibin Pone to check compromised passwords, and you can actually run that locally if you prefer, and you can use a tool like ZX-CVBN to check password strength. You know, Chrome engineers see all kinds of weird and wonderful stuff in code for password inputs in the wild. I mean, you know, forms within forms, multiple hidden password fields to deliberately confuse password managers. I mean, I could go on. You know that we've seen it. And the bottom line is don't do it. Complex or invalid HTML and sneaky JavaScript hacks are likely to make your sign-up and sign-in forms less secure, less likely to work with password managers, and more likely to increase form abandonment because, you know, they just don't work very well. Keep it simple, valid HTML, and no hacky JavaScript. Again, you can find out more from our resources on web.dev. Now, here's a final little tip. You can also help password managers by using different name and ID values in sign-up and sign-in forms for the form element itself, as well as any input select and text area elements. In Chrome, you can check how the browser interprets your autofill fields by setting the show autofill type predictions and enable show autofill signatures, flags. Now, the good news is that an increasing proportion of sign-ins are done using password managers. In Chrome, around 50% of website sign-ins are now assisted by the browser. And as I said in 2020, we saw a reduction of around 37% in compromised passwords. That is really great news, but, you know, there's still room for improvement. According to our research, even though the number is going up, which is great, still only 32% of people use a password manager. In most parts of the world, around 20% of people or more still physically write down passwords. You know, in the US, it's actually 25%. And it's like people putting, you know, passwords on yellow sticky labels on their computer screens or whatever. Anyway, we need to get that number down. So to find out more about working with passwords, like I say, check the links in the description below this video. And thank you so much for watching.