Sign In With Google JavaScript API reference | Authentication

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.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="Google for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#009688"><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/developers/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/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/identity/gsi/web/reference/js-reference"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developers.google.com/identity/gsi/web/reference/js-reference" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/identity/gsi/web/reference/js-reference" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=it" /><link rel="alternate" hreflang="ja" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/identity/gsi/web/reference/js-reference?hl=vi" /><title>Sign In With Google JavaScript API reference  |  Authentication  |  Google for Developers</title> <meta property="og:title" content="Sign In With Google JavaScript API reference  |  Authentication  |  Google for Developers"><meta property="og:url" content="https://developers.google.com/identity/gsi/web/reference/js-reference"><meta property="og:image" content="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/opengraph/teal.png"> <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_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Sign In With Google JavaScript API reference" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Google Identity", "item": "https://developers.google.com/identity" },{ "@type": "ListItem", "position": 2, "name": "Authentication", "item": "https://developers.google.com/identity/authentication" },{ "@type": "ListItem", "position": 3, "name": "Sign In With Google JavaScript API reference", "item": "https://developers.google.com/identity/gsi/web/reference/js-reference" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="teal" type="article" layout="docs" concierge='closed' 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"> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/identity" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Identity" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Identity </a> </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 class="devsite-dropdown devsite-active "> <a href="https://developers.google.com/identity/authentication" track-metadata-eventdetail="https://developers.google.com/identity/authentication" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - authentication" track-metadata-module="primary nav" aria-label="Authentication, selected" data-category="Site-Wide Custom Events" data-label="Tab: Authentication" track-name="authentication" > Authentication </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Authentication" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/authentication" track-metadata-position="nav - authentication" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Authentication" track-name="authentication" 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 "> <li class="devsite-nav-title" role="heading" tooltip>Sign In with Google SDKs</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/android-credential-manager" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/android-credential-manager" track-metadata-position="nav - authentication" track-metadata-module="tertiary nav" track-metadata-module_headline="sign in with google sdks" tooltip > <div class="devsite-nav-item-title"> Credential Manager for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/gsi/web/guides/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/gsi/web/guides/overview" track-metadata-position="nav - authentication" track-metadata-module="tertiary nav" track-metadata-module_headline="sign in with google sdks" tooltip > <div class="devsite-nav-item-title"> Sign In with Google for Web (including One Tap) </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/sign-in/ios/start" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/sign-in/ios/start" track-metadata-position="nav - authentication" track-metadata-module="tertiary nav" track-metadata-module_headline="sign in with google sdks" tooltip > <div class="devsite-nav-item-title"> Google Sign-In for iOS and macOS </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Industry standards</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/passkeys" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/passkeys" track-metadata-position="nav - authentication" track-metadata-module="tertiary nav" track-metadata-module_headline="sign in with google sdks" tooltip > <div class="devsite-nav-item-title"> Passkeys </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/openid-connect/openid-connect" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/openid-connect/openid-connect" track-metadata-position="nav - authentication" track-metadata-module="tertiary nav" track-metadata-module_headline="sign in with google sdks" tooltip > <div class="devsite-nav-item-title"> OpenID Connect </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Legacy Sign In</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/one-tap/android/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/one-tap/android/overview" track-metadata-position="nav - authentication" track-metadata-module="tertiary nav" track-metadata-module_headline="sign in with google sdks" tooltip > <div class="devsite-nav-item-title"> One Tap sign-up/sign-in for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/sign-in/android/legacy-start-integrating" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/sign-in/android/legacy-start-integrating" track-metadata-position="nav - authentication" track-metadata-module="tertiary nav" track-metadata-module_headline="sign in with google sdks" tooltip > <div class="devsite-nav-item-title"> Google Sign-In for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/sign-in/web/sign-in" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/sign-in/web/sign-in" track-metadata-position="nav - authentication" track-metadata-module="tertiary nav" track-metadata-module_headline="sign in with google sdks" tooltip > <div class="devsite-nav-item-title"> Google Sign-In for Web </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://developers.google.com/identity/authorization" track-metadata-eventdetail="https://developers.google.com/identity/authorization" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - authorization" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Authorization" track-name="authorization" > Authorization </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Authorization" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/authorization" track-metadata-position="nav - authorization" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Authorization" track-name="authorization" 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 "> <li class="devsite-nav-title" role="heading" tooltip>Call Google APIs</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/sign-in/android/authorize-access" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/sign-in/android/authorize-access" track-metadata-position="nav - authorization" track-metadata-module="tertiary nav" track-metadata-module_headline="call google apis" tooltip > <div class="devsite-nav-item-title"> Authorizing for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/oauth2/web/guides/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/oauth2/web/guides/overview" track-metadata-position="nav - authorization" track-metadata-module="tertiary nav" track-metadata-module_headline="call google apis" tooltip > <div class="devsite-nav-item-title"> Authorizing for Web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/sign-in/ios/api-access" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/sign-in/ios/api-access" track-metadata-position="nav - authorization" track-metadata-module="tertiary nav" track-metadata-module_headline="call google apis" tooltip > <div class="devsite-nav-item-title"> Authorizing for iOS/macOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/protocols/oauth2" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/protocols/oauth2" track-metadata-position="nav - authorization" track-metadata-module="tertiary nav" track-metadata-module_headline="call google apis" tooltip > <div class="devsite-nav-item-title"> Using OAuth 2.0 </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Share data with Google apps and devices</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/account-linking" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/account-linking" track-metadata-position="nav - authorization" track-metadata-module="tertiary nav" track-metadata-module_headline="call google apis" tooltip > <div class="devsite-nav-item-title"> Google Account Linking </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://developers.google.com/identity/credential-management" track-metadata-eventdetail="https://developers.google.com/identity/credential-management" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - credential management" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Credential management" track-name="credential management" > Credential management </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Credential management" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/credential-management" track-metadata-position="nav - credential management" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Credential management" track-name="credential management" 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 "> <li class="devsite-nav-title" role="heading" tooltip>Android</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/android-credential-manager" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/android-credential-manager" track-metadata-position="nav - credential management" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Credential Manager </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/blockstore/android" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/blockstore/android" track-metadata-position="nav - credential management" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Blockstore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/smartlock-passwords/android/associate-apps-and-sites" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/smartlock-passwords/android/associate-apps-and-sites" track-metadata-position="nav - credential management" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Digital Asset Links </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/guide/topics/text/autofill" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/topics/text/autofill" track-metadata-position="nav - credential management" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Android autofill framework </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Web</li> <li class="devsite-nav-item"> <a href="https://web.dev/sign-in-form-best-practices/" track-type="nav" track-metadata-eventdetail="https://web.dev/sign-in-form-best-practices/" track-metadata-position="nav - credential management" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Autocomplete </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Cross-platform</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/credential-sharing" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/credential-sharing" track-metadata-position="nav - credential management" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Seamless credential sharing </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://developers.google.com/identity/credential-verification" track-metadata-eventdetail="https://developers.google.com/identity/credential-verification" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - credential verification" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Credential verification" track-name="credential verification" > Credential verification </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Credential verification" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/credential-verification" track-metadata-position="nav - credential verification" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Credential verification" track-name="credential verification" 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 "> <li class="devsite-nav-title" role="heading" tooltip>Android</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/sms-retriever/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/sms-retriever/overview" track-metadata-position="nav - credential verification" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Verify users by SMS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/identity/phone-number-hint/android" track-type="nav" track-metadata-eventdetail="https://developers.google.com/identity/phone-number-hint/android" track-metadata-position="nav - credential verification" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Phone Number Hint </div> </a> </li> </ul> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Web</li> <li class="devsite-nav-item"> <a href="https://web.dev/web-otp/" track-type="nav" track-metadata-eventdetail="https://web.dev/web-otp/" track-metadata-position="nav - credential verification" track-metadata-module="tertiary nav" track-metadata-module_headline="android" tooltip > <div class="devsite-nav-item-title"> Verify phone numbers on the web </div> </a> </li> </ul> </div> </div> </div> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Authentication" tenant-name="Google for Developers" project-scope="/identity/authentication" url-scoped="https://developers.google.com/s/results/identity/authentication" > <form class="devsite-search-form" action="https://developers.google.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-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" >Español</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 fp-auth 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 "> <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://developers.google.com/identity/authentication" 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="Authentication" > Authentication </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developers.google.com/identity/android-credential-manager" track-metadata-eventdetail="https://developers.google.com/identity/android-credential-manager" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - credential manager for android" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Credential Manager for Android" track-name="credential manager for android" > Credential Manager for Android </a> </tab> <tab class="devsite-active"> <a href="https://developers.google.com/identity/gsi/web/guides/overview" track-metadata-eventdetail="https://developers.google.com/identity/gsi/web/guides/overview" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - sign in with google for web" track-metadata-module="primary nav" aria-label="Sign In with Google for Web, selected" data-category="Site-Wide Custom Events" data-label="Tab: Sign In with Google for Web" track-name="sign in with google for web" > Sign In with Google for Web </a> </tab> <tab > <a href="https://developers.google.com/identity/sign-in/ios/start-integrating" track-metadata-eventdetail="https://developers.google.com/identity/sign-in/ios/start-integrating" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - google sign-in for ios and macos" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Google Sign-In for iOS and macOS" track-name="google sign-in for ios and macos" > Google Sign-In for iOS and macOS </a> </tab> <tab > <a href="https://developers.google.com/identity/passkeys" track-metadata-eventdetail="https://developers.google.com/identity/passkeys" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - passkeys" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Passkeys" track-name="passkeys" > Passkeys </a> </tab> <tab > <a href="https://developers.google.com/identity/openid-connect/openid-connect" track-metadata-eventdetail="https://developers.google.com/identity/openid-connect/openid-connect" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - openid connect" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: OpenID Connect" track-name="openid connect" > OpenID Connect </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <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"> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/identity" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Identity" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Identity </a> </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="/identity/authentication" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Authentication" track-name="authentication" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Authentication" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Authentication </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: Authentication" track-name="authentication" > <span class="devsite-nav-text" tooltip menu="Authentication"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Authentication"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/identity/android-credential-manager" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Credential Manager for Android" track-name="credential manager for android" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Credential Manager for Android" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Credential Manager for Android </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/gsi/web/guides/overview" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Sign In with Google for Web" track-name="sign in with google for web" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Sign In with Google for Web" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Sign In with Google for Web </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/sign-in/ios/start-integrating" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Google Sign-In for iOS and macOS" track-name="google sign-in for ios and macos" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Sign-In for iOS and macOS" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Sign-In for iOS and macOS </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/passkeys" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Passkeys" track-name="passkeys" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Passkeys" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Passkeys </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/openid-connect/openid-connect" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: OpenID Connect" track-name="openid connect" data-category="Site-Wide Custom Events" data-label="Responsive Tab: OpenID Connect" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > OpenID Connect </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/identity/authorization" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Authorization" track-name="authorization" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Authorization" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Authorization </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: Authorization" track-name="authorization" > <span class="devsite-nav-text" tooltip menu="Authorization"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Authorization"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/identity/credential-management" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Credential management" track-name="credential management" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Credential management" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Credential management </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: Credential management" track-name="credential management" > <span class="devsite-nav-text" tooltip menu="Credential management"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Credential management"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/identity/credential-verification" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Credential verification" track-name="credential verification" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Credential verification" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Credential verification </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: Credential verification" track-name="credential verification" > <span class="devsite-nav-text" tooltip menu="Credential verification"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Credential verification"> </span> </span> </li> </ul> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Get started</span> </div></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/offerings" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/offerings" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/offerings" ><span class="devsite-nav-text" tooltip>Features</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/integrate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/integrate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/integrate" ><span class="devsite-nav-text" tooltip>Integration considerations</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/supported-browsers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/supported-browsers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/supported-browsers" ><span class="devsite-nav-text" tooltip>Supported browsers</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/get-google-api-clientid" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/get-google-api-clientid" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/get-google-api-clientid" ><span class="devsite-nav-text" tooltip>Setup</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/client-library" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/client-library" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/client-library" ><span class="devsite-nav-text" tooltip>Load the client library</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/tools/configurator" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/tools/configurator" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/tools/configurator" ><span class="devsite-nav-text" tooltip>Generate the integration code</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Case studies</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/identity/sign-in/case-studies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/case-studies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/case-studies" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/case-studies/pinterest" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/case-studies/pinterest" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/case-studies/pinterest" ><span class="devsite-nav-text" tooltip>Pinterest</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/case-studies/reddit" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/case-studies/reddit" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/case-studies/reddit" ><span class="devsite-nav-text" tooltip>Reddit</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/case-studies/iron-company" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/case-studies/iron-company" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/case-studies/iron-company" ><span class="devsite-nav-text" tooltip>Iron Company</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/case-studies/ebay" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/case-studies/ebay" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/case-studies/ebay" ><span class="devsite-nav-text" tooltip>eBay</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/case-studies/vikatan" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/case-studies/vikatan" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/case-studies/vikatan" ><span class="devsite-nav-text" tooltip>vikatan</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/case-studies/the-news-minute" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/case-studies/the-news-minute" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/case-studies/the-news-minute" ><span class="devsite-nav-text" tooltip>The News Minute</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Sign in With Google button</span> </div></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/personalized-button" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/personalized-button" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/personalized-button" ><span class="devsite-nav-text" tooltip>Understand personalized button</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/display-button" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/display-button" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/display-button" ><span class="devsite-nav-text" tooltip>Display the Sign in With Google button</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>One Tap guides</span> </div></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/features" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/features" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/features" ><span class="devsite-nav-text" tooltip>Understand the One Tap user experience</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/automatic-sign-in-sign-out" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/automatic-sign-in-sign-out" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/automatic-sign-in-sign-out" ><span class="devsite-nav-text" tooltip>Automatic sign-in and sign-out</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/display-google-one-tap" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/display-google-one-tap" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/display-google-one-tap" ><span class="devsite-nav-text" tooltip>Display the One Tap prompt</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/itp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/itp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/itp" ><span class="devsite-nav-text" tooltip>One Tap on ITP browsers</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Advanced topics</span> </div></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/verify-google-id-token" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/verify-google-id-token" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/verify-google-id-token" ><span class="devsite-nav-text" tooltip>Verify the Google ID token on your server side</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/toggle-outside-tap" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/toggle-outside-tap" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/toggle-outside-tap" ><span class="devsite-nav-text" tooltip>Toggle outside tap to close One Tap</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/change-sign-in-context" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/change-sign-in-context" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/change-sign-in-context" ><span class="devsite-nav-text" tooltip>Change the One Tap sign-in context</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/subdomains" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/subdomains" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/subdomains" ><span class="devsite-nav-text" tooltip>Display One Tap across subdomains</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/toggle-display-with-cookies" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/toggle-display-with-cookies" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/toggle-display-with-cookies" ><span class="devsite-nav-text" tooltip>Toggle the One Tap display with cookies</span></a></li> <li class="devsite-nav-item devsite-nav-deprecated"><a href="/identity/gsi/web/guides/change-position" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/change-position" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/change-position" ><span class="devsite-nav-text" tooltip>Change the One Tap prompt position</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/receive-notifications-prompt-ui-status" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/receive-notifications-prompt-ui-status" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/receive-notifications-prompt-ui-status" ><span class="devsite-nav-text" tooltip>Receive notifications on the prompt UI status</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/use-one-tap-js-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/use-one-tap-js-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/use-one-tap-js-api" ><span class="devsite-nav-text" tooltip>Use the JavaScript API</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/revoke" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/revoke" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/revoke" ><span class="devsite-nav-text" tooltip>Revoke an ID token</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/display-browsers-native-credential-manager" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/display-browsers-native-credential-manager" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/display-browsers-native-credential-manager" ><span class="devsite-nav-text" tooltip>Display the browser's native credential manager</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/handle-credential-responses-js-functions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/handle-credential-responses-js-functions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/handle-credential-responses-js-functions" ><span class="devsite-nav-text" tooltip>Handle credential responses with JavaScript functions</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/devices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/devices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/devices" ><span class="devsite-nav-text" tooltip>Sign-In on TVs and Limited Input Devices</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/amp/intermediate-iframe" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/amp/intermediate-iframe" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/amp/intermediate-iframe" ><span class="devsite-nav-text" tooltip>Integrate One Tap via an Iframe</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Resources</span> </div></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/fedcm-migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/fedcm-migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/fedcm-migration" ><span class="devsite-nav-text" tooltip>Migrate to FedCM</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/guides/migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/guides/migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/guides/migration" ><span class="devsite-nav-text" tooltip>Migrating from Google Sign-In</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/tools/configurator" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/tools/configurator" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/tools/configurator" ><span class="devsite-nav-text" tooltip>Code Generator</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Reference</span> </div></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/reference/html-reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/reference/html-reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/reference/html-reference" ><span class="devsite-nav-text" tooltip>HTML API</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/reference/js-reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/reference/js-reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/reference/js-reference" ><span class="devsite-nav-text" tooltip>JavaScript API</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/amp/nonamp-reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/amp/nonamp-reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/amp/nonamp-reference" ><span class="devsite-nav-text" tooltip>Intermediate Iframe API</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/amp/intermediate-support-reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/amp/intermediate-support-reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/amp/intermediate-support-reference" ><span class="devsite-nav-text" tooltip>Intermediate Iframe Support API</span></a></li> <li class="devsite-nav-item"><a href="/identity/gsi/web/reference/release-notes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/reference/release-notes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/reference/release-notes" ><span class="devsite-nav-text" tooltip>Release Notes</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Deprecated</span> </div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-deprecated"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Google Sign-In</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/identity/sign-in/web/deprecation-and-sunset" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/deprecation-and-sunset" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/deprecation-and-sunset" ><span class="devsite-nav-text" tooltip>Deprecation and sunset</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Basics</span> </div></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/sign-in" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/sign-in" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/sign-in" ><span class="devsite-nav-text" tooltip>Integrate Google Sign-In</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/people" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/people" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/people" ><span class="devsite-nav-text" tooltip>Get Profile Information</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/backend-auth" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/backend-auth" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/backend-auth" ><span class="devsite-nav-text" tooltip>Authenticate with a Backend Server</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Additional Capabilities</span> </div></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/build-button" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/build-button" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/build-button" ><span class="devsite-nav-text" tooltip>Customize the Sign-In Button</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/session-state" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/session-state" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/session-state" ><span class="devsite-nav-text" tooltip>Monitor the User's Session State</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/incremental-auth" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/incremental-auth" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/incremental-auth" ><span class="devsite-nav-text" tooltip>Request Additional Permissions</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/listeners" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/listeners" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/listeners" ><span class="devsite-nav-text" tooltip>Integrate Sign-In Using Listeners</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/server-side-flow" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/server-side-flow" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/server-side-flow" ><span class="devsite-nav-text" tooltip>Google Sign-In for Server-Side Apps</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/disconnect" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/disconnect" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/disconnect" ><span class="devsite-nav-text" tooltip>Disconnect and Revoke Scopes</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Cross-Platform Integration</span> </div></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/cross-platform-sign-in" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/cross-platform-sign-in" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/cross-platform-sign-in" ><span class="devsite-nav-text" tooltip>Cross-Platform Single Sign-In</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Resources</span> </div></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/troubleshooting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/troubleshooting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/troubleshooting" ><span class="devsite-nav-text" tooltip>Troubleshooting</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/gsi-with-fedcm" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/gsi-with-fedcm" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/gsi-with-fedcm" ><span class="devsite-nav-text" tooltip>Use FedCM APIs</span></a></li><li class="devsite-nav-item"><a href="/identity/sign-in/web/quick-migration-guide" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/quick-migration-guide" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/quick-migration-guide" ><span class="devsite-nav-text" tooltip>Migrate from Google+ Sign-In</span></a></li><li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Reference</span> </div></li><li class="devsite-nav-item devsite-nav-deprecated"><a href="/identity/sign-in/web/reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/sign-in/web/reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/sign-in/web/reference" ><span class="devsite-nav-text" tooltip>JavaScript Client Reference</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-deprecated"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Accelerated Mobile Pages</span><span class="devsite-nav-icon material-icons" data-icon="deprecated" data-title="Deprecated" aria-hidden="true"></span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/identity/gsi/web/amp/amp" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/amp/amp" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/amp/amp" ><span class="devsite-nav-text" tooltip>Display One Tap in AMP pages</span></a></li><li class="devsite-nav-item"><a href="/identity/gsi/web/amp/amp-reference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /identity/gsi/web/amp/amp-reference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/identity/gsi/web/amp/amp-reference" ><span class="devsite-nav-text" tooltip>AMP Component API</span></a></li></ul></div></li> </ul> <ul class="devsite-nav-list" menu="Authentication" 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 > Sign In with Google SDKs </span> </span> </li> <li class="devsite-nav-item"> <a href="/identity/android-credential-manager" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Credential Manager for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Credential Manager for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/gsi/web/guides/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Sign In with Google for Web (including One Tap)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Sign In with Google for Web (including One Tap) </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/sign-in/ios/start" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Sign-In for iOS and macOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Sign-In for iOS and macOS </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Industry standards </span> </span> </li> <li class="devsite-nav-item"> <a href="/identity/passkeys" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Passkeys" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Passkeys </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/openid-connect/openid-connect" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: OpenID Connect" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > OpenID Connect </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Legacy Sign In </span> </span> </li> <li class="devsite-nav-item"> <a href="/identity/one-tap/android/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: One Tap sign-up/sign-in for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > One Tap sign-up/sign-in for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/sign-in/android/legacy-start-integrating" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Sign-In for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Sign-In for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/sign-in/web/sign-in" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Sign-In for Web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Sign-In for Web </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Authorization" 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 > Call Google APIs </span> </span> </li> <li class="devsite-nav-item"> <a href="/identity/sign-in/android/authorize-access" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Authorizing for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Authorizing for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/oauth2/web/guides/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Authorizing for Web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Authorizing for Web </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/sign-in/ios/api-access" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Authorizing for iOS/macOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Authorizing for iOS/macOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/protocols/oauth2" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Using OAuth 2.0" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Using OAuth 2.0 </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Share data with Google apps and devices </span> </span> </li> <li class="devsite-nav-item"> <a href="/identity/account-linking" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Account Linking" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Account Linking </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Credential management" 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 > Android </span> </span> </li> <li class="devsite-nav-item"> <a href="/identity/android-credential-manager" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Credential Manager" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Credential Manager </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/blockstore/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blockstore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blockstore </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/smartlock-passwords/android/associate-apps-and-sites" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Digital Asset Links" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Digital Asset Links </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/guide/topics/text/autofill" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android autofill framework" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android autofill framework </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Web </span> </span> </li> <li class="devsite-nav-item"> <a href="https://web.dev/sign-in-form-best-practices/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Autocomplete" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Autocomplete </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Cross-platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/identity/credential-sharing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Seamless credential sharing" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Seamless credential sharing </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Credential verification" 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 > Android </span> </span> </li> <li class="devsite-nav-item"> <a href="/identity/sms-retriever/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Verify users by SMS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Verify users by SMS </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity/phone-number-hint/android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Phone Number Hint" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Phone Number Hint </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Web </span> </span> </li> <li class="devsite-nav-item"> <a href="https://web.dev/web-otp/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Verify phone numbers on the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Verify phone numbers on the web </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav > <devsite-content> <article class="devsite-article"> <div class="devsite-banner devsite-banner-announcement nocontent" background="google-red" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> Google Identity Services is migrating to FedCM APIs. Follow the <a href="/identity/gsi/web/guides/fedcm-migration">migration guide</a> to review potential changes and avoid negative impacts for user sign-in to your website. </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.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="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/products" 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="" > Products </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/identity" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Google Identity" > Google Identity </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/identity/authentication" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="Authentication" > Authentication </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/identity/gsi/web/guides/overview" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="5" track-type="globalNav" track-name="breadcrumb" track-metadata-position="5" track-metadata-eventdetail="" > Sign In with Google for Web </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <devsite-feedback position="header" project-name="Authentication" product-id="5186570" bucket="Identity guides" context="External devsite feedback" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" > <button> Send feedback </button> </devsite-feedback> <h1 class="devsite-page-title" tabindex="-1"> Sign In With Google JavaScript API reference </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>This reference page describes the Sign-In JavaScript API. You can use this API to display the One Tap prompt or Sign In With Google button on your web pages.</p> <h2 id="google.accounts.id.initialize" data-text="Method: google.accounts.id.initialize" tabindex="-1">Method: google.accounts.id.initialize</h2> <p>The <code translate="no" dir="ltr">google.accounts.id.initialize</code> method initializes the Sign In With Google client based on the configuration object. See the following code example of the method:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">initialize</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">IdConfiguration</span><span class="devsite-syntax-p">)</span> </code></pre></devsite-code> <p>The following code example implements the <code translate="no" dir="ltr">google.accounts.id.initialize</code> method with an <code translate="no" dir="ltr">onload</code> function:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><<span class="devsite-syntax-nx">script</span>> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">onload</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">initialize</span><span class="devsite-syntax-p">({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">client_id</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'YOUR_GOOGLE_CLIENT_ID'</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">callback</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">handleCredentialResponse</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">prompt</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">};</span> <<span class="devsite-syntax-err">/script</span>> </code></pre></devsite-code> <p>The <code translate="no" dir="ltr">google.accounts.id.initialize</code> method creates a Sign In With Google client instance that can be implicitly used by all modules in the same web page.</p> <ul> <li>You only need to call the <code translate="no" dir="ltr">google.accounts.id.initialize</code> method once even if you use multiple modules (like One Tap, Personalized button, revocation, etc.) in the same web page.</li> <li>If you do call the <code translate="no" dir="ltr">google.accounts.id.initialize</code> method multiple times, only the configurations in the last call is remembered and used.</li> </ul> <p>You actually reset the configurations whenever you call the <code translate="no" dir="ltr">google.accounts.id.initialize</code> method, and all subsequent methods in the same web page immediately use the new configurations.</p> <aside class="warning"><strong>Warning:</strong><span> The <code translate="no" dir="ltr">google.accounts.id.initialize</code> method should be called only once, even if you use both One Tap and button in the same web page.</span></aside> <h2 id="IdConfiguration" data-text="Data type: IdConfiguration" tabindex="-1">Data type: IdConfiguration</h2> <p>The following table lists the fields and descriptions of the <code translate="no" dir="ltr">IdConfiguration</code> data type:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Field</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#client_id"> client_id</a></code></td> <td>Your application's client ID</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#auto_select"> auto_select</a></code></td> <td>Enables automatic selection.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#callback"> callback</a></code></td> <td>The JavaScript function that handles ID tokens. Google One Tap and the Sign In With Google button <code translate="no" dir="ltr">popup</code> UX mode use this attribute.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#login_uri"> login_uri</a></code></td> <td>The URL of your login endpoint. The Sign In With Google button <code translate="no" dir="ltr">redirect</code> UX mode uses this attribute.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#native_callback"> native_callback</a></code></td> <td>The JavaScript function that handles password credentials.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#cancel_on_tap_outside"> cancel_on_tap_outside</a></code></td> <td>Cancels the prompt if the user clicks outside the prompt.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#prompt_parent_id"> prompt_parent_id</a></code></td> <td>The DOM ID of the One Tap prompt container element</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#nonce"> nonce</a></code></td> <td>A random string for ID tokens</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#context"> context</a></code></td> <td>The title and words in the One Tap prompt</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#state_cookie_domain"> state_cookie_domain</a></code></td> <td>If you need to call One Tap in the parent domain and its subdomains, pass the parent domain to this field so that a single shared cookie is used.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#ux_mode"> ux_mode</a></code></td> <td>The Sign In With Google button UX flow</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#allowed_parent_origin"> allowed_parent_origin</a></code></td> <td>The origins that are allowed to embed the intermediate iframe. One Tap is run in the intermediate iframe mode if this field is present. </td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#intermediate_iframe_close_callback"> intermediate_iframe_close_callback</a></code></td> <td>Overrides the default intermediate iframe behavior when users manually close One Tap. </td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#itp_support"> itp_support</a></code></td> <td>Enables upgraded One Tap UX on ITP browsers.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#login_hint"> login_hint</a></code></td> <td>Skip account selection by providing a user hint.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#hd"> hd</a></code></td> <td>Limit account selection by domain.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#use_fedcm_for_prompt"> use_fedcm_for_prompt</a></code></td> <td>Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#enable_redirect_uri_validation"> enable_redirect_uri_validation</a></code></td> <td>Enable button redirect flow that complies with <a href="/identity/protocols/oauth2/web-server#uri-validation">Redirect URI validation rules</a>.</td> </tr> </tbody> </table> <h3 id="client_id" data-text="client_id" tabindex="-1">client_id</h3> <p>This field is your application's client ID, which is found and created in the Google Cloud console. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Yes</td> <td><code translate="no" dir="ltr">client_id: "CLIENT_ID.apps.googleusercontent.com"</code></td> </tr> </tbody> </table> <h3 id="auto_select" data-text="auto_select" tabindex="-1">auto_select</h3> <p>This field determines if an ID token is automatically returned without any user interaction when there's only one Google session that has approved your app before. The default value is <code translate="no" dir="ltr">false</code>. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>boolean</td> <td>Optional</td> <td><code translate="no" dir="ltr">auto_select: true</code></td> </tr> </tbody> </table> <h3 id="callback" data-text="callback" tabindex="-1">callback</h3> <p>This field is the JavaScript function that handles the ID token returned from the One Tap prompt or the pop-up window. This attribute is required if Google One Tap or the Sign In With Google button <code translate="no" dir="ltr">popup</code> UX mode is used. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>function</td> <td>Required for One Tap and the <code translate="no" dir="ltr">popup</code> UX mode</td> <td><code translate="no" dir="ltr">callback: handleResponse</code></td> </tr> </tbody> </table> <h3 id="login_uri" data-text="login_uri" tabindex="-1">login_uri</h3> <p>This attribute is the URI of your login endpoint.</p> <p>The value must exactly match one of the authorized redirect URIs for the OAuth 2.0 client, which you <a href="/identity/gsi/web/guides/get-google-api-clientid">configured</a> in the Google Cloud console and must conform to our <a href="/identity/protocols/oauth2/web-server#uri-validation">Redirect URI validation rules</a>.</p> <p>This attribute may be omitted if the current page is your login page, in which case the credential is posted to this page by default.</p> <p>The ID token credential response is posted to your login endpoint when a user clicks on the Sign In With Google button and redirect UX mode is used.</p> <p>See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Optional</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>URL</td> <td>Defaults to the URI of the current page, or the value you specify.<br> Only used when <code translate="no" dir="ltr">ux_mode: "redirect"</code> is set.</td> <td><code translate="no" dir="ltr">login_uri: "https://www.example.com/login"</code></td> </tr> </tbody> </table> <p>Your login endpoint must handle POST requests containing a <a href="/identity/gsi/web/reference/js-reference#credential"><code translate="no" dir="ltr">credential</code></a> key with an ID token value in the body.</p> <p>The following is an example request to your login endpoint:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded><code translate="no" dir="ltr">POST /login HTTP/1.1 Host: www.example.com Content-Type: application/x-www-form-urlencoded credential=ID_TOKEN </code></pre></devsite-code><aside class="note"><strong>Note:</strong><span> With JavaScript API, the response of Google One Tap and the Sign In With Google button <code translate="no" dir="ltr">popup</code> UX mode can only be returned to the <code translate="no" dir="ltr">callback</code> JavaScript function. Try the <a href="/identity/gsi/web/reference/html-reference#data-login_uri">HTML API</a> if the response must be submitted automatically to <code translate="no" dir="ltr">login_uri</code>.</span></aside> <h3 id="native_callback" data-text="native_callback" tabindex="-1">native_callback</h3> <p>This field is the name of the JavaScript function that handles the password credential returned from the browser's native credential manager. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>function</td> <td>Optional</td> <td><code translate="no" dir="ltr">native_callback: handleResponse</code></td> </tr> </tbody> </table> <h3 id="cancel_on_tap_outside" data-text="cancel_on_tap_outside" tabindex="-1">cancel_on_tap_outside</h3> <p>This field sets whether or not to cancel the One Tap request if a user clicks outside the prompt. The default value is <code translate="no" dir="ltr">true</code>. You can disable it if you set the value to <code translate="no" dir="ltr">false</code>. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>boolean</td> <td>Optional</td> <td><code translate="no" dir="ltr">cancel_on_tap_outside: false</code></td> </tr> </tbody> </table> <h3 id="prompt_parent_id" data-text="prompt_parent_id" tabindex="-1">prompt_parent_id</h3> <p>This attribute sets the DOM ID of the container element. If it's not set, the One Tap prompt is displayed in the top-right corner of the window. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">prompt_parent_id: 'parent_id'</code></td> </tr> </tbody> </table> <h3 id="nonce" data-text="nonce" tabindex="-1">nonce</h3> <p>This field is a random string used by the ID token to prevent replay attacks. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">nonce: "biaqbm70g23"</code></td> </tr> </tbody> </table> <p>Nonce length is limited to the maximum JWT size supported by your environment, and individual browser and server HTTP size constraints.</p> <h3 id="context" data-text="context" tabindex="-1">context</h3> <p>This field changes the text of the title and messages in the One Tap prompt. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">context: "use"</code></td> </tr> </tbody> </table> <p>The following table lists <strong>all</strong> the available contexts and their descriptions:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Context</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">signin</code></td> <td>"Sign in with Google"</td> </tr> <tr> <td><code translate="no" dir="ltr">signup</code></td> <td>"Sign up with Google"</td> </tr> <tr> <td><code translate="no" dir="ltr">use</code></td> <td>"Use with Google"</td> </tr> </tbody> </table> <h3 id="state_cookie_domain" data-text="state_cookie_domain" tabindex="-1">state_cookie_domain</h3> <p>If you need to display One Tap in the parent domain and its subdomains, pass the parent domain to this field so that a single shared-state cookie is used. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">state_cookie_domain: "example.com"</code></td> </tr> </tbody> </table> <h3 id="ux_mode" data-text="ux_mode" tabindex="-1">ux_mode</h3> <p>Use this field to set the UX flow used by the Sign In With Google button. The default value is <code translate="no" dir="ltr">popup</code>. This attribute has no impact on the OneTap UX. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">ux_mode: "redirect"</code></td> </tr> </tbody> </table> <p>The following table lists the available UX modes and their descriptions.</p> <table class="responsive"> <thead> <tr> <th colspan=2>UX Mode</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">popup</code></td> <td>Performs sign-in UX flow in a pop-up window.</td> </tr> <tr> <td><code translate="no" dir="ltr">redirect</code></td> <td>Performs sign-in UX flow by a full page redirection.</td> </tr> </tbody> </table> <h3 id="allowed_parent_origin" data-text="allowed_parent_origin" tabindex="-1">allowed_parent_origin</h3> <p>The origins that are allowed to embed the intermediate iframe. One Tap runs in the intermediate iframe mode if this field is present. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string or string array</td> <td>Optional</td> <td><code translate="no" dir="ltr">allowed_parent_origin: "https://example.com"</code></td> </tr> </tbody> </table> <p>The following table lists the supported value types and their descriptions.</p> <table class="responsive"> <thead> <tr> <th colspan=3>Value Types</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">string</code></td> <td>A single domain URI.</td> <td><code translate="no" dir="ltr">"https://example.com"</code></td> </tr> <tr> <td><code translate="no" dir="ltr">string array</code></td> <td>An array of domain URIs.</td> <td><code translate="no" dir="ltr">["https://news.example.com", "https://local.example.com"]</code></td> </tr> </tbody> </table> <p>Wildcard prefixes are also supported. For example, <code translate="no" dir="ltr">"https://*.example.com"</code> matches <code translate="no" dir="ltr">example.com</code> and its subdomains at all levels (e.g <code translate="no" dir="ltr">news.example.com</code>, <code translate="no" dir="ltr">login.news.example.com</code>). Things to keep in mind when using wildcards:</p> <p><ul> <li>Pattern strings cannot be composed of only a wildcard and a top level domain. For example <code translate="no" dir="ltr">https://<em>.com</code> and <code translate="no" dir="ltr">https://</em>.co.uk </code> are invalid; As noted above, <code translate="no" dir="ltr">"https://<em>.example.com"</code> matches <code translate="no" dir="ltr">example.com</code> and its subdomains. You can also use an array to represent 2 different domains. For example, <code translate="no" dir="ltr">["https://example1.com", "https://</em>.example2.com"]</code> matches the domains <code translate="no" dir="ltr">example1.com</code>, <code translate="no" dir="ltr">example2.com</code> and subdomains of <code translate="no" dir="ltr">example2.com</code></li> <li>Wildcard domains must begin with a secure https:// scheme, and so <code translate="no" dir="ltr">"*.example.com"</code> is considered invalid.</li> </ul></p> <aside class="note"><strong>Note:</strong><span> Unlike the HTML API, a string with comma-separated URIs is invalid for the <code translate="no" dir="ltr">allowed_parent_origin</code> field. Use a JavaScript Array object instead.</span></aside> <p>If the value of <code translate="no" dir="ltr">allowed_parent_origin</code> field is invalid, the One Tap initialization of the intermediate iframe mode would fail and stop.</p> <h3 id="intermediate_iframe_close_callback" data-text="intermediate_iframe_close_callback" tabindex="-1">intermediate_iframe_close_callback</h3> <p>Overrides the default intermediate iframe behavior when users manually close One Tap by tapping on the 'X' button in the One Tap UI. The default behavior is to remove the intermediate iframe from the DOM immediately.</p> <p>The <code translate="no" dir="ltr">intermediate_iframe_close_callback</code> field takes effect only in intermediate iframe mode. And it has impact only to the intermediate iframe, instead of the One Tap iframe. The One Tap UI is removed before the callback is invoked.</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>function</td> <td>Optional</td> <td><code translate="no" dir="ltr">intermediate_iframe_close_callback: logBeforeClose</code></td> </tr> </tbody> </table> <h3 id="itp_support" data-text="itp_support" tabindex="-1">itp_support</h3> <p>This field determines if the <a href="/identity/gsi/web/guides/features#upgraded_ux_on_itp_browsers"> upgraded One Tap UX</a> should be enabled on browsers that support Intelligent Tracking Prevention (ITP). The default value is <code translate="no" dir="ltr">false</code>. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>boolean</td> <td>Optional</td> <td><code translate="no" dir="ltr">itp_support: true</code></td> </tr> </tbody> </table> <h3 id="login_hint" data-text="login_hint" tabindex="-1">login_hint</h3> <p>If your application knows in advance which user should be signed-in, it can provide a login hint to Google. When successful, account selection is skipped. Accepted values are: an email address or an ID token <a href="/identity/openid-connect/openid-connect#an-id-tokens-payload">sub</a> field value.</p> <p>For more information, see the <a href="/identity/protocols/oauth2/openid-connect#authenticationuriparameters">login_hint</a> field in the OpenID Connect documentation.</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>String, an email address or the value from an ID token <code translate="no" dir="ltr">sub</code> field.</td> <td>Optional</td> <td><code translate="no" dir="ltr">login_hint: 'elisa.beckett@gmail.com'</code></td> </tr> </tbody> </table> <h3 id="hd" data-text="hd" tabindex="-1">hd</h3> <p>When a user has multiple accounts and should only sign-in with their Workspace account use this to provide a domain name hint to Google. When successful, user accounts displayed during account selection are limited to the provided domain. A wildcard value: <code translate="no" dir="ltr">*</code> offers only Workspace accounts to the user and excludes consumer accounts (user@gmail.com) during account selection.</p> <p>For more information, see the <a href="/identity/protocols/oauth2/openid-connect#authenticationuriparameters">hd</a> field in the OpenID Connect documentation.</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>String. A fully qualified domain name or *.</td> <td>Optional</td> <td><code translate="no" dir="ltr">hd: '*'</code></td> </tr> </tbody> </table> <h3 id="use_fedcm_for_prompt" data-text="use_fedcm_for_prompt" tabindex="-1">use_fedcm_for_prompt</h3> <p>Allow the browser to control user sign-in prompts and mediate the sign-in flow between your website and Google. Defaults to false. See <a href="/identity/gsi/web/guides/fedcm-migration">Migrate to FedCM</a> page for more information.</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>boolean</td> <td>Optional</td> <td><code translate="no" dir="ltr">use_fedcm_for_prompt: true</code></td> </tr> </tbody> </table> <h3 id="enable_redirect_uri_validation" data-text="enable_redirect_uri_validation" tabindex="-1">enable_redirect_uri_validation</h3> <p>Enable button redirect flow that complies with <a href="/identity/protocols/oauth2/web-server#uri-validation">Redirect URI validation rules</a>.</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>boolean</td> <td>Optional</td> <td><code translate="no" dir="ltr">enable_redirect_uri_validation: true</code></td> </tr> </tbody> </table> <h2 id="google.accounts.id.prompt" data-text="Method: google.accounts.id.prompt" tabindex="-1">Method: google.accounts.id.prompt</h2> <p>The <code translate="no" dir="ltr">google.accounts.id.prompt</code> method displays the One Tap prompt or the browser native credential manager after the <code translate="no" dir="ltr">initialize()</code> method is invoked. See the following code example of the method:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">prompt</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-cm">/**</span> <span class="devsite-syntax-cm"> @type{(function(!PromptMomentNotification):void)=} */</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">momentListener</span><span class="devsite-syntax-p">)</span> </code></pre></devsite-code> <p>Normally, the <code translate="no" dir="ltr">prompt()</code> method is called on page load. Due to the session status and user settings on the Google side, the One Tap prompt UI might not be displayed. To get notified on the UI status for different moments, pass a function to receive UI status notifications.</p> <p>Notifications are fired on the following moments:</p> <ul> <li><strong>Display moment:</strong> This occurs after the <code translate="no" dir="ltr">prompt()</code> method is called. The notification contains a boolean value to indicate whether the UI is displayed or not.</li> <li><p><strong>Skipped moment:</strong> This occurs when the One Tap prompt is closed by an auto cancel, a manual cancel, or when Google fails to issue a credential, such as when the selected session has signed out of Google.</p> <p>In these cases, we recommend that you continue on to the next identity providers, if there are any.</p></li> <li><p><strong>Dismissed moment:</strong> This occurs when Google successfully retrieves a credential or a user wants to stop the credential retrieval flow. For example, when the user begins to input their username and password in your login dialog, you can call the <code translate="no" dir="ltr">google.accounts.id.cancel()</code> method to close the One Tap prompt and trigger a dismissed moment.</p> <aside class="warning"><strong>Warning:</strong><span> When on a dismissed moment, don't try any of the next identity providers.</span></aside></li> </ul> <p>The following code example implements the skipped moment:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><<span class="devsite-syntax-nx">script</span>> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">onload</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">initialize</span><span class="devsite-syntax-p">(...);</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">prompt</span><span class="devsite-syntax-p">((</span><span class="devsite-syntax-nx">notification</span><span class="devsite-syntax-p">)</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span>><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">if</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">notification</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">isNotDisplayed</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">||</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">notification</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">isSkippedMoment</span><span class="devsite-syntax-p">())</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-c1">// continue with another identity provider.</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">};</span> <<span class="devsite-syntax-err">/script</span>> </code></pre></devsite-code><aside class="note"><strong>Note:</strong><span> To improve user privacy, display moment notifications are intentionally delayed when FedCM is <a href="/identity/gsi/web/reference/js-reference#use_fedcm_for_prompt">enabled</a>. Notifications can be received up to 1 minute after the actual event took place.</span></aside><aside class="note"><strong>Note:</strong><span> For the native credential manager, there is no notification for display, skipped, or dismissed moments as these occur outside of the GIS library.</span></aside> <h2 id="PromptMomentNotification" data-text="Data type: PromptMomentNotification" tabindex="-1">Data type: PromptMomentNotification</h2> <p>The following table lists methods and descriptions of the <code translate="no" dir="ltr">PromptMomentNotification</code> data type:</p> <aside class="caution"><strong>Caution:</strong><span> FedCM changes affect <code translate="no" dir="ltr">isDisplayMoment()</code>, <code translate="no" dir="ltr">isDisplayed()</code>, <code translate="no" dir="ltr">isNotDisplayed()</code>, <code translate="no" dir="ltr">getNotDisplayedReason()</code>, and <code translate="no" dir="ltr">getSkippedReason()</code>.See <a href="/identity/gsi/web/guides/fedcm-migration">Migrate to FedCM</a> page for more information.</span></aside> <table class="responsive"> <thead> <tr> <th colspan=2>Method</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">isDisplayMoment()</code></td> <td> Is this notification for a display moment?<br><br> <b>Note: </b>When FedCM is <a href="/identity/gsi/web/reference/js-reference#use_fedcm_for_prompt"> enabled</a>, this notification is not fired. See <a href="/identity/gsi/web/guides/fedcm-migration">Migrate to FedCM</a> page for more information. </td> </tr> <tr> <td><code translate="no" dir="ltr">isDisplayed()</code></td> <td>Is this notification for a display moment, and the UI is displayed?<br><br> <b>Note: </b>When FedCM is <a href="/identity/gsi/web/reference/js-reference#use_fedcm_for_prompt"> enabled</a>, this notification is not fired. See <a href="/identity/gsi/web/guides/fedcm-migration">Migrate to FedCM</a> page for more information. </td> </tr> <tr> <td><code translate="no" dir="ltr">isNotDisplayed()</code></td> <td>Is this notification for a display moment, and the UI isn't displayed?<br><br> <b>Note: </b>When FedCM is <a href="/identity/gsi/web/reference/js-reference#use_fedcm_for_prompt"> enabled</a>, this notification is not fired. See <a href="/identity/gsi/web/guides/fedcm-migration">Migrate to FedCM</a> page for more information. </td> </tr> <tr> <td><code translate="no" dir="ltr">getNotDisplayedReason()</code></td> <td> <p>The detailed reason why the UI isn't displayed. The following are possible values:</p> <ul> <li><code translate="no" dir="ltr">browser_not_supported</code></li> <li><code translate="no" dir="ltr">invalid_client</code></li> <li><code translate="no" dir="ltr">missing_client_id</code></li> <li><code translate="no" dir="ltr">opt_out_or_no_session</code></li> <li><code translate="no" dir="ltr">secure_http_required</code></li> <li><code translate="no" dir="ltr">suppressed_by_user</code></li> <li><code translate="no" dir="ltr">unregistered_origin</code></li> <li><code translate="no" dir="ltr">unknown_reason</code></li> </ul> <b>Note: </b>When FedCM is <a href="/identity/gsi/web/reference/js-reference#use_fedcm_for_prompt"> enabled</a>, this method is not supported. See <a href="/identity/gsi/web/guides/fedcm-migration">Migrate to FedCM</a> page for more information. </td> </tr> <tr> <td><code translate="no" dir="ltr">isSkippedMoment()</code></td> <td>Is this notification for a skipped moment?</td> </tr> <tr> <td><code translate="no" dir="ltr">getSkippedReason()</code></td> <td> <p>The detailed reason for the skipped moment. The following are possible values:</p> <ul> <li><code translate="no" dir="ltr">auto_cancel</code></li> <li><code translate="no" dir="ltr">user_cancel</code></li> <li><code translate="no" dir="ltr">tap_outside</code></li> <li><code translate="no" dir="ltr">issuing_failed</code></li> </ul> <b>Note: </b>When FedCM is <a href="/identity/gsi/web/reference/js-reference#use_fedcm_for_prompt"> enabled</a>, this method is not supported. See <a href="/identity/gsi/web/guides/fedcm-migration">Migrate to FedCM</a> page for more information. </td> </tr> <tr> <td><code translate="no" dir="ltr">isDismissedMoment()</code></td> <td>Is this notification for a dismissed moment?</td> </tr> <tr> <td><code translate="no" dir="ltr">getDismissedReason()</code></td> <td> <p>The detailed reason for the dismissal. The following are possible values:</p> <ul> <li><code translate="no" dir="ltr">credential_returned</code></li> <li><code translate="no" dir="ltr">cancel_called</code></li> <li><code translate="no" dir="ltr">flow_restarted</code></li> </ul> </td> </tr> <tr> <td><code translate="no" dir="ltr">getMomentType()</code></td> <td> <p>Return a string for the moment type. The following are possible values:</p> <ul> <li><code translate="no" dir="ltr">display</code></li> <li><code translate="no" dir="ltr">skipped</code></li> <li><code translate="no" dir="ltr">dismissed</code></li> </ul> </td> </tr> </tbody> </table> <h2 id="CredentialResponse" data-text="Data type: CredentialResponse" tabindex="-1">Data type: CredentialResponse</h2> <p>When your <code translate="no" dir="ltr">callback</code> function is invoked, a <code translate="no" dir="ltr">CredentialResponse</code> object is passed as the parameter. The following table lists the fields that are contained in the credential response object:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Field</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr"><a href="#credential">credential</a></code></td> <td>This field is the returned ID token.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="#select_by">select_by</a></code></td> <td>This field sets how the credential is selected.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="#response_state">state</a></code></td> <td>This field is only defined when user clicks a Sign in with Google button to sign in, and the button's <code translate="no" dir="ltr"><a href="#state">state</a></code> attribute is specified.</td> </tr> </tbody> </table> <h3 id="credential" data-text="credential" tabindex="-1">credential</h3> <p>This field is the ID token as a base64-encoded JSON Web Token (JWT) string.</p> <p>When <a href="/identity/gsi/web/guides/handle-credential-responses-js-functions">decoded</a>, the JWT looks like the following example: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><span class="devsite-syntax-n">header</span> <span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"alg"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"RS256"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"kid"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"f05415b13acb9590f70df862765c655f5a7a019e"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">JWT</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">signature</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"typ"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"JWT"</span> <span class="devsite-syntax-p">}</span> <span class="devsite-syntax-n">payload</span> <span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"iss"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"https://accounts.google.com"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">The</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">JWT</span><span class="devsite-syntax-s1">'s issuer</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"nbf"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">161803398874</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"aud"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"314159265-pi.apps.googleusercontent.com"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">Your</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">server</span><span class="devsite-syntax-s1">'s client ID</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"sub"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"3141592653589793238"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">The</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">unique</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">ID</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">of</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">the</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">user</span><span class="devsite-syntax-s1">'s Google Account</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"hd"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"gmail.com"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">If</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">present</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">the</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">host</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">domain</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">of</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">the</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">user</span><span class="devsite-syntax-s1">'s GSuite email address</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"email"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"elisa.g.beckett@gmail.com"</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">The</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">user</span><span class="devsite-syntax-s1">'s email address</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"email_verified"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-bp">true</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-bp">true</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-k">if</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">Google</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">has</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">verified</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">the</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">email</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">address</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"azp"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"314159265-pi.apps.googleusercontent.com"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"name"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"Elisa Beckett"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">If</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">present</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">a</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">URL</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">to</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">user</span><span class="devsite-syntax-s1">'s profile picture</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"picture"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"https://lh3.googleusercontent.com/a-/e2718281828459045235360uler"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"given_name"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"Elisa"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"family_name"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"Beckett"</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"iat"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">1596474000</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">Unix</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">timestamp</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">of</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">the</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">assertion</span><span class="devsite-syntax-s1">'s creation time</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"exp"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-mi">1596477600</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">//</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">Unix</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">timestamp</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">of</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">the</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">assertion</span><span class="devsite-syntax-s1">'s expiration time</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"jti"</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s2">"abc161803398874def"</span> <span class="devsite-syntax-p">}</span></pre></devsite-code></p> <p>The <code translate="no" dir="ltr">sub</code> field is a globally unique identifier for the Google Account. <strong>Only</strong> use <code translate="no" dir="ltr">sub</code> field as identifier for the user as it is unique among all Google Accounts and never reused. <strong>Don't</strong> use email address as an identifier because a Google Account can have multiple email addresses at different points in time.</p> <p>Using the <code translate="no" dir="ltr">email</code>, <code translate="no" dir="ltr">email_verified</code> and <code translate="no" dir="ltr">hd</code> fields you can determine if Google hosts and is authoritative for an email address. In cases where Google is authoritative the user is confirmed to be the legitimate account owner.</p> <p>Cases where Google is authoritative:</p> <ul> <li><code translate="no" dir="ltr">email</code> has a <code translate="no" dir="ltr">@gmail.com</code> suffix, this is a Gmail Account.</li> <li><code translate="no" dir="ltr">email_verified</code> is true and <code translate="no" dir="ltr">hd</code> is set, this is a Google Workspace account.</li> </ul> <p>Users may register for Google Accounts without using Gmail or Google Workspace. When <code translate="no" dir="ltr">email</code> does not contain a <code translate="no" dir="ltr">@gmail.com</code> suffix and <code translate="no" dir="ltr">hd</code> is absent Google is not authoritative and password or other challenge methods are recommended to verify the user. <code translate="no" dir="ltr">email_verfied</code> can also be true as Google initially verified the user when the Google Account was created, however ownership of the third party email account may have since changed.</p> <p>The <code translate="no" dir="ltr">exp</code> field shows the expiration time for you to <a href="/identity/gsi/web/guides/verify-google-id-token">verify the token on your server side</a>. It is one hour for the ID token obtained from Sign In With Google. You need to <a href="/identity/gsi/web/guides/verify-google-id-token">verify the token</a> before the expiration time. <strong>Don't use <code translate="no" dir="ltr">exp</code> for session management</strong>. An expired ID token does <strong>not</strong> mean the user is signed out. Your app is responsible for session management of your users.</p> <h3 id="select_by" data-text="select_by" tabindex="-1">select_by</h3> <p>The following table lists the possible values for the <code translate="no" dir="ltr">select_by</code> field. The type of button used along with the session and consent state are used to set the value,</p> <ul> <li><p>The user pressed either the One Tap or Sign In With Google button or used the touchless Automatic sign-in process.</p></li> <li><p>An existing session was found, or the user selected and signed-in to a Google Account to establish a new session.</p></li> <li><p>Prior to sharing ID token credentials with your app the user either</p> <ul> <li>pressed the Confirm button to grant their consent to share credentials, or</li> <li>had previously granted consent and used Select an Account to choose a Google Account.</li> </ul></li> </ul> <p>The value of this field is set to one of these types,</p> <table> <thead> <tr> <th>Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">auto</code></td> <td>Automatic sign-in of a user with an existing session who had previously granted consent to share credentials. Applies only to non-FedCM supported browsers.</td> </tr> <tr> <td><code translate="no" dir="ltr">user</code></td> <td>A user with an existing session who had previously granted consent pressed the One Tap 'Continue as' button to share credentials. Applies only to non-FedCM supported browsers.</td> </tr> <tr> <td><code translate="no" dir="ltr">fedcm</code></td> <td>A user pressed the One Tap 'Continue as' button to share credentials using FedCM. Applies only to FedCM <a href="/identity/gsi/web/guides/supported-browsers">supported</a> browsers.</td> </tr> <tr> <td><code translate="no" dir="ltr">fedcm_auto</code></td> <td>Automatic sign-in of a user with an existing session who had previously granted consent to share credentials using FedCM One Tap. Applies only to FedCM <a href="/identity/gsi/web/guides/supported-browsers">supported</a> browsers.</td> </tr> <tr> <td><code translate="no" dir="ltr">user_1tap</code></td> <td>A user with an existing session pressed the One Tap 'Continue as' button to grant consent and share credentials. Applies only to Chrome v75 and higher. </td> </tr> <tr> <td><code translate="no" dir="ltr">user_2tap</code></td> <td>A user without an existing session pressed the One Tap 'Continue as' button to select an account and then pressed the Confirm button in a pop-up window to grant consent and share credentials. Applies to non-Chromium based browsers. </td> </tr> <tr> <td><code translate="no" dir="ltr">itp</code></td> <td>A user with an existing session who had previously granted consent pressed the One Tap on <a href="/identity/gsi/web/guides/itp">ITP</a> browsers. </td> </tr> <tr> <td><code translate="no" dir="ltr">itp_confirm</code></td> <td>A user with an existing session pressed the One Tap on <a href="/identity/gsi/web/guides/itp">ITP</a> browsers and pressed the Confirm button to grant consent and share credentials. </td> </tr> <tr> <td><code translate="no" dir="ltr">itp_add_session</code></td> <td>A user without an existing session who previously granted consent pressed the One Tap on <a href="/identity/gsi/web/guides/itp">ITP</a> browsers to select a Google Account and share credentials. </td> </tr> <tr> <td><code translate="no" dir="ltr">itp_confirm_add_session</code></td> <td>A user without an existing session first pressed the One Tap on <a href="/identity/gsi/web/guides/itp">ITP</a> browsers to select a Google Account and then pressed the Confirm button to consent and share credentials. </td> </tr> <tr> <td><code translate="no" dir="ltr">btn</code></td> <td>A user with an existing session who previously granted consent pressed the Sign In With Google button and selected a Google Account from 'Choose an Account' to share credentials. </td> </tr> <tr> <td><code translate="no" dir="ltr">btn_confirm</code></td> <td>A user with an existing session pressed the Sign In With Google button and pressed the Confirm button to grant consent and share credentials. </td> </tr> <tr> <td><code translate="no" dir="ltr">btn_add_session</code></td> <td>A user without an existing session who previously granted consent pressed the Sign In With Google button to select a Google Account and share credentials. </td> </tr> <tr> <td><code translate="no" dir="ltr">btn_confirm_add_session</code></td> <td>A user without an existing session first pressed the Sign In With Google button to select a Google Account and then pressed the Confirm button to consent and share credentials. </td> </tr> </tbody> </table> <h3 id="response_state" data-text="state" tabindex="-1">state</h3> <p>This field is only defined when user clicks a Sign in with Google button to sign in, and the clicked button's <a href="#state"><code translate="no" dir="ltr">state</code></a> attribute is specified. The value of this field is the same value you specified in the button's <a href="#state"><code translate="no" dir="ltr">state</code></a> attribute.</p> <p>As multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. Hence, you can this <code translate="no" dir="ltr">state</code> field to identify which button user clicked to sign in.</p> <h2 id="google.accounts.id.renderButton" data-text="Method: google.accounts.id.renderButton" tabindex="-1">Method: google.accounts.id.renderButton</h2> <p>The <code translate="no" dir="ltr">google.accounts.id.renderButton</code> method renders a Sign In With Google button in your web pages.</p> <p>See the following code example of the method:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">renderButton</span><span class="devsite-syntax-p">(</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-cm">/** @type{!HTMLElement} */</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">parent</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-cm">/** @type{!GsiButtonConfiguration} */</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">options</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">)</span> </code></pre></devsite-code> <h2 id="GsiButtonConfiguration" data-text="Data type: GsiButtonConfiguration" tabindex="-1">Data type: GsiButtonConfiguration</h2> <p>The following table lists the fields and descriptions of the <code translate="no" dir="ltr">GsiButtonConfiguration</code> data type:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Attribute</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#type"> type</a></code></td> <td>The button type: icon, or standard button.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#theme"> theme</a></code></td> <td>The button theme. For example, filled_blue or filled_black.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#size"> size</a></code></td> <td>The button size. For example, small or large.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#text"> text</a></code></td> <td>The button text. For example, "Sign in with Google" or "Sign up with Google". </td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#shape"> shape</a></code></td> <td>The button shape. For example, rectangular or circular.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#logo_alignment"> logo_alignment</a></code></td> <td>The Google logo alignment: left or center.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#width"> width</a></code></td> <td>The button width, in pixels.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#locale"> locale</a></code></td> <td>If set, then the button language is rendered.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#click_listener"> click_listener</a></code></td> <td>If set, this function is called when the Sign in with Google button is clicked.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#state"> state</a></code></td> <td>If set, this string returns with the ID token.</td> </tr> </tbody> </table> <h3 id="attribute_types" data-text="Attribute types" tabindex="-1">Attribute types</h3> <p>The following sections contain details about each attribute's type, and an example.</p> <h4 id="type" data-text="type" tabindex="-1">type</h4> <p>The button type. The default value is <code translate="no" dir="ltr">standard</code>.</p> <p>See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Yes</td> <td><code translate="no" dir="ltr">type: "icon"</code></td> </tr> </tbody> </table> <p>The following table lists the available button types and their descriptions:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Type</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">standard</code></td> <td> <figure> <img src="/static/identity/gsi/web/images/standard-button-white.png" style="margin: 20px 20px 20px 50px; height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/personalized-button-single.png" style="margin: 20px 40px 20px 0; height: 40px;" alt=""> <figcaption> Button with text or personalized information. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">icon</code></td> <td> <figure> <img src="/static/identity/gsi/web/images/icon-button-white.png" style="margin: 20px 50px; height: 40px;" alt=""> <figcaption> An icon button without text. </figcaption> </figure> </td> </tr> </tbody> </table> <h4 id="theme" data-text="theme" tabindex="-1">theme</h4> <p>The button theme. The default value is <code translate="no" dir="ltr">outline</code>. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">theme: "filled_blue"</code></td> </tr> </tbody> </table> <p>The following table lists the available themes and their descriptions:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Theme</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">outline</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-white.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-white.png" style="margin-left: 20px; height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/personalized-button-single.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> A standard button theme. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">filled_blue</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-blue.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/personalized-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> A blue-filled button theme. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">filled_black</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-black.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-black.png" style="margin-left: 20px; height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/personalized-button-black.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> A black-filled button theme. </figcaption> </figure> </td> </tr> </tbody> </table> <h4 id="size" data-text="size" tabindex="-1">size</h4> <p>The button size. The default value is <code translate="no" dir="ltr">large</code>. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">size: "small"</code></td> </tr> </tbody> </table> <p>The following table lists the available button sizes and their descriptions:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Size</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">large</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-blue.png" style="height: 40px;" alt="A large standard button"> <img src="/static/identity/gsi/web/images/icon-button-blue.png" style="margin-left: 20px; height: 40px;" alt="A large icon button"> <img src="/static/identity/gsi/web/images/personalized-button-blue.png" style="margin-left: 20px; height: 40px;" alt="A large, personalized button"> <figcaption> A large button. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">medium</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-medium.png" style="height: 32px;" alt="A medium standard button" > <img src="/static/identity/gsi/web/images/icon-button-medium.png" style="margin-left: 20px; height: 32px;" alt="A medium icon button"> <figcaption> A medium-sized button. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">small</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-small.png" style="height: 20px;" alt="A small button"> <img src="/static/identity/gsi/web/images/icon-button-small.png" style="margin-left: 20px; height: 20px;" alt="A small icon button"> <figcaption> A small button. </figcaption> </figure> </td> </tr> </tbody> </table> <h4 id="text" data-text="text" tabindex="-1">text</h4> <p>The button text. The default value is <code translate="no" dir="ltr">signin_with</code>. There are no visual differences for the text of icon buttons that have different <code translate="no" dir="ltr">text</code> attributes. The only exception is when the text is read for screen accessibility.</p> <p>See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">text: "signup_with"</code></td> </tr> </tbody> </table> <p>The following table lists <strong>all</strong> the available button texts and their descriptions:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Text</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">signin_with</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-blue.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> The button text is "Sign in with Google". </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">signup_with</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-signup.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> The button text is "Sign up with Google". </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">continue_with</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-continue.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> The button text is "Continue with Google". </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">signin</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-signin.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> The button text is "Sign in". </figcaption> </figure> </td> </tr> </tbody> </table> <h4 id="shape" data-text="shape" tabindex="-1">shape</h4> <p>The button shape. The default value is <code translate="no" dir="ltr">rectangular</code>. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">shape: "rectangular"</code></td> </tr> </tbody> </table> <p>The following table lists the available button shapes and their descriptions:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Shape</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">rectangular</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-blue.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/personalized-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> The rectangular-shaped button. If used for the <code translate="no" dir="ltr">icon</code> button type, then it's the same as <code translate="no" dir="ltr">square</code>. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">pill</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-pill.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-circle.png" style="margin-left: 20px; height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/personalized-button-pill.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> The pill-shaped button. If used for the <code translate="no" dir="ltr">icon</code> button type, then it's the same as <code translate="no" dir="ltr">circle</code>. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">circle</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-pill.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-circle.png" style="margin-left: 20px; height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/personalized-button-pill.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> The circle-shaped button. If used for the <code translate="no" dir="ltr">standard</code> button type, then it's the same as <code translate="no" dir="ltr">pill</code>. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">square</code></td> <td> <figure style="margin: 20px 50px;"> <img src="/static/identity/gsi/web/images/standard-button-blue.png" style="height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/icon-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <img src="/static/identity/gsi/web/images/personalized-button-blue.png" style="margin-left: 20px; height: 40px;" alt=""> <figcaption> The square-shaped button. If used for the <code translate="no" dir="ltr">standard</code> button type, then it's the same as <code translate="no" dir="ltr">rectangular</code>. </figcaption> </figure> </td> </tr> </tbody> </table> <h4 id="logo_alignment" data-text="logo_alignment" tabindex="-1">logo_alignment</h4> <p>The alignment of the Google logo. The default value is <code translate="no" dir="ltr">left</code>. This attribute only applies to the <code translate="no" dir="ltr">standard</code> button type. See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">logo_alignment: "center"</code></td> </tr> </tbody> </table> <p>The following table lists the available alignments and their descriptions:</p> <table class="responsive"> <thead> <tr> <th colspan=2>logo_alignment</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">left</code></td> <td> <figure> <img src="/static/identity/gsi/web/images/standard-button-left.png" style="margin: 20px 50px; height: 40px;" alt=""> <figcaption> Left-aligns the Google logo. </figcaption> </figure> </td> </tr> <tr> <td><code translate="no" dir="ltr">center</code></td> <td> <figure> <img src="/static/identity/gsi/web/images/standard-button-center.png" style="margin: 20px 50px; height: 40px;" alt=""> <figcaption> Center-aligns the Google logo. </figcaption> </figure> </td> </tr> </tbody> </table> <h4 id="width" data-text="width" tabindex="-1">width</h4> <p>The minimum button width, in pixels. The maximum width is 400 pixels.</p> <p>See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">width: "400"</code></td> </tr> </tbody> </table> <h4 id="locale" data-text="locale" tabindex="-1">locale</h4> <p>Optional. Display button text using the specified locale, otherwise default to the users Google Account or browser settings. Add the <code translate="no" dir="ltr">hl</code> parameter and language code to the src directive when loading the library, for example: <code translate="no" dir="ltr">gsi/client?hl=<iso-639-code></code>.</p> <p>If it's not set, the browser's default locale or the Google session user's preference is used. Therefore, different users might see different versions of localized buttons, and possibly with different sizes.</p> <p>See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">locale: "zh_CN"</code></td> </tr> </tbody> </table> <h4 id="click_listener" data-text="click_listener" tabindex="-1">click_listener</h4> <p>You can define a JavaScript function to be called when the Sign in with Google button is clicked using the <code translate="no" dir="ltr">click_listener</code> attribute.</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="CSS+Lasso"><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">renderButton</span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-nt">document</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nc">getElementById</span><span class="devsite-syntax-o">(</span><span class="devsite-syntax-s2">"signinDiv"</span><span class="devsite-syntax-o">),</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">theme</span><span class="devsite-syntax-p">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'outline'</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">size</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'large'</span><span class="devsite-syntax-p">,</span> <span class="devsite-syntax-w"> </span><b><span class="devsite-syntax-n">click_listener</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-n">onClickHandler</span></b> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span><span class="devsite-syntax-o">);</span> <span class="devsite-syntax-w"> </span><b> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nt">onClickHandler</span><span class="devsite-syntax-o">()</span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">console.log("Sign</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">in</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">with</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">Google</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">button</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-err">clicked...")</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <span class="devsite-syntax-w"> </span></b></pre></devsite-code> <p>In this example, the message <em>Sign in with Google button clicked...</em> is logged to the console when the Sign in with Google button is clicked.</p> <h4 id="state" data-text="state" tabindex="-1">state</h4> <p>Optional, as multiple Sign in with Google buttons can be rendered on the same page, you can assign each button with a unique string. The same string would return along with the ID token, so you can identify which button user clicked to sign in.</p> <p>See the following table for further information:</p> <table> <thead> <tr> <th>Type</th> <th>Required</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td>string</td> <td>Optional</td> <td><code translate="no" dir="ltr">data-state: "button 1"</code></td> </tr> </tbody> </table> <h2 id="type-Credential" data-text="Data type: Credential" tabindex="-1">Data type: Credential</h2> <p>When your <a href="/identity/gsi/web/reference/js-reference#native_callback"><code translate="no" dir="ltr">native_callback</code></a> function is invoked, a <code translate="no" dir="ltr">Credential</code> object is passed as the parameter. The following table lists the fields contained in the object:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Field</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">id</code></td> <td>Identifies the user.</td> </tr> <tr> <td><code translate="no" dir="ltr">password</code></td> <td>The password</td> </tr> </tbody> </table> <h2 id="google.accounts.id.disableAutoSelect" data-text="Method: google.accounts.id.disableAutoSelect" tabindex="-1">Method: google.accounts.id.disableAutoSelect</h2> <p>When the user signs out of your website, you need to call the method <code translate="no" dir="ltr">google.accounts.id.disableAutoSelect</code> to record the status in cookies. This prevents a UX dead loop. See the following code snippet of the method:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">disableAutoSelect</span><span class="devsite-syntax-p">()</span> </code></pre></devsite-code> <p>The following code example implements the <code translate="no" dir="ltr">google.accounts.id.disableAutoSelect</code> method with an <code translate="no" dir="ltr">onSignout()</code> function:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><<span class="devsite-syntax-nx">script</span>> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">onSignout</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">disableAutoSelect</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <<span class="devsite-syntax-err">/script</span>> </code></pre></devsite-code> <h2 id="google.accounts.id.storeCredential" data-text="Method: google.accounts.id.storeCredential" tabindex="-1">Method: google.accounts.id.storeCredential</h2> <p>This method is a wrapper for the <code translate="no" dir="ltr">store()</code> method of the browser's native credential manager API. Therefore, it can only be used to store a password credential. See the following code example of the method:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">storeCredential</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">Credential</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">callback</span><span class="devsite-syntax-p">)</span> </code></pre></devsite-code> <p>The following code example implements the <code translate="no" dir="ltr">google.accounts.id.storeCredential</code> method with an <code translate="no" dir="ltr">onSignIn()</code> function:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><<span class="devsite-syntax-nx">script</span>> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">onSignIn</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">let</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">cred</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'...'</span><span class="devsite-syntax-p">,</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">password</span><span class="devsite-syntax-o">:</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-s1">'...'</span><span class="devsite-syntax-p">};</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">storeCredential</span><span class="devsite-syntax-p">(</span><span class="devsite-syntax-nx">cred</span><span class="devsite-syntax-p">);</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <<span class="devsite-syntax-err">/script</span>> </code></pre></devsite-code> <h2 id="google.accounts.id.cancel" data-text="Method: google.accounts.id.cancel" tabindex="-1">Method: google.accounts.id.cancel</h2> <p>You can cancel the One Tap flow if you remove the prompt from the relying party DOM. The cancel operation is ignored if a credential is already selected. See the following code example of the method:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">cancel</span><span class="devsite-syntax-p">()</span> </code></pre></devsite-code> <p>The following code example implements the <code translate="no" dir="ltr">google.accounts.id.cancel()</code> method with an <code translate="no" dir="ltr">onNextButtonClicked()</code> function:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><<span class="devsite-syntax-nx">script</span>> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-kd">function</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">onNextButtonClicked</span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">cancel</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">showPasswordPage</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">}</span> <<span class="devsite-syntax-err">/script</span>> </code></pre></devsite-code> <h2 id="onGoogleLibraryLoad" data-text="Library load callback: onGoogleLibraryLoad" tabindex="-1">Library load callback: onGoogleLibraryLoad</h2> <p>You can register an <code translate="no" dir="ltr">onGoogleLibraryLoad</code> callback. It's notified after the Sign In With Google JavaScript library is loaded:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">onGoogleLibraryLoad</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span>><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">...</span> <span class="devsite-syntax-p">};</span> </code></pre></devsite-code> <p>This callback is just a shortcut for the <code translate="no" dir="ltr">window.onload</code> callback. There are no differences in behavior.</p> <p>The following code example implements an <code translate="no" dir="ltr">onGoogleLibraryLoad</code> callback:</p> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JavaScript"><code translate="no" dir="ltr"><<span class="devsite-syntax-nx">script</span>> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nb">window</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">onGoogleLibraryLoad</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">()</span><span class="devsite-syntax-w"> </span><span class="devsite-syntax-o">=</span>><span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">{</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">initialize</span><span class="devsite-syntax-p">({</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">...</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">});</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-nx">google</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">accounts</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">id</span><span class="devsite-syntax-p">.</span><span class="devsite-syntax-nx">prompt</span><span class="devsite-syntax-p">();</span> <span class="devsite-syntax-w"> </span><span class="devsite-syntax-p">};</span> <<span class="devsite-syntax-err">/script</span>> </code></pre></devsite-code> <h2 id="google.accounts.id.revoke" data-text="Method: google.accounts.id.revoke" tabindex="-1">Method: google.accounts.id.revoke</h2> <p>The <code translate="no" dir="ltr">google.accounts.id.revoke</code> method revokes the OAuth grant used to share the ID token for the specified user. See the following code snippet of the method: <code translate="no" dir="ltr">javascript google.accounts.id.revoke(login_hint, callback)</code></p> <table> <thead> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr">login_hint</code></td> <td>string</td> <td>The email address or unique ID of the user's Google Account. The ID is the <code translate="no" dir="ltr">sub</code> property of the <a href="/identity/gsi/web/reference/js-reference#credential">credential</a> payload.</td> </tr> <tr> <td><code translate="no" dir="ltr">callback</code></td> <td>function</td> <td>Optional <a href="/identity/gsi/web/reference/js-reference#RevocationResponse">RevocationResponse</a> handler.</td> </tr> </tbody> </table> <p>The following code sample shows how use the <code translate="no" dir="ltr">revoke</code> method with an ID. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"> google.accounts.id.revoke('1618033988749895', done => { console.log(done.error); });</pre></devsite-code></p> <aside class="key-point"><strong>Key Point:</strong><span> Calling this method revokes all OAuth 2.0 scopes previously granted by the Sign In With Google client library.</span></aside> <h2 id="RevocationResponse" data-text="Data type: RevocationResponse" tabindex="-1">Data type: RevocationResponse</h2> <p>When your <code translate="no" dir="ltr">callback</code> function is invoked, a <code translate="no" dir="ltr">RevocationResponse</code> object is passed as the parameter. The following table lists the fields that are contained in the revocation response object:</p> <table class="responsive"> <thead> <tr> <th colspan=2>Field</th> </tr> </thead> <tbody> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#successful">successful</a></code></td> <td>This field is the return value of the method call.</td> </tr> <tr> <td><code translate="no" dir="ltr"><a href="/identity/gsi/web/reference/js-reference#error">error</a></code></td> <td>This field optionally contains a detailed error response message.</td> </tr> </tbody> </table> <h3 id="successful" data-text="successful" tabindex="-1">successful</h3> <p>This field is a boolean value set to true if the revoke method call succeeded or false on failure.</p> <h3 id="error" data-text="error" tabindex="-1">error</h3> <p>This field is a string value and contains a detailed error message if the revoke method call failed, it is undefined on success.</p> </div> <devsite-recommendations display="in-page" hidden yield> </devsite-recommendations> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-feedback position="footer" project-name="Authentication" product-id="5186570" bucket="Identity guides" context="External devsite feedback" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="footer" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" > <button> Send feedback </button> </devsite-feedback> <devsite-recommendations id="recommendations-link" yield></devsite-recommendations> <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 2024-10-31 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Authentication" product-id="5186570" bucket="Identity guides" context="External devsite feedback" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" > <button> Need to tell us more? </button> </devsite-feedback> </template> <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 2024-10-31 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> <nav class="devsite-footer-promos nocontent" aria-label="Promotions"> <ul class="devsite-footer-promos-list"> <li class="devsite-footer-promo"> <a href="//github.com/googlesamples/google-services" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 1)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-github.svg" loading="lazy" alt="GitHub"> </picture> <span class="devsite-footer-promo-label"> GitHub </span> </a> <div class="devsite-footer-promo-description">Fork our samples and try them yourself</div> </li> <li class="devsite-footer-promo"> <a href="//stackoverflow.com/questions/tagged/google-signin" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 2)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-stack-overflow.svg" loading="lazy" alt="Stack Overflow"> </picture> <span class="devsite-footer-promo-label"> Stack Overflow </span> </a> <div class="devsite-footer-promo-description">Ask a question under the google-signin tag</div> </li> <li class="devsite-footer-promo"> <a href="//googledevelopers.blogspot.com/search/label/sign-in" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 3)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/developers_64dp.png" loading="lazy" alt="Blog"> </picture> <span class="devsite-footer-promo-label"> Blog </span> </a> <div class="devsite-footer-promo-description">The latest news on the Google Developers blog</div> </li> <li class="devsite-footer-promo"> <a href="https://blog.chromium.org" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Promo Link (index 4)" > <picture> <img class="devsite-footer-promo-icon" src="https://www.gstatic.com/images/icons/material/product/2x/chrome_chromium_64dp.png" loading="lazy" alt="Chromium Blog"> </picture> <span class="devsite-footer-promo-label"> Chromium Blog </span> </a> <div class="devsite-footer-promo-description">The latest news on the Chromium blog.</div> </li> </ul> </nav> </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">Product Info</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/terms" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Terms of Service </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/identity/branding-guidelines" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Branding Guidelines </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Help</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//stackoverflow.com/questions/tagged/google-signin" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Sign In With Google </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//stackoverflow.com/questions/tagged/google-identity" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Identity </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Developer consoles</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//console.developers.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Google API Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.cloud.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Google Cloud Platform Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//play.google.com/apps/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Play Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.firebase.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Firebase Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.actions.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Actions on Google Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//cast.google.com/publish" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Cast SDK Developer Console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//chrome.google.com/webstore/developer/dashboard" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Chrome Web Store Dashboard </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//console.home.google.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 8)" > Google Home Developer Console </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-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <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="/terms/site-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> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </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" >Español</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> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </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>[{"dimensions": {"dimension3": false, "dimension6": "en", "dimension1": "Signed out", "dimension11": false, "dimension5": "en", "dimension4": "Authentication"}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "purpose": 1}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Authentication", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="13roS56crEoT67kMoXdqSx5QdV+A4e"> (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/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png","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],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Experiments__reqs_query_experiments","Cloud__enable_legacy_calculator_redirect","TpcFeatures__enable_required_headers","Cloud__enable_cloud_dlp_service","Profiles__enable_profile_collections","BookNav__enable_tenant_cache_key","Profiles__enable_awarding_url","Search__enable_ai_search_summaries_restricted","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__emergency_css","MiscFeatureFlags__developers_footer_image","Cloud__enable_cloudx_ping","Analytics__enable_clearcut_logging","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_complete_playlist_endpoint","Concierge__enable_concierge_restricted","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_public_developer_profiles","CloudShell__cloud_code_overflow_menu","CloudShell__cloud_shell_button","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_page_saving","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_developer_profiles_callout","Profiles__enable_completecodelab_endpoint","Search__enable_page_map","DevPro__enable_developer_subscriptions","Concierge__enable_concierge","MiscFeatureFlags__enable_view_transitions","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_facet_chat","Cloud__enable_cloudx_experiment_ids","Cloud__enable_cloud_shell","EngEduTelemetry__enable_engedu_telemetry","DevPro__enable_cloud_innovators_plus","Search__enable_ai_search_summaries","Concierge__enable_pushui","Significatio__enable_by_tenant","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_release_notes_notifications","Search__enable_suggestions_from_borg","MiscFeatureFlags__enable_project_variables","Search__enable_ai_eligibility_checks","Profiles__enable_recognition_badges","Cloud__enable_free_trial_server_call"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[1,"developers","Google for Developers","developers.google.com",null,"developers-dot-devsite-v2-prod.appspot.com",null,null,[1,1,[1],null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations/information"],null,null,null,[1,1,1],[1,1,null,1,1]],null,[null,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.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,[6,1,14,15,20,22,23,29,32,36],null,[[null,null,null,[3,7,10,2,39,17,4,32,24,11,12,13,34,15,25],null,null,[1,[["docType","Choose a content type",[["Tutorial",null,null,null,null,null,null,null,null,"Tutorial"],["Guide",null,null,null,null,null,null,null,null,"Guide"],["Sample",null,null,null,null,null,null,null,null,"Sample"]]],["product","Choose a product",[["Android",null,null,null,null,null,null,null,null,"Android"],["ARCore",null,null,null,null,null,null,null,null,"ARCore"],["ChromeOS",null,null,null,null,null,null,null,null,"ChromeOS"],["Firebase",null,null,null,null,null,null,null,null,"Firebase"],["Flutter",null,null,null,null,null,null,null,null,"Flutter"],["Assistant",null,null,null,null,null,null,null,null,"Google Assistant"],["GoogleCloud",null,null,null,null,null,null,null,null,"Google Cloud"],["GoogleMapsPlatform",null,null,null,null,null,null,null,null,"Google Maps Platform"],["GooglePay",null,null,null,null,null,null,null,null,"Google Pay & Google Wallet"],["GooglePlay",null,null,null,null,null,null,null,null,"Google Play"],["Tensorflow",null,null,null,null,null,null,null,null,"TensorFlow"]]],["category","Choose a topic",[["AiAndMachineLearning",null,null,null,null,null,null,null,null,"AI and Machine Learning"],["Data",null,null,null,null,null,null,null,null,"Data"],["Enterprise",null,null,null,null,null,null,null,null,"Enterprise"],["Gaming",null,null,null,null,null,null,null,null,"Gaming"],["Mobile",null,null,null,null,null,null,null,null,"Mobile"],["Web",null,null,null,null,null,null,null,null,"Web"]]]]]],[1,1],null,1],[[["UA-24532603-1"],["UA-22084204-5"],null,null,["UA-24532603-5"],null,null,[["G-272J68FCRF"],null,null,[["G-272J68FCRF",2]]],[["UA-24532603-1",2]],null,[["UA-24532603-5",2]],null,1],[[14,11],[6,5],[1,1],[15,12],[11,8],[5,4],[4,3],[16,13],[13,10],[12,9],[3,2]],[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Sign In With Google JavaScript API reference | Authentication | Google for Developers