Streamlining the sign-in flow using credential management API | Blog

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Chrome for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1a73e8"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/chrome/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/touchicon-180.png"><link rel="canonical" href="https://developer.chrome.com/blog/credential-management-api"><link rel="search" type="application/opensearchdescription+xml" title="Chrome for Developers" href="https://developer.chrome.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.chrome.com/blog/credential-management-api" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.com/blog/credential-management-api" /><link rel="alternate" hreflang="ar" href="https://developer.chrome.com/blog/credential-management-api?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.chrome.com/blog/credential-management-api?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.chrome.com/blog/credential-management-api?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.chrome.com/blog/credential-management-api?hl=zh-tw" /><link rel="alternate" hreflang="nl" href="https://developer.chrome.com/blog/credential-management-api?hl=nl" /><link rel="alternate" hreflang="fa" href="https://developer.chrome.com/blog/credential-management-api?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.chrome.com/blog/credential-management-api?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.chrome.com/blog/credential-management-api?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.chrome.com/blog/credential-management-api?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.chrome.com/blog/credential-management-api?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.chrome.com/blog/credential-management-api?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.chrome.com/blog/credential-management-api?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.chrome.com/blog/credential-management-api?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.chrome.com/blog/credential-management-api?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.chrome.com/blog/credential-management-api?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.chrome.com/blog/credential-management-api?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.chrome.com/blog/credential-management-api?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.chrome.com/blog/credential-management-api?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.chrome.com/blog/credential-management-api?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.chrome.com/blog/credential-management-api?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.chrome.com/blog/credential-management-api?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://developer.chrome.google.cn/blog/credential-management-api" /><link rel="alternate" hreflang="x-default" href="https://developer.chrome.google.cn/blog/credential-management-api" /><link rel="alternate" hreflang="ar-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=zh-tw" /><link rel="alternate" hreflang="nl-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=nl" /><link rel="alternate" hreflang="fa-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://developer.chrome.google.cn/blog/credential-management-api?hl=vi" /><title>Streamlining the sign-in flow using credential management API  |  Blog  |  Chrome for Developers</title> <meta property="og:title" content="Streamlining the sign-in flow using credential management API  |  Blog  |  Chrome for Developers"><meta name="description" content="To provide a sophisticated user experience, it&#39;s important to help users authenticate themselves to your website. But creating, remembering and typing passwords tends to be cumbersome for end users, especially on mobile"> <meta property="og:description" content="To provide a sophisticated user experience, it&#39;s important to help users authenticate themselves to your website. But creating, remembering and typing passwords tends to be cumbersome for end users, especially on mobile"><meta property="og:url" content="https://developer.chrome.com/blog/credential-management-api"><meta property="og:locale" content="en"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Blog", "item": "https://developer.chrome.com/blog" },{ "@type": "ListItem", "position": 2, "name": "Streamlining the sign-in flow using credential management API", "item": "https://developer.chrome.com/blog/credential-management-api" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="chrome-theme" type="blog" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developer.chrome.com/case-studies" track-metadata-eventdetail="https://developer.chrome.com/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - get inspired" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" > Get inspired </a> </tab> <tab > <a href="https://developer.chrome.com/blog" track-metadata-eventdetail="https://developer.chrome.com/blog" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab class="devsite-dropdown devsite-dropdown-full "> <a href="https://developer.chrome.com/docs" track-metadata-eventdetail="https://developer.chrome.com/docs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Build with Chrome</li> <li class="devsite-nav-description">Learn how Chrome works, participate in origin trials, and build with Chrome everywhere. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/web-platform" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/web-platform" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web Platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/capabilities" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/capabilities" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Capabilities </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromedriver" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromedriver" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> ChromeDriver </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/extensions" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/extensions" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Extensions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/webstore" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/webstore" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chrome Web Store </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/chromium" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/chromium" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Chromium </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/aurora" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/aurora" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Aurora </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/android" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/android" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Web on Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/origintrials/" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Origin trials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/release-notes" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/release-notes" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="build with chrome" tooltip > <div class="devsite-nav-item-title"> Release notes </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Productivity</li> <li class="devsite-nav-description">Create the best experience for your users with the web's best tools.</li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/devtools" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/devtools" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> DevTools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/lighthouse" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/lighthouse" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Lighthouse </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/crux" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/crux" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Chrome UX Report </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/accessibility" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section dcc-subnav second-column-list"> <li class="devsite-nav-description">Get things done quicker and neater, with our ready-made libraries. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/workbox" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/workbox" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Workbox </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/puppeteer" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/puppeteer" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="productivity" tooltip > <div class="devsite-nav-item-title"> Puppeteer </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Experience</li> <li class="devsite-nav-description">Design a beautiful and performant web with Chrome. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/ai" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/ai" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> AI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/performance" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/performance" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/css-ui" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/css-ui" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> CSS and UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/identity" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/identity" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/payments" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/payments" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Payments </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs/privacy-security" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs/privacy-security" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="experience" tooltip > <div class="devsite-nav-item-title"> Privacy and security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section resources-icon dcc-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Resources</li> <li class="devsite-nav-description">More from the Chrome team. </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/docs" track-type="nav" track-metadata-eventdetail="https://developer.chrome.com/docs" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> All documentation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" track-type="nav" track-metadata-eventdetail="https://web.dev/baseline" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> Baseline </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" track-type="nav" track-metadata-eventdetail="https://web.dev" track-metadata-position="nav - docs" track-metadata-module="tertiary nav" track-metadata-module_headline="resources" tooltip > <div class="devsite-nav-item-title"> web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.chrome.com/new" track-metadata-eventdetail="https://developer.chrome.com/new" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - new in chrome" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" > New in Chrome </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Blog" tenant-name="Chrome for Developers" > <form class="devsite-search-form" action="https://developer.chrome.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/blog" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Blog" > Blog </a> </li> </ul> </div> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="chromeForDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Chrome for Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg" class="devsite-site-logo" alt="Chrome for Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Get inspired" track-name="get inspired" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get inspired" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get inspired </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Docs </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > <span class="devsite-nav-text" tooltip menu="Docs"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Docs"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/new" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: New in Chrome" track-name="new in chrome" data-category="Site-Wide Custom Events" data-label="Responsive Tab: New in Chrome" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > New in Chrome </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Docs" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build with Chrome </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/web-platform" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web Platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web Platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/capabilities" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Capabilities" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Capabilities </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromedriver" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeDriver" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeDriver </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/extensions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Extensions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Extensions </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/webstore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome Web Store" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome Web Store </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/chromium" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chromium" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chromium </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/aurora" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Aurora" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Aurora </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Web on Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Web on Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.chrome.com/origintrials/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Origin trials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Origin trials </span> </a> </li> <li class="devsite-nav-item"> <a href="/release-notes" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Release notes" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Release notes </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Productivity </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/devtools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: DevTools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > DevTools </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/lighthouse" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Lighthouse" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Lighthouse </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/crux" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chrome UX Report" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chrome UX Report </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/workbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Workbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Workbox </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/puppeteer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Puppeteer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Puppeteer </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/css-ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS and UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS and UI </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/payments" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Payments" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Payments </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/privacy-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy and security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy and security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All documentation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All documentation </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.chrome.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Chrome for Developers" > Chrome for Developers </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.chrome.com/blog" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Blog" > Blog </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Streamlining the sign-in flow using credential management API </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p><style> .wd-authors { --avatar-size: 65px; display: flex; gap: 2em; } .wd-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .wd-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-authors { --avatar-size: 65px; display: flex; gap: 2em; } .dcc-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .dcc-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-author__links a { margin-inline-end: 6px; } .dcc-author__links a:last-of-type { margin-inline-end: 0; } </style> <div class="dcc-authors" translate="no"> <div class="dcc-author"> <img class="devsite-landing-row-item-icon" alt="Eiji Kitamura" src="https://web.dev/images/authors/agektmr.jpg" decoding="async" height="64" loading="lazy" width="64"> <div> <span> Eiji Kitamura </span> <div class="dcc-author__links"> <a href="https://twitter.com/agektmr" aria-label="Eiji Kitamura on X" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 300 271"> <title>X</title> <path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"></path> </svg></a> <a href="https://github.com/agektmr" aria-label="Eiji Kitamura on GitHub" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32.6 31.8"> <title>GitHub</title> <path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" /> </svg></a> <a href="https://glitch.com/@agektmr" aria-label="Eiji Kitamura on Glitch" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"> <title>Glitch</title> <path fill="currentColor" d="M31.734 16.76c-.385-.198-4.536 1.865-5.427 1.693-2.24-.401-1.828-.667-4.839-1.359-1.203-.266-1.031-.109-1.297-.307-.172-.135-.344-.161-.599-.401 4-.719 6.026-1.693 6.734-1.839.76-.146 5.161 1.958 5.427 1.469.266-.495-.964-1.578-.401-3.031.589-1.464-.693-2.422.016-3.583.719-1.161.573-2.932.396-3.026-.396-.203-4.531 1.865-5.438 1.693-2.24-.417-1.828-.682-4.839-1.359-1.203-.271-1.031-.12-1.297-.323-.266-.198-.521-.13-1.036-.974-.521-.839-6.51-2.13-6.906-2.13-.828 0-2.375 2.13-2.375 2.13s-.599 0-2.401.094c-1.802.094-3.375.896-5.495 2.563C-.173 9.737.134 11.414.134 11.414s1.969.667 1.969 1.042c0 .359-1.729.802-1.729.802 1.12 1.411 4.583 2.745 5.464 2.745h.693c-1.438.281-2.823 1.068-4.583 2.438-2.12 1.698-1.813 3.375-1.813 3.375s1.969.667 1.969 1.026-1.729.802-1.729.802c1.12 1.427 4.583 2.76 5.464 2.76.844 0 1.427.026 2.495-.172.078.172.906 1.932 2.599 2.292 1.786.385 2.776.078 2.776.078s.094-.786-.323-1.573c1.547.161 3.307.203 5.026-.068 4.76-.719 7.12-1.865 7.896-2.01.76-.161 5.161 1.948 5.427 1.464.266-.505-.964-1.583-.385-3.036.573-1.469-.708-2.417 0-3.589.719-1.161.573-2.932.396-3.026zM4.615 11.828a1.446 1.446 0 0 1-.297-.042h-.052c-.026-.01-.052-.026-.078-.042l-.052-.01-.083-.042h-.052a.418.418 0 0 1-.068-.042l-.068-.052-.063-.036-.057-.042c-.021-.016-.042-.036-.063-.052l-.042-.042c-.026-.026-.047-.052-.068-.078l-.026-.031a1.954 1.954 0 0 1-.094-.104l-.026-.026c-.021-.036-.036-.073-.052-.109l-.026-.036-.057-.083c-.005-.021-.016-.042-.026-.063l-.026-.083-.026-.052-.016-.094-.01-.068c-.01-.026-.021-.052-.026-.078v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.297 0-.719-.505-1.307-1.146-1.307-.625 0-1.13.573-1.146 1.281 0-.932.667-1.693 1.495-1.693.823 0 1.479.745 1.479 1.682 0 .932-.667 1.693-1.479 1.693zm-1-1.265c0-.203.13-.365.318-.365s.307.161.307.365c0 .198-.135.344-.307.344s-.318-.161-.318-.344zm1 11.651a.712.712 0 0 1-.146 0l-.057-.016a.6.6 0 0 1-.094-.01l-.052-.016-.078-.026-.052-.026c-.031-.005-.057-.016-.083-.026l-.052-.026c-.021-.016-.047-.026-.068-.042L3.881 22l-.068-.052-.052-.042-.068-.052-.042-.042c-.031-.031-.063-.057-.089-.094a.671.671 0 0 1-.094-.12l-.031-.026c-.016-.031-.036-.063-.052-.094l-.026-.052c-.016-.026-.036-.052-.052-.078l-.026-.057-.026-.094-.026-.052-.031-.094-.01-.052c-.01-.031-.021-.063-.026-.094v-.068c.094.573.557 1.016 1.104 1.016.63 0 1.146-.573 1.146-1.292 0-.724-.505-1.297-1.146-1.297-.625 0-1.13.563-1.146 1.266 0-.932.667-1.693 1.495-1.693.823 0 1.479.76 1.479 1.682 0 .917-.667 1.693-1.479 1.693zm-1-1.266c0-.188.13-.349.318-.349s.307.161.307.349c0 .188-.135.344-.307.344s-.318-.146-.318-.344zm6.77-7.333v-.042l.042-.078.078-.297c.182-.583.344-1.172.479-1.771.161-.708.229-1.281.203-1.599-.016-.12-.031-.245-.052-.359a8.276 8.276 0 0 0-.521-1.724l-.083-.172-.026-.068c-.12-.266.057-.573.323-.557h.188l.531.036 2.104.109 1.151.078a28.24 28.24 0 0 1 10.573 2.828l.891.401c.172.078.266.307.188.505-.068.188-.266.292-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.146-.068-.51-.026-1.599-.094h-.156c.188.51.339 1.031.453 1.562l.063.427c.042.453-.036 1.078-.224 1.88l-.203.823a23.62 23.62 0 0 1-.385 1.323l-.026.078v.042c-.068.188-.266.292-.438.214-.177-.068-.271-.292-.203-.495zm-2-6.349a.307.307 0 0 1 .479.026c.208.26.396.536.563.828.292.531.495 1.068.547 1.615.026.307 0 .651-.052 1.026a8.718 8.718 0 0 1-.271 1.104c-.094.313-.208.62-.333.922-.078.188-.276.266-.453.172-.172-.094-.24-.318-.156-.521l.026-.052.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.052-.802a3.47 3.47 0 0 0-.453-1.292 4.794 4.794 0 0 0-.443-.667l-.036-.042a.417.417 0 0 1 .026-.531zm1.537 13.869c-.063.38-.151.76-.271 1.13a9.549 9.549 0 0 1-.333.906c-.078.188-.276.266-.453.177-.172-.094-.24-.323-.156-.521l.026-.057.068-.172c.073-.198.146-.396.214-.599.099-.328.182-.661.24-1 .052-.307.063-.573.036-.802a3.365 3.365 0 0 0-.438-1.276 4.794 4.794 0 0 0-.443-.667l-.036-.057a.417.417 0 0 1 .026-.531.3.3 0 0 1 .464 0c.214.266.396.547.563.839.292.536.495 1.083.547 1.615.026.307 0 .651-.052 1.026zm16.531.157c-.068.188-.266.297-.438.214l-.896-.401a27.695 27.695 0 0 0-10.359-2.786l-1.135-.063h-.063l-.458-.026c-.583-.036-1.172-.068-1.755-.094l.036.078c.234.615.396 1.255.479 1.906.042.453-.036 1.078-.224 1.88l-.203.828a24.99 24.99 0 0 1-.385 1.333l-.026.068v.036c-.068.203-.266.297-.438.229a.42.42 0 0 1-.203-.51v-.026l.042-.078.078-.292c.182-.589.344-1.177.479-1.776.161-.708.229-1.281.203-1.599-.016-.12-.031-.24-.052-.359a7.996 7.996 0 0 0-.521-1.708l-.052-.12-.031-.068-.026-.063c-.12-.271.057-.578.323-.563h.188l.531.042 2.12.104 1.135.083a28.14 28.14 0 0 1 10.573 2.823l.891.401c.172.078.266.307.188.505z"/> </svg></a> <a href="https://infosec.exchange/@agektmr" aria-label="Eiji Kitamura on Mastodon" rel="me"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16"> <title>Mastodon</title> <path fill="currentColor" d="M 15.659 9.592 C 15.424 10.72 13.553 11.956 11.404 12.195 C 10.283 12.32 9.18 12.434 8.003 12.384 C 6.079 12.302 4.56 11.956 4.56 11.956 C 4.56 12.13 4.572 12.297 4.595 12.452 C 4.845 14.224 6.478 14.33 8.025 14.379 C 9.586 14.429 10.976 14.02 10.976 14.02 L 11.04 15.337 C 11.04 15.337 9.948 15.884 8.003 15.984 C 6.93 16.039 5.598 15.959 4.047 15.576 C 0.683 14.746 0.104 11.4 0.015 8.006 C -0.012 6.998 0.005 6.048 0.005 5.253 C 0.005 1.782 2.443 0.765 2.443 0.765 C 3.672 0.238 5.782 0.017 7.975 0 L 8.029 0 C 10.221 0.017 12.332 0.238 13.561 0.765 C 13.561 0.765 15.999 1.782 15.999 5.253 C 15.999 5.253 16.03 7.814 15.659 9.592 Z M 13.124 5.522 L 13.124 9.725 L 11.339 9.725 L 11.339 5.646 C 11.339 4.786 10.951 4.35 10.175 4.35 C 9.317 4.35 8.887 4.867 8.887 5.891 L 8.887 8.124 L 7.113 8.124 L 7.113 5.891 C 7.113 4.867 6.683 4.35 5.825 4.35 C 5.049 4.35 4.661 4.786 4.661 5.646 L 4.661 9.725 L 2.876 9.725 L 2.876 5.522 C 2.876 4.663 3.111 3.981 3.582 3.476 C 4.067 2.971 4.703 2.712 5.493 2.712 C 6.406 2.712 7.098 3.039 7.555 3.695 L 8 4.39 L 8.445 3.695 C 8.902 3.039 9.594 2.712 10.507 2.712 C 11.297 2.712 11.933 2.971 12.418 3.476 C 12.889 3.981 13.124 4.663 13.124 5.522 Z" style="stroke:none;stroke-miterlimit:10;fill-rule:evenodd;"></path> </svg></a> </div> </div> </div> </div></p> <p>To provide a sophisticated user experience, it's important to help users authenticate themselves to your website. Authenticated users can interact with each other using a dedicated profile, sync data across devices, or process data while offline; the list goes on and on. But creating, remembering and typing passwords tends to be cumbersome for end users, especially on mobile screens which leads them to re-using the same passwords on different sites. This of course is a security risk.</p> <p>The latest version of Chrome (51) supports the <strong><a href="http://w3c.github.io/webappsec-credential-management/">Credential Management API</a></strong>. It's a standards-track proposal at the W3C that gives developers programmatic access to a browser's credential manager and helps users sign in more easily.</p> <aside class="warning"><b>Warning:</b> This API has been drastically updated and sample codes in this article won't work any longer. Checkout <a href="https://web.dev/articles/security-credential-management">the updated integration guide</a> or <a href="/blog/credential-management-updates">the update summary</a>.</aside> <aside class="note"><b>Note:</b> The new <a href="https://developers.google.com/identity/gsi/web/guides/overview">one tap sign-up and automatic sign-in API</a>, built on the Credential Management API, combines Google sign-in and password-based sign-in into one API call, and adds support for one-tap account creation. Consider using this new API instead of directly using the Credential Management API.</aside> <h2 id="what_is_the_credential_management_api" data-text="What is the Credential Management API?" tabindex="-1">What is the Credential Management API?</h2> <p>The Credential Management API enables developers to store and retrieve password credentials and federated credentials and it provides 3 functions:</p> <ul> <li><code translate="no" dir="ltr">navigator.credentials.get()</code></li> <li><code translate="no" dir="ltr">navigator.credentials.store()</code></li> <li><code translate="no" dir="ltr">navigator.credentials.requireUserMediation()</code></li> </ul> <p>By using these simple APIs, developers can do powerful things like:</p> <ul> <li>Enable users to sign in with just one tap.</li> <li>Remember the federated account the user has used to sign in with.</li> <li>Sign users back in when a session expires.</li> </ul> <p><devsite-video video-id="O3mBdKYMsMY"></devsite-video></p> <p>In Chrome's implementation, credentials will be stored in Chrome's password manager. If users are signed into Chrome, they can sync the user's passwords across devices. Those synced passwords can also be shared with Android apps which have integrated the <a href="https://developers.google.com/identity/smartlock-passwords/android/">Smart Lock for Passwords API for Android</a> <a href="https://developers.google.com/identity/smartlock-passwords/android/">for a seamless cross-platform experience</a>.</p> <h2 id="integrating_the_credential_management_api_with_your_site" data-text="Integrating the Credential Management API with your site" tabindex="-1">Integrating the Credential Management API with your site</h2> <p>The way you use the Credential Management API with your website can vary depending on its architecture. Is it a single page app? Is it a legacy architecture with page transitions? Is the sign-in form located only at the top page? Are sign-in buttons located everywhere? Can users meaningfully browse your website without signing in? Does federation work within popup windows? Or does it require interaction across multiple pages?</p> <p>It's nearly impossible to cover all those cases, but let's have a look at a typical single page app.</p> <ul> <li>The top page is a registration form.</li> <li>By tapping on "Sign In" button, users will navigate to a sign-in form.</li> <li>Both the registration and sign-in forms have the typical options of id/password credentials and federation, e.g. with Google Sign-In and Facebook Sign-In.</li> </ul> <p>By using Credential Management API, you will be able to add the following features to the site, for example:</p> <ul> <li><strong>Show an account chooser when signing in:</strong> Shows a native account chooser UI when a user taps "Sign In".</li> <li><strong>Store credentials:</strong> Upon <em>successful</em> sign-in, offer to store the credential information to the browser's password manager for later use.</li> <li><strong>Let the user automatically sign back in:</strong> Let the user sign back in if a session is expired.</li> <li><strong>Mediate auto sign-in:</strong> Once a user signs out, disable automatic sign-in for the next visit of the user.</li> </ul> <p>You can experience these features implemented in <a href="https://credential-management-sample.appspot.com">a demo site</a> with <a href="https://github.com/GoogleChrome/credential-management-sample">its sample code</a>.</p> <aside class="note"><b>Note:</b> This API needs to be used on secure origins such as HTTPS domains or localhost.</aside> <h3 id="show_the_account_chooser_when_signing_in" data-text="Show the Account Chooser when signing in" tabindex="-1">Show the Account Chooser when signing in</h3> <p>Between a user tap of a "Sign In" button and navigation to a sign-in form, you can use <a href="https://developer.mozilla.org/docs/Web/API/CredentialsContainer/get">navigator.credentials.get()</a> to get credential information. Chrome will show an account chooser UI from which the user can pick an account.</p> <figure> <img src="/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6.png" alt="An account chooser UI pops up for user to select an account to sign-in." width="800" height="576" srcset="https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_36.png 36w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_48.png 48w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_72.png 72w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_96.png 96w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_480.png 480w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_720.png 720w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_856.png 856w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_960.png 960w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_1440.png 1440w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_1920.png 1920w,https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="dcc-caption">An account chooser UI pops up for user to select an account to sign-in</figcaption> </figure> <h4 id="getting_a_password_credential_object" data-text="Getting a password credential object" tabindex="-1">Getting a password credential object</h4> <p>To show password credentials as account options, use <code translate="no" dir="ltr">password: true</code>.</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">navigator.credentials.get({ password: true, // `true` to obtain password credentials }).then(function(cred) { // continuation ... </code></pre> <h4 id="using_a_password_credential_to_sign_in" data-text="Using a password credential to sign in" tabindex="-1">Using a password credential to sign in</h4> <p>Once the user makes an account selection, the resolving function will receive a password credential. You can send it to the server using <code translate="no" dir="ltr">fetch()</code>:</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr"> // continued from previous example }).then(function(cred) { if (cred) { if (cred.type == 'password') { // Construct FormData object var form = new FormData(); // Append CSRF Token var csrf_token = document.querySelector('csrf_token').value; form.append('csrf_token', csrf_token); // You can append additional credential data to `.additionalData` cred.additionalData = form; // `POST` the credential object as `credentials`. // id, password and the additional data will be encoded and // sent to the url as the HTTP body. fetch(url, { // Make sure the URL is HTTPS method: 'POST', // Use POST credentials: cred // Add the password credential object }).then(function() { // continuation }); } else if (cred.type == 'federated') { // continuation </code></pre> <h4 id="using_a_federated_credential_to_sign_in" data-text="Using a federated credential to sign in" tabindex="-1">Using a federated credential to sign in</h4> <p>To show federated accounts to a user, add <code translate="no" dir="ltr">federated</code>, which takes an array of identity providers, to the <code translate="no" dir="ltr">get()</code> options.</p> <figure> <img src="/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8.png" alt="When multiple accounts are stored in the password manager." width="800" height="691" srcset="https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_36.png 36w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_48.png 48w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_72.png 72w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_96.png 96w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_480.png 480w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_720.png 720w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_856.png 856w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_960.png 960w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_1440.png 1440w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_1920.png 1920w,https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="dcc-caption"> When multiple accounts are stored in the password manager </figcaption> </figure> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">navigator.credentials.get({ password: true, // `true` to obtain password credentials federated: { providers: [ // Specify an array of IdP strings 'https://accounts.google.com', 'https://www.facebook.com' ] } }).then(function(cred) { // continuation ... </code></pre> <p>You can examine the <code translate="no" dir="ltr">type</code> property of the credential object to see if it's <code translate="no" dir="ltr">PasswordCredential</code> (<code translate="no" dir="ltr">type == 'password'</code>) or <code translate="no" dir="ltr">FederatedCredential</code> (<code translate="no" dir="ltr">type == 'federated'</code>). If the credential is a <a href="https://developer.mozilla.org/docs/Web/API/FederatedCredential"><code translate="no" dir="ltr">FederatedCredential</code></a>, you can call the appropriate API using information it contains.</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr"> }); } else if (cred.type == 'federated') { // `provider` contains the identity provider string switch (cred.provider) { case 'https://accounts.google.com': // Federated login using Google Sign-In var auth2 = gapi.auth2.getAuthInstance(); // In Google Sign-In library, you can specify an account. // Attempt to sign in with by using `login_hint`. return auth2.signIn({ login_hint: cred.id || '' }).then(function(profile) { // continuation }); break; case 'https://www.facebook.com': // Federated login using Facebook Login // continuation break; default: // show form break; } } // if the credential is `undefined` } else { // show form </code></pre> <figure> <img src="/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb.png" alt="Credentials managemente flow chart." width="496" height="632" srcset="https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_36.png 36w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_48.png 48w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_72.png 72w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_96.png 96w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_480.png 480w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_720.png 720w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_856.png 856w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_960.png 960w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_1440.png 1440w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_1920.png 1920w,https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h3 id="store_credentials" data-text="Store credentials" tabindex="-1">Store credentials</h3> <p>When a user signs in to your website using a form, you can use <a href="https://developer.mozilla.org/docs/Web/API/CredentialsContainer/store">navigator.credentials.store()</a> to store the credential. The user will be prompted to store it or not. Depending on the type of the credential, use <a href="https://developer.mozilla.org/docs/Web/API/PasswordCredential"><code translate="no" dir="ltr">new PasswordCredential()</code></a> or <a href="https://developer.mozilla.org/docs/Web/API/FederatedCredential"><code translate="no" dir="ltr">new FederatedCredential()</code></a> to create a credential object you'd like to store.</p> <figure> <img src="/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a.png" alt="Chrome asks users if they want to store the credential (or a federation provider)." width="800" height="383" srcset="https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_36.png 36w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_48.png 48w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_72.png 72w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_96.png 96w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_480.png 480w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_720.png 720w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_856.png 856w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_960.png 960w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_1440.png 1440w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_1920.png 1920w,https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="dcc-caption"> Chrome asks users if they want to store the credential (or a federation provider) </figcaption> </figure> <h4 id="creating_and_storing_a_password_credential_from_a_form_element" data-text="Creating and storing a password credential from a form element" tabindex="-1">Creating and storing a password credential from a form element</h4> <p>The following code uses <code translate="no" dir="ltr">autocomplete</code> attributes to automatically <a href="http://w3c.github.io/webappsec-credential-management/#passwordcredential-form-constructor">map</a> the form's elements to <a href="https://developer.mozilla.org/docs/Web/API/PasswordCredential">PasswordCredential</a> object parameters.</p> <p>HTML <code translate="no" dir="ltr">html <form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="******" /> </form></code></p> <p>JavaScript</p> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">var form = document.querySelector('\#form'); var cred = new PasswordCredential(form); // Store it navigator.credentials.store(cred) .then(function() { // continuation }); </code></pre> <h4 id="creating_and_storing_a_federated_credential" data-text="Creating and storing a federated credential" tabindex="-1">Creating and storing a federated credential</h4> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">// After a federation, create a FederatedCredential object using // information you have obtained var cred = new FederatedCredential({ id: id, // The id for the user name: name, // Optional user name provider: 'https://accounts.google.com', // A string that represents the identity provider iconURL: iconUrl // Optional user avatar image url }); // Store it navigator.credentials.store(cred) .then(function() { // continuation }); </code></pre> <figure> <img src="/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836.png" alt="Sign in flow diagram." width="408" height="513" srcset="https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_36.png 36w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_48.png 48w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_72.png 72w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_96.png 96w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_480.png 480w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_720.png 720w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_856.png 856w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_960.png 960w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_1440.png 1440w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_1920.png 1920w,https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h3 id="let_the_user_automatically_sign_back_in" data-text="Let the user automatically sign back in" tabindex="-1">Let the user automatically sign back in</h3> <p>When a user leaves your website and comes back later, it's possible that the session is expired. Don't bother the user to type their password every time they come back. Let the user automatically sign back in.</p> <figure> <img src="/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4.png" alt="When a user is automatically signed in, a notification will pop up." width="800" height="271" srcset="https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_36.png 36w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_48.png 48w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_72.png 72w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_96.png 96w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_480.png 480w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_720.png 720w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_856.png 856w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_960.png 960w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_1440.png 1440w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_1920.png 1920w,https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <figcaption class="dcc-caption"> When a user is automatically signed in, a notification will pop up. </figcaption> </figure> <h4 id="getting_a_credential_object" data-text="Getting a credential object" tabindex="-1">Getting a credential object</h4> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">navigator.credentials.get({ password: true, // Obtain password credentials or not federated: { // Obtain federation credentials or not providers: [ // Specify an array of IdP strings 'https://accounts.google.com', 'https://www.facebook.com' ] }, unmediated: true // `unmediated: true` lets the user automatically sign in }).then(function(cred) { if (cred) { // auto sign-in possible ... } else { // auto sign-in not possible ... } }); </code></pre> <p>The code should look similar to what you've seen in the "Show Account Chooser when Signing In" section. The only difference is that you will set <code translate="no" dir="ltr">unmediated: true</code>.</p> <p>This resolves the function immediately and gives you the credential to automatically sign the user in. There are a few conditions:</p> <ul> <li>The user has acknowledged the automatic sign-in feature in a warm welcome.</li> <li>The user has previously signed in to the website using the Credential Management API.</li> <li>The user has only one credential stored for your origin.</li> <li>The user did not explicitly sign out in the previous session.</li> </ul> <p>If any of these conditions are not met, the function will be rejected.</p> <figure> <img src="/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd.png" alt="Credential object flow diagram" width="465" height="543" srcset="https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_36.png 36w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_48.png 48w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_72.png 72w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_96.png 96w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_480.png 480w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_720.png 720w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_856.png 856w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_960.png 960w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_1440.png 1440w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_1920.png 1920w,https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h3 id="mediate_auto_sign-in" data-text="Mediate auto sign-in" tabindex="-1">Mediate auto sign-in</h3> <p>When a user signs out from your website, <strong>it's your responsibility to ensure that the user will not be automatically signed back in</strong>. To ensure this, the Credential Management API provides a mechanism called <strong>mediation</strong>. You can enable mediation mode by calling <a href="https://developer.mozilla.org/docs/Web/API/CredentialsContainer/requireUserMediation"><code translate="no" dir="ltr">navigator.credentials.requireUserMediation()</code></a>. As long as the user's mediation status for the origin is turned on, using <code translate="no" dir="ltr">unmediated: true</code> with <code translate="no" dir="ltr">navigator.credentials.get()</code>, that function will resolve with <code translate="no" dir="ltr">undefined</code>.</p> <h4 id="mediating_auto_sign-in" data-text="Mediating auto sign-in" tabindex="-1">Mediating auto sign-in</h4> <pre class="prettyprint lang-js" translate="no" dir="ltr"><code translate="no" dir="ltr">navigator.credentials.requireUserMediation(); </code></pre> <figure> <img src="/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff.png" alt="Auto sign-in flow chart." width="274" height="272" srcset="https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_36.png 36w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_48.png 48w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_72.png 72w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_96.png 96w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_480.png 480w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_720.png 720w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_856.png 856w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_960.png 960w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_1440.png 1440w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_1920.png 1920w,https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </figure> <h2 id="faq" data-text="FAQ" tabindex="-1">FAQ</h2> <p><strong>Is it possible for JavaScript on the website to retrieve a raw password?</strong> No. You can only obtain passwords as a part of <code translate="no" dir="ltr">PasswordCredential</code> and it's not exposable by any means.</p> <p><strong>Is it possible to store 3 set of digits for an id using Credential Management API?</strong> Not currently. Your <a href="https://github.com/w3c/webappsec-credential-management">feedback on the specification</a> will be highly appreciated.</p> <p><strong>Can I use the Credential Management API inside an iframe?</strong> The API is restricted to top-level contexts. Calls to <code translate="no" dir="ltr">.get()</code> or <code translate="no" dir="ltr">.store()</code> in an iframe will resolve immediately without effect.</p> <p><strong>Can I integrate my password management Chrome extension with the Credential Management API?</strong> You may override <code translate="no" dir="ltr">navigator.credentials</code> and hook it to your Chrome Extension to <code translate="no" dir="ltr">get()</code> or <code translate="no" dir="ltr">store()</code> credentials.</p> <h2 id="resources" data-text="Resources" tabindex="-1">Resources</h2> <p>To learn more about the Credential Management API, checkout <a href="https://developers.google.com/web/fundamentals/security/credential-management/">Integration Guide</a>.</p> <ul> <li><a href="https://www.w3.org/TR/credential-management/">API Specification</a></li> <li><a href="https://github.com/w3c/webappsec-credential-management">Spec discussions & feedback</a></li> <li><a href="https://developer.mozilla.org/docs/Web/API/Credential_Management_API">MDN API Reference</a></li> <li><a href="https://developers.google.com/web/fundamentals/security/credential-management/">Credential Management API Integration Guide</a></li> <li><a href="https://credential-management-sample.appspot.com">Demo</a></li> <li><a href="https://github.com/GoogleChrome/credential-management-sample">Demo source code</a></li> <li><a href="https://g.co/codelabs/cmapi">Codelab "Enabling auto sign-in with Credential Management API"</a></li> </ul> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2016-04-18 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2016-04-18 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400036&template=1897236" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400036&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/deprecated" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Archive </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.dev/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="nl" >Nederlands</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-5QF3RT2", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "blog", "projectName": "Blog", "signedIn": "False", "tenant": "chrome", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="Z7NHJH3rekUh1BhW6l1bE/OzcjF668"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/js/app_loader.js', '[53,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome","https://chrome-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/chrome/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/chrome/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","developer.chrome.com","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_recognition_badges","Search__enable_ai_eligibility_checks","EngEduTelemetry__enable_engedu_telemetry","BookNav__enable_tenant_cache_key","Profiles__enable_profile_collections","Profiles__enable_release_notes_notifications","TpcFeatures__enable_required_headers","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_llm_concierge_chat","Profiles__enable_completecodelab_endpoint","OnSwitch__enable","Cloud__enable_free_trial_server_call","Search__enable_suggestions_from_borg","Cloud__enable_cloud_shell","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__enable_view_transitions","DevPro__enable_developer_subscriptions","TpcFeatures__enable_mirror_tenant_redirects","Analytics__enable_clearcut_logging","Cloud__enable_cloudx_ping","Profiles__enable_page_saving","Profiles__enable_developer_profiles_callout","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__enable_project_variables","Cloud__enable_cloud_dlp_service","Cloud__enable_legacy_calculator_redirect","Profiles__enable_complete_playlist_endpoint","Profiles__enable_awarding_url","Search__enable_dynamic_content_confidential_banner","Experiments__reqs_query_experiments","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_firebase_utm","Search__enable_page_map","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__enable_explain_this_code","MiscFeatureFlags__emergency_css","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_shell_fte_user_flow","MiscFeatureFlags__enable_variable_operator","Concierge__enable_pushui","CloudShell__cloud_shell_button"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[53,"chrome","Chrome for Developers","developer.chrome.com",null,"chrome-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[69,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-5QF3RT2"],null,null,null,null,null,[["GTM-5QF3RT2",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Streamlining the sign-in flow using credential management API | Blog | Chrome for Developers