 Welcome back. I'm Sabine Borsé. I'm a product manager on the Chrome team working on authentication as You heard earlier today in Darren's keynote The purpose of progressive web apps is to improve user flows to reduce friction and to create really engaging Experiences and we've already given you tools to solve issues around reliability or to create app like experiences by adding PWS to the home screen and now we want to focus on two missing flows sign-in and payments Agi and I are going to start off and spend the next half hour by talking to you about how Chrome is Helping to remove friction from your sign-in flows by making signing in easier in a simple and secure way But the first of a step of course is getting users signed up And we all know entering all your information in long registration forms can be super frustrating Like this is how it looks like each time when I enter my credentials on my phone and The stats also confirm this about half of users would rather abandon a service than go through another registration form So we have a huge opportunity here to reduce friction in your sign-up flow and then really drive growth and conversions And let Chrome help you do this Chrome offers autofill functionality That makes it easier for users to fill out these forms faster and easier But sometimes things are ambiguous like here. It's unclear which of these fields represents the user name The identifier is it the username or is it the email address? It's unclear to the user. It's unclear to the browser for sure But the best thing to do with ambiguity is to be explicit and an easy way to be explicit here It's just to mark up your forms with autocomplete attributes And then you can make sure that your forms were perfectly with password autofill and I promise you it will only take you a few minutes So now that we got your users signed up The question is how to keep them signed in Maybe like this Probably not because there are all these buttons on the top You have to remember which of them you used last time or if you use the user name and password And then you have to remember which password you use so as you'll see a lot of things to remember and Let me now ask you a quick question here How many people in this room have run into the experience that they create an account for a site and Bam get this message that the account already exists Yeah, quite a few So as you can see it's full of friction and there are so many drop-off points along the way And I also just that's again show this here according to a study 92% of users would rather leave a site than reset their login information if they forgot their passwords That's 92% of people leaving just think about that and how much is assigned in user-worth to your business? So again really huge opportunity to get all those users that are abundant in your sign-in screens today To be signed in and become really engaged users if we just made things a bit easier For instance like this. So when a user returns to your site It would be dramatically better if they could just skip this sign-in form and go straight to an engaging personal life Experience and that means knowing who they are But the question is why is that so hard? It's because sign-in flows today are limited in ways that the browser is not So leveraging to position of the browser here is really the key because if a user is seemingly new to you They are not new to the browser And that's what we are focused on making signing in easier in a secure way through the browser and We do that with an API that we were talking about today the credential management API But before we dive right into that Let's assume for a moment that you have a really dedicated user and they found their way their way through all these possibilities and Successfully signed into your site. So are we done now? Nope, not quite yet because users typically don't stay sign-in for in that forever unlike on native apps So there is a unique challenge that we are facing here on the web Which are the different attack surfaces and threat models? Just think about cross-site scripting CRC or CSRF or Click-checking so session management on a web is really hard and as a result of that they are very different requirements for session management on the web and on native and and One one interesting thing we can do with service workers is Using two cook two tokens Short-lived and a long lift token where we use the service worker to refresh the short-lived token And if you're interested in learning more about this idea, then just check out that blog post that's linked from here So as you can see there are some avenues like this to explore for the long term But an easy way to handle this is using the credential management API It basically moves users from a state in which they are frequently Automatically signed out into a state which they can be automatically signed back in sounds good it's a it's a web platform API standards based and it allows the browser to facilitate the sign-in process with Information it has stored from the user And it does that in a frictionless fashion and also works across devices We shipped this API earlier this year in Chrome 51 and we announced it at Google IO and Since launch we have seen a bunch of developers shipping it like you can see here and We want to start off now by looking at two common problems that we are trying to solve with this API So on some sites like e-commerce travel or news sites sign-in is often not required It's really nice. It's really helpful, but it's not necessary So on those sites the credential management API can automatically sign the user in right on the home page And that's basically what you see here indicated with that smooth small blue button on the bottom of the screen the toast and And the user is being auto signed in here right on the home page And as mentioned earlier, we know that on on the web sessions often expire very frequently Sometimes within a day sometimes even within an hour ten minutes. So that means on those sites Basically every time a user returns to the site They are in a signed out state and then it requires quite some dedication from the user to find a user menu Click through a sign-in button and then be signed back in We know that most services can provide usually better Better experiences to users if they are signed in but that's not always immediately clear to the user So they might not see the value proposition of signing in right away Therefore, it's dramatically better if you can just automatically sign them in right on your home page like I mentioned but basically on any leaf page that the user might land on through a search and AliExpress for example in e-commerce site They have seen an 11% increase in conversion rates That means users who actually made a transaction and that's for users who signed in through the API in comparison with users who didn't sign in through the API and I've also seen some really really good UX improvements like an 85% drop in sign-in failure rate on the web or a 60% decrease in time spent signing in Now the Guardian has seen a 44% increase in users signed in on two or more devices across Chrome and the Android native app and Another common problem that we are trying to solve with this API is that password managers today are not really equipped Well to remember your federated sign-ins that means when you sign in for Facebook or with Google And that means those users often create duplicate accounts as you know because they just forgot that they already had an account and The credential management API can also help here because it can remember for the user that they're signed in with such a federated account Pinterest is a website that offers federated sign-in options too and They have seen a 10% increase in desktop web Logins for eligible users after they ship the credential management API and they've also seen a 3% increase in user engagement Now even if users switch between devices which is pretty common today and Let's say they download the native app for your service They can seamlessly continue that signed-in experience. Just they need to just be signed in with the same Google account And we call this password sync feature in Chrome smart lock for passwords and If you want to enable this cross-platform experience for your users You can do the mapping between your website and your native app and then you can also use the smart lock for passwords API is for your Android native app and With that, let me hand over to AG who is now going to show you the credential management API in practice Thanks, Sabin. My name is AG What I'm going to show you now is a credential management API in a demo with a website called polymer shop Which we introduced at Google IO this year Let me get it So this is a polymer shop website Imagine that I have just finished shopping experience through a guest checkout Experience and I'm about to create an account So first thing I should do is to enter my email address. So tap on it and now I see my email address pop up the nice thing about Using this browser is a auto-complete feature suggests me to use one of my email address that I have put into This browser in the past so I can just tap to enter my email address and Enter a random password and sign up And now you see a pop-up at the bottom of the page asking me if I want to store the credential information It's nice. So I can just save so now my Brother remembers my idea and password for me So what I'm going to show you now is a odd sign in in action But in order to make this demo exciting What I'm going to do is to swap this device With a new one. Let's see what happens So as soon as I tap on this icon, I'll be odd sign in to the same website Okay, one two three Boom I'm sending so what happened here is that the credential information I have stored to the browser to the other device was synchronized across my Google account and Propagated to this device and as soon as I landed on the same website, the credential management API picked up the credential Information and let me authenticate and me and let me sign in But sometimes you might want to keep Signed out in that case you can simply sign out That way you won't be signed out for the future So this is truly a frictionless sign-in experience But if I talk about sign-in extra frictionless sign-in experience, you might imagine about fidgeted logins fidgeted logins are as Sabin mentioned like Google sign-in or login Facebook login or some other options We have like Microsoft Yahoo Twitter GitHub, etc Luckily, we have a Google sign-in option right here. So let me try sign in So I sign in with a single tap What is new here is that if you look at the bottom of the page, I see a similar pop-up show up So I can store my identity information to the browser like Sabin mentioned so I can store Fidgeted login information to the browser So So far I have two accounts stored to this browser then what happens if I try to sign in Let me sign off again and try to sign in by pressing the button And now what do you see is a dialogue asking me To sign in with one or two accounts so I can simply tap of one of the top one of them to get sign in So this You might notice that I didn't type a single letter using a software keyboard This is really frictionless sign-in experience Let's get back to the slide So the benefit of credential management API, let me recap. The first thing is it enables OTS sign-in feature across devices and it also virtually enables a permanent session and it remembers fiddled accounts for me and I could use account chooser to skip forms without typing a single letter using software keyboard So I should say Credential management API eliminated whole bunch of frictions from the sign-in experience Right. So how can you as a developer bring the similar experience to your own website? So I'm going to dive into that The first thing you should do is to save credential information to the browser The form such as sign up sign in or change password is a great chance for Users to store the credential information to the browser So there are a few steps first interrupt the form submission Then send a request to the server using Ajax Then store the credential information and finally update the UI using a profile Before moving forward just make sure that your form is annotated well using the auto complete attribute that Submit mentioned earlier with that When the user submits a form prevents default interrupt it and prevent default and Prevent it to proceed to the next page. Why is that if the page transition happens This will move to the next page which means that credential information user has put into the previous page will be lost in the next page By making the very authentication call using Ajax You can retain the credential information in the same page while verifying the authentication credential Make sure to create an API on the server side which respond with HTTP code with 241 so that it can respond with the correct correctly to tell the browser that Authentication was successful or not Responding with a profile information would be ideal So after the authentication You are you can store the credential now Before doing so make sure that API is available Always keep in mind about the progressive enhancement To store the credential information Instantiate password credentials object with the form element that you have created as an argument Then call navigator.credentials.store if the API is not available you can just skip this step and Forward the profile information to the next step Once everything goes well you can update the UI or proceed to the personalized page and you are done Then in cases where you have your website has a federated logins Here's what you should do So federated logins are as Sabin mentioned a concept of signing into a website using a third party identity Such as Google, Facebook, Microsoft, etc So federated logins are based on a standard protocol such as OpenID Connect or OAuth There are two benefits of using it One is that users doesn't have to remember extra password to sign into your web your website and Second is that in general users can sign into your website just by one tap There are few steps first authenticate the user with the identity provider then store the credential information and update the UI So obviously by tapping on the button Kickstart the authentication flow So in order to authenticate the user using identity provider We should you should use kind of libraries provided by many different identity providers for Google We provide Google signing Facebook Provide Facebook logging that let me skip this step because it's quite complex and Just assume that you get authenticated and got the profile information So once the user is authenticated Create instantiate object called federated credential But in this case you're not storing ID and password instead you're storing identity of the user signed into the identity provider and also a string that represents the identity provider itself Name and icon URL are option Then call navierra.credentials.store The rest of the steps are similar to what I have mentioned in previous section. So let me skip that and The most exciting part of using credential management API is auto-signing All signing can happen anywhere on your website as long as you think it is appropriate. For example Top page is of course a good place to use auto-signing But some leaf pages such as news articles or item pages in Eekomus website is also a good place to enable auto-sign in To do so you get first you get a credential information then authenticate the user and finally update the UI Before getting a credential make sure that the user is not already signed in. Otherwise, it doesn't make much sense, right? So in order to get a credential call navierra.credentials.get By giving it a password and federated as option as parameters You can get especially by the type of the credential information you want to get And by giving it a made it true This will tell the browser that this is an auto-signing call So it won't show any UI for asking user to Choose from and it will return undefined if the user has no Credential information or there are multiple credentials stored or the user is signed out After the function is resolved you will just receive a credential object But if that is undefined which means that auto-signing didn't happen so you can just dismiss the whole process and Pretend like as if nothing happened And if you did get a credential object just examine the type and run the authentic Authentication flow depending on the type of the credential So the authentication flow is a similar with what I have described in previous sections And finally you can update the UI using a profile One tip I should note here is that if you did get a credential, but failed to authenticate That is going to be a little bit trouble because the user sees the blue bar popping up saying that's the user is signing in but if failed If there are no Sign of the failure user will be confused. So you should show an error message in this case And when the user is signed out you should disable auto-signing To do so sign out user first then call navigator.credentials.require user mediation This will turn off auto-signing feature and Finally when the user is trying to sign in you can show an account chooser So that user can select one of the accounts to sign in with This will also turn on Auto-signing feature back on There are a few steps again So first show the account chooser and once the user selects one of the accounts you will receive a credential information Then you can authenticate the user and update the UI finally. So most of the cases This is quite similar to what I have described for auto-signing. So by users explicit action Such as type tapping on the sign in button will show and Let let the account chooser to show up By calling navigator.credentials.get but at this time with immediate falls This will show an account chooser When the user has multiple accounts stored or user is signed out The rest of the steps are quite similar to auto-signing like I said, but except one thing If the user didn't choose any of the accounts Or dismissed the account chooser that means that there is no account that the user intended to sign in with Which means that user wants to sign in with other account, right? So you should show sign in form so that user can enter the other credential information and Let the user sign in and store another credential Okay, so I described a lot of complex stuff, but we have documents of this So you can just follow g.co-credential management API to learn more about this API and we are working on the More in-detail document. So hopefully it can be published today or tomorrow. I will Tweet about it using the hashtag. So please watch out With that, let me hand it back to Sabine Thanks, Eiji So we talked about session management and how to remove friction in your sign-in flows by using the credential API that we shipped earlier this year But there is one thing we haven't talked about yet today and we'd love to hear your feedback on that And that's the account verification step during sign up, you know When you sign up for an account you typically have to verify that account by digging up an email clicking on a Verification link or by copy pasting an OTP a one-time password from an SMS back into the site And what we've often heard from developers is that about 20 to 30 percent of their users drop off at this stage step just because it's another thing that adds friction and Android offers APIs to help with this for native apps and those apps that are using these APIs have seen Forgot to continue with the slides those have seen a higher conversion rates So we are now exploring whether we can bring something similar to chrome and and and the web and Again, we'd love to hear your feedback on this problem in general Either via the feedback form you can see here or just come and see us in person Eiji and I will be around looking forward to meeting you. Thanks