 Hi, everyone. I'm Eiji. In this session, I will tell you how to improve your SMS OTP forms. You will be able to make a huge difference to user experience with just a few small changes. Signing users in is a process to prove that the person trying to sign in is the same person who originally registered on your website. And many websites choose to use passwords to do so. However, passwords are known to be vulnerable. There are many traps waiting for your users and your website. Asking for additional evidence of ownership will help the user to prove their identity. One of the most popular ways to do that is to use SMS OTP, one-time password, as a second step for authentication. The user can prove their ownership of a phone number by entering an OTP delivered via SMS. Because phone numbers are universally unique, an SMS message can be used to prove a user is who they say they are. Let me show you how it works. Let's take a typical two-step verification as an example. A user enters a username and a password, and then the website asks for an OTP. Because the user has already registered their phone number on the website, the service can send an SMS message to the number with an OTP. The user then opens the SMS app and copies or remembers the OTP and enter that in the form. The website examines the submitted OTP and verifies that user. This is how SMS OTP is used in a typical two-step verification. There are a few more use cases for SMS OTP, phone number verification. Some services use a phone number as a user's primary identifier. In that case, users enter their phone number when signing in and enter an OTP received via SMS to prove their identity. Sometimes it's combined with a PIN to constitute a two-step verification, account recovery. When a user loses access to their account, there needs to be a way to recover it. Sending an email to their registered email address or an SMS OTP to their phone number is a common account recovery method. Payment confirmation. In payment systems, some banks or credit card issuers request additional authentication from the payer for better security. And some of them choose SMS OTP as a way to achieve that. Before diving into the best practices, there is one caveat. Even though I'm speaking about best practices on SMS OTP form, you should be aware that SMS OTP is not the most secure way of authentication by itself. This is because phone numbers are known to be recycled and sometimes hijacked. And the concept of OTP itself is not phishing resistant. If you are looking for better security, I would recommend using web authentication. You can learn more about web authentication from the talk I gave at the Chrome Dev Summit last year. With that in mind, let's dive into SMS OTP form best practices. Sam has already done an amazing job covering general best practices on building a signing form. You can learn more on his article and the video, but I will give you three specific tips on constructing an input field for an OTP. Don't use type number for the OTP input. Since that will add up and down increment arrows to the input on desktop, which doesn't make sense for OTPs. I recommend simply using text, but it doesn't matter much if you follow the next tip. Use input mode numeric. Since typical OTPs are digits, using input mode numeric helps mobile browser users enter an OTP by showing the optimized keyboard for entering numbers. Some good news is Firefox recently started supporting input mode, which makes it available on most mobile browsers. Another important attribute is auto-complete one-time code. This is only effective in Safari, but as it helps the browser outfield, I strongly recommend using it. iOS 12 and later heuristically detects an OTP from the SMS message and shows a suggestion on its keyboard for the user to enter the OTP to the form. Now let me talk a bit about SMS text message. There's a format you can align with to get the best out of OTP messages. And the good news is that the same format works across Safari and Chrome. Just append the following information at the last line of the message. The domain you are aiming to bind the OTP to preceded with an act. And the actual OTP preceded with a hash. By specifying a bound domain, the browser will assist the user entering an OTP only when the domain matches. By specifying an OTP in the format, the browser can retrieve the exact OTP you intend to deliver and prevent the browser from picking the wrong numbers using heuristics. Starting from iOS 14 and Mac OS Big Sur, Safari will respect this format with a bound domain in the message and assist the user to enter the OTP. Chrome also uses the same domain bound text format but with a different approach which is called Web OTP API. By using the Credential Management API, the website can obtain an OTP via SMS as an OTP credential upon a user consent and handle it infertively in JavaScript. You can check if the future is supported by examining if OTP credential is available. Simply calling navigator credentials get with a type of OTP and the transport of SMS instructs the browser to start waiting to receive an SMS message. As soon as the user received an SMS with the domain bound message format, a dialogue is displayed. After the user presses the Allow button, the API is resolved with the OTP which you can set as a value of the input field. Or unlike autocomplete, you can pass the OTP directly to the server. This is available in Chrome, Opera and Vivaldi for now but we are hoping this feature to be available on more browsers in the future as well. There are a few partners seeing amazing results by adopting the Web OTP API. Tinder, a matching app, improved OTP completion rate by 2.5%. Oil, a hotel booking service, reduced time to login by 37%. Goibibo, a travel booking service, reduced signup retry by 25%. Other players like Shoppay from Shopify, Twitter, Facebook are preparing to bring this feature as well. I can't wait to see Web OTP API to be available in many websites. Finally, let me recap. When you're building an SMS OTP form, use type text, input mode numeric and autocomplete one-time code for the input tag. Use a domain bound message format for an SMS message delivering an OTP. Use a Web OTP API to assist the user entering an OTP. You can learn more about these best practices at Web Dev SMS OTP form and more about Web OTP API at Web Dev Web OTP. Thank you for watching.