CINXE.COM
Identity | web.dev
<!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="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><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/web/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/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/identity"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.dev/identity" /><link rel="alternate" hreflang="x-default" href="https://web.dev/identity" /><link rel="alternate" hreflang="ar" href="https://web.dev/identity?hl=ar" /><link rel="alternate" hreflang="bn" href="https://web.dev/identity?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://web.dev/identity?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://web.dev/identity?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://web.dev/identity?hl=fa" /><link rel="alternate" hreflang="fr" href="https://web.dev/identity?hl=fr" /><link rel="alternate" hreflang="de" href="https://web.dev/identity?hl=de" /><link rel="alternate" hreflang="he" href="https://web.dev/identity?hl=he" /><link rel="alternate" hreflang="hi" href="https://web.dev/identity?hl=hi" /><link rel="alternate" hreflang="id" href="https://web.dev/identity?hl=id" /><link rel="alternate" hreflang="it" href="https://web.dev/identity?hl=it" /><link rel="alternate" hreflang="ja" href="https://web.dev/identity?hl=ja" /><link rel="alternate" hreflang="ko" href="https://web.dev/identity?hl=ko" /><link rel="alternate" hreflang="pl" href="https://web.dev/identity?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://web.dev/identity?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://web.dev/identity?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://web.dev/identity?hl=es-419" /><link rel="alternate" hreflang="th" href="https://web.dev/identity?hl=th" /><link rel="alternate" hreflang="tr" href="https://web.dev/identity?hl=tr" /><link rel="alternate" hreflang="vi" href="https://web.dev/identity?hl=vi" /><link rel="alternate" hreflang="en-cn" href="https://web.developers.google.cn/identity" /><link rel="alternate" hreflang="x-default" href="https://web.developers.google.cn/identity" /><link rel="alternate" hreflang="ar-cn" href="https://web.developers.google.cn/identity?hl=ar" /><link rel="alternate" hreflang="bn-cn" href="https://web.developers.google.cn/identity?hl=bn" /><link rel="alternate" hreflang="zh-Hans-cn" href="https://web.developers.google.cn/identity?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant-cn" href="https://web.developers.google.cn/identity?hl=zh-tw" /><link rel="alternate" hreflang="fa-cn" href="https://web.developers.google.cn/identity?hl=fa" /><link rel="alternate" hreflang="fr-cn" href="https://web.developers.google.cn/identity?hl=fr" /><link rel="alternate" hreflang="de-cn" href="https://web.developers.google.cn/identity?hl=de" /><link rel="alternate" hreflang="he-cn" href="https://web.developers.google.cn/identity?hl=he" /><link rel="alternate" hreflang="hi-cn" href="https://web.developers.google.cn/identity?hl=hi" /><link rel="alternate" hreflang="id-cn" href="https://web.developers.google.cn/identity?hl=id" /><link rel="alternate" hreflang="it-cn" href="https://web.developers.google.cn/identity?hl=it" /><link rel="alternate" hreflang="ja-cn" href="https://web.developers.google.cn/identity?hl=ja" /><link rel="alternate" hreflang="ko-cn" href="https://web.developers.google.cn/identity?hl=ko" /><link rel="alternate" hreflang="pl-cn" href="https://web.developers.google.cn/identity?hl=pl" /><link rel="alternate" hreflang="pt-BR-cn" href="https://web.developers.google.cn/identity?hl=pt-br" /><link rel="alternate" hreflang="ru-cn" href="https://web.developers.google.cn/identity?hl=ru" /><link rel="alternate" hreflang="es-419-cn" href="https://web.developers.google.cn/identity?hl=es-419" /><link rel="alternate" hreflang="th-cn" href="https://web.developers.google.cn/identity?hl=th" /><link rel="alternate" hreflang="tr-cn" href="https://web.developers.google.cn/identity?hl=tr" /><link rel="alternate" hreflang="vi-cn" href="https://web.developers.google.cn/identity?hl=vi" /><title>Identity | web.dev</title> <meta property="og:title" content="Identity | web.dev"><meta property="og:url" content="https://web.dev/identity"><meta property="og:image" content="https://web.dev/static/images/social-wide.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Identity" } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="web-theme" type="article" appearance layout="full" 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="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </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://web.dev/about" track-metadata-eventdetail="https://web.dev/about" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - about" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" > About </a> </tab> <tab > <a href="https://web.dev/html" track-metadata-eventdetail="https://web.dev/html" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - html" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" > HTML </a> </tab> <tab > <a href="https://web.dev/css" track-metadata-eventdetail="https://web.dev/css" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - css" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" > CSS </a> </tab> <tab > <a href="https://web.dev/javascript" track-metadata-eventdetail="https://web.dev/javascript" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - javascript" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" > JavaScript </a> </tab> <tab > <a href="https://web.dev/blog" track-metadata-eventdetail="https://web.dev/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 > <a href="https://web.dev/learn" track-metadata-eventdetail="https://web.dev/learn" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - learn" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" > Learn </a> </tab> <tab > <a href="https://web.dev/explore" track-metadata-eventdetail="https://web.dev/explore" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - explore" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" > Explore </a> </tab> <tab > <a href="https://web.dev/patterns" track-metadata-eventdetail="https://web.dev/patterns" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - patterns" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" > Patterns </a> </tab> <tab > <a href="https://web.dev/case-studies" track-metadata-eventdetail="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case studies" track-name="case studies" > Case studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="web.dev" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/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="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> </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="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="web.dev"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </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="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: About" track-name="about" data-category="Site-Wide Custom Events" data-label="Responsive Tab: About" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About </span> </a> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: HTML" track-name="html" data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: CSS" track-name="css" data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: JavaScript" track-name="javascript" data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </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="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Learn" track-name="learn" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Explore" track-name="explore" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Patterns" track-name="patterns" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <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: Case studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case studies </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></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" > <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" 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="web.dev" > web.dev </a> </li> </ul> </div> <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> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-hero devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <picture> <img alt="" src="https://web.dev/static/identity/image/hero-identity.png" srcset="https://web.dev/static/identity/image/hero-identity_36.png 36w,https://web.dev/static/identity/image/hero-identity_48.png 48w,https://web.dev/static/identity/image/hero-identity_72.png 72w,https://web.dev/static/identity/image/hero-identity_96.png 96w,https://web.dev/static/identity/image/hero-identity_480.png 480w,https://web.dev/static/identity/image/hero-identity_720.png 720w,https://web.dev/static/identity/image/hero-identity_856.png 856w,https://web.dev/static/identity/image/hero-identity_960.png 960w,https://web.dev/static/identity/image/hero-identity_1440.png 1440w,https://web.dev/static/identity/image/hero-identity_1920.png 1920w,https://web.dev/static/identity/image/hero-identity_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" fetchpriority="high"> </picture> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="identity" data-text="Identity" class="hide-from-toc no-link" tabindex="0"> Identity </h3> <div class="devsite-landing-row-item-description-content"> <p>Explore identity on the web and dive deep into advanced authentication systems! Here you'll find resources on how to build robust systems with modern APIs and create user-friendly experiences for signing in, signing up, and signing out. Explore articles, courses, and real-world success stories.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up wd-explore-3up" header-position="left" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="authentication-fundamentals" data-text="Authentication fundamentals" tabindex="0"> Authentication fundamentals </h2> <div class="devsite-landing-row-description"> Learn how to build sign-in and sign-up forms that are secure, accessible and easy to use, with cross-platform browser features like password management and form validation. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="best-practices" data-text="Best practices" class="hide-from-toc no-link" tabindex="0"> Best practices </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="sign-in-form-best-practices" data-text="Sign-in form best practices" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/sign-in-form-best-practices"> Sign-in form best practices </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="sign-up-form-best-practices" data-text="Sign-up form best practices" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/sign-up-form-best-practices"> Sign-up form best practices </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="what-makes-for-a-good-sign-out-experience" data-text="What makes for a good sign-out experience?" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/sign-out-best-practices"> What makes for a good sign-out experience? </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="codelabs" data-text="Codelabs" class="hide-from-toc no-link" tabindex="0"> Codelabs </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="use-cross-platform-browser-features-to-build-a-sign-in-form" data-text="Use cross-platform browser features to build a sign-in form" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/codelab-sign-in-form-best-practices"> Use cross-platform browser features to build a sign-in form </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="sign-up-form-best-practices-codelab" data-text="Sign-up form best practices codelab" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/codelab-sign-up-form-best-practices"> Sign-up form best practices codelab </a> </h4> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/learn/forms"> <picture> <img alt="" src="https://web.dev/static/learn/forms/card.png" srcset="https://web.dev/static/learn/forms/card_36.png 36w,https://web.dev/static/learn/forms/card_48.png 48w,https://web.dev/static/learn/forms/card_72.png 72w,https://web.dev/static/learn/forms/card_96.png 96w,https://web.dev/static/learn/forms/card_480.png 480w,https://web.dev/static/learn/forms/card_720.png 720w,https://web.dev/static/learn/forms/card_856.png 856w,https://web.dev/static/learn/forms/card_960.png 960w,https://web.dev/static/learn/forms/card_1440.png 1440w,https://web.dev/static/learn/forms/card_1920.png 1920w,https://web.dev/static/learn/forms/card_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="new-to-html-forms" data-text="New to HTML forms?" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/learn/forms"> New to HTML forms? </a> </h3> <div class="devsite-landing-row-item-description-content"> <p>Master HTML forms to help you improve your web developer expertise! Our <a href="/learn/forms">Learn Forms</a> course breaks down HTML forms into easy to understand pieces and guides you through form elements, styling forms, helping users re-entering data, ensuring the form is accessible and secure, testing your forms, and more.</p> </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/learn/forms" class="button left " >Learn Forms!</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up wd-explore-3up" header-position="left" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="passkeys" data-text="Passkeys" tabindex="0"> Passkeys </h2> <div class="devsite-landing-row-description"> Passkeys are an easier and more secure replacement for passwords, enabling users to sign in to their account by unlocking their device screen. Learn more about passkeys and how to implement them in your web app. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="add-passkeys-to-your-web-app" data-text="Add passkeys to your web app" class="hide-from-toc no-link" tabindex="0"> Add passkeys to your web app </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="understand-the-basics-of-passkeys" data-text="Understand the basics of passkeys" class=" no-link" tabindex="0"> <a href="https://developers.google.com/identity/passkeys/"> Understand the basics of passkeys </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="create-a-passkey-for-passwordless-logins" data-text="Create a passkey for passwordless logins" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/passkey-registration"> Create a passkey for passwordless logins </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="sign-in-with-a-passkey-through-form-autofill" data-text="Sign in with a passkey through form autofill" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/passkey-form-autofill"> Sign in with a passkey through form autofill </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="codelabs" data-text="Codelabs" class="hide-from-toc no-link" tabindex="0"> Codelabs </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="implement-passkeys-with-form-autofill-in-a-web-app" data-text="Implement passkeys with form autofill in a web app" class=" no-link" tabindex="0"> <a href="https://developers.google.com/codelabs/passkey-form-autofill/"> Implement passkeys with form autofill in a web app </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="set-up-a-re-authentication-functionality-with-webauthn" data-text="Set up a re-authentication functionality with WebAuthn" class=" no-link" tabindex="0"> <a href="https://developers.google.com/codelabs/webauthn-reauth/"> Set up a re-authentication functionality with WebAuthn </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="server-side-guides" data-text="Server-side guides" class="hide-from-toc no-link" tabindex="0"> Server-side guides </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="passkey-server-side-introduction" data-text="Passkey server-side introduction" class=" no-link" tabindex="0"> <a href="https://developers.google.com/identity/passkeys/developer-guides/server-introduction"> Passkey server-side introduction </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="passkey-registration-server-side" data-text="Passkey registration server-side " class=" no-link" tabindex="0"> <a href="https://developers.google.com/identity/passkeys/developer-guides/server-registration"> Passkey registration server-side </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="passkey-authentication-server-side" data-text="Passkey authentication server-side" class=" no-link" tabindex="0"> <a href="https://developers.google.com/identity/passkeys/developer-guides/server-authentication"> Passkey authentication server-side </a> </h4> </div> </div> </li> </ul> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="advanced-topics" data-text="Advanced topics" class="hide-from-toc no-link" tabindex="0"> Advanced topics </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="user-verification-deep-dive" data-text="User verification deep dive" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/webauthn-user-verification"> User verification deep dive </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="discoverable-credentials-deep-dive" data-text="Discoverable credentials deep dive" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/webauthn-discoverable-credentials"> Discoverable credentials deep dive </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="prevent-duplicate-credentials" data-text="Prevent duplicate credentials" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/webauthn-exclude-credentials"> Prevent duplicate credentials </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="determine-the-passkey-provider" data-text="Determine the passkey provider" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/webauthn-aaguid"> Determine the passkey provider </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="associate-related-origins" data-text="Associate related origins" class=" no-link" tabindex="0"> <a href="https://web.dev/articles/webauthn-related-origin-requests"> Associate related origins </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="keep-passkeys-consistent-with-the-server" data-text="Keep passkeys consistent with the server" class=" no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/identity/webauthn-signal-api"> Keep passkeys consistent with the server </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="passkey-upgrades" data-text="Passkey upgrades" class=" no-link" tabindex="0"> <a href="https://developers.google.com/identity/passkeys/developer-guides/upgrades"> Passkey upgrades </a> </h4> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-100 devsite-landing-row-no-image-background devsite-landing-row-cards devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="password-manager-compatible" data-text="Password Manager compatible" tabindex="0"> Password Manager compatible </h2> <div class="devsite-landing-row-description"> Help your users stay safe and secure by integrating with password managers for seamless cross-device sign-in across sites and apps along with automated password updates. </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="autofill" data-text="Autofill" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/learn/forms/autofill"> Autofill </a> </h3> <div class="devsite-landing-row-item-description-content"> Browsers can help users enter form parameters faster, and avoid re-entering them. This module teaches you how autofill works, and how `autocomplete` and other element attributes can ensure that browsers offer appropriate autofill options. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/learn/forms/autofill" class="button primary-button " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="change-the-password-easily" data-text="Change the password easily" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/change-password-url"> Change the password easily </a> </h3> <div class="devsite-landing-row-item-description-content"> Set up /.well-known/change-password to redirect to your change password page, so the password manager can bring users straight there. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/change-password-url" class="button primary-button " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="link-sites-and-apps-for-seamless-credential-sharing" data-text="Link sites and apps for seamless credential sharing" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/identity/seamless-credential-sharing"> Link sites and apps for seamless credential sharing </a> </h3> <div class="devsite-landing-row-item-description-content"> For sites (and apps!) that share a single sign-on make use of Digital Asset Links to make sure the password manager knows it's all the same account. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/identity/seamless-credential-sharing" class="button primary-button " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-100 devsite-landing-row-no-image-background devsite-landing-row-cards devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="streamline-sms-based-two-factor-authentication-user-experience" data-text="Streamline SMS based two-factor authentication user experience" tabindex="0"> Streamline SMS based two-factor authentication user experience </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="sms-otp-form-best-practices" data-text="SMS OTP form best practices" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/sms-otp-form"> SMS OTP form best practices </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to implement SMS OTP forms for two-factor authentication efficiently. This article provides cross-browsser best practices for using the WebOTP API and HTML form elements for a seamless user experience. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/sms-otp-form" class="button primary-button " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="verify-phone-numbers-on-the-web-with-the-webotp-api" data-text="Verify phone numbers on the web with the WebOTP API" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/web-otp"> Verify phone numbers on the web with the WebOTP API </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to improve the user-experience of phone number verification by programmatically getting an OTP from an SMS message. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/web-otp" class="button primary-button " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="verify-a-phone-number-on-desktop-using-webotp-api" data-text="Verify a phone number on desktop using WebOTP API" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.chrome.com/docs/identity/cross-device-webotp"> Verify a phone number on desktop using WebOTP API </a> </h3> <div class="devsite-landing-row-item-description-content"> WebOTP helps users enter a phone number verification code in one tap on a mobile website. It's available for desktop as well. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://developer.chrome.com/docs/identity/cross-device-webotp" class="button primary-button " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up wd-explore-3up" header-position="left" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="identity-federation" data-text="Identity federation" tabindex="0"> Identity federation </h2> <div class="devsite-landing-row-description"> Identity federation delegates authentication or authorization of an individual (user or entity) to a trusted external party (an identity provider or IdP). </div> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="understand-federation-at-google" data-text="Understand federation at Google" class="hide-from-toc no-link" tabindex="0"> Understand federation at Google </h3> <ul class="devsite-landing-row-item-list"> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="use-oauth-20-to-access-google-apis" data-text="Use OAuth 2.0 to access Google APIs" class=" no-link" tabindex="0"> <a href="https://developers.google.com/identity/protocols/oauth2"> Use OAuth 2.0 to access Google APIs </a> </h4> </div> </div> </li> <li class="devsite-landing-row-item-list-item"> <div class="devsite-landing-row-item-list-item-content" > <div class="devsite-landing-row-item-list-item-description"> <h4 id="set-up-openid-connect-compliant-oauth-20" data-text="Set up OpenID Connect compliant OAuth 2.0" class=" no-link" tabindex="0"> <a href="https://developers.google.com/identity/protocols/oauth2/openid-connect"> Set up OpenID Connect compliant OAuth 2.0 </a> </h4> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up devsite-landing-row-50 devsite-landing-row-no-image-background devsite-landing-row-cards" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header" > <div class="devsite-landing-row-header-text"> <h2 id="case-studies" data-text="Case studies" tabindex="0"> Case studies </h2> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="yahoo-japans-password-free-authentication-reduced-inquiries-by-25-sped-up-sign-in-time-by-26x" data-text="Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/case-studies/yahoo-japan-identity"> Yahoo! JAPAN's password-free authentication reduced inquiries by 25%, sped up sign-in time by 2.6x </a> </h3> <div class="devsite-landing-row-item-description-content"> Discover how Yahoo! JAPAN moved from password-based to passwordless authentication. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/case-studies/yahoo-japan-identity" class="button primary-button " >Read case study</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="white" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="goibibo-dropped-otp-retry-on-sign-up-by-25-with-webotp" data-text="Goibibo dropped OTP retry on sign-up by 25% with WebOTP" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/case-studies/goibibo#web-otp"> Goibibo dropped OTP retry on sign-up by 25% with WebOTP </a> </h3> <div class="devsite-landing-row-item-description-content"> As secure authentication is a big challenge in India, Goibibo used the WebOTP API to reduce sign-in friction on their PWA. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/case-studies/goibibo#web-otp" class="button primary-button " >Read case study</a> </div> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <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"]],[],[],[]] </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 wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <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=1400680&template=1857359" 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:1400680&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://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <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 2)" > 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 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/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="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-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "web.dev", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="cL9CzUH1b/axWVLr5y0yngalM3K9jJ"> (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/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/web/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,116,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","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_page_saving","Profiles__enable_release_notes_notifications","Cloud__enable_cloud_facet_chat","Cloud__enable_cloudx_experiment_ids","Profiles__enable_dashboard_curated_recommendations","DevPro__enable_developer_subscriptions","CloudShell__cloud_code_overflow_menu","Profiles__enable_public_developer_profiles","Profiles__enable_recognition_badges","Cloud__enable_cloud_shell_fte_user_flow","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__enable_variable_operator","TpcFeatures__enable_required_headers","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__enable_explain_this_code","Search__enable_page_map","Analytics__enable_clearcut_logging","Cloud__enable_cloudx_ping","Profiles__enable_completecodelab_endpoint","Cloud__enable_legacy_calculator_redirect","Concierge__enable_pushui","Search__enable_dynamic_content_confidential_banner","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_awarding_url","MiscFeatureFlags__emergency_css","Cloud__enable_free_trial_server_call","Cloud__enable_llm_concierge_chat","Profiles__enable_developer_profiles_callout","CloudShell__cloud_shell_button","Search__enable_suggestions_from_borg","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__developers_footer_image","Cloud__enable_cloud_dlp_service","DevPro__enable_cloud_innovators_plus","Search__enable_ai_eligibility_checks","Profiles__enable_profile_collections","MiscFeatureFlags__developers_footer_dark_image","BookNav__enable_tenant_cache_key","MiscFeatureFlags__enable_view_transitions","Experiments__reqs_query_experiments","OnSwitch__enable","Cloud__enable_cloud_shell"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-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,[38,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-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>