-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathweb-support.html
More file actions
29 lines (29 loc) · 34 KB
/
Copy pathweb-support.html
File metadata and controls
29 lines (29 loc) · 34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-web-support" data-has-hydrated=false><head><meta charset=UTF-8><meta name=generator content="Docusaurus v3.10.1"><title data-rh=true>Web support | React Native Google Sign In</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"/><meta data-rh=true name=twitter:card content=summary_large_image /><meta data-rh=true property=og:image content=https://react-native-google-signin.github.io/img/social-card.jpg /><meta data-rh=true name=twitter:image content=https://react-native-google-signin.github.io/img/social-card.jpg /><meta data-rh=true property=og:url content=https://react-native-google-signin.github.io/docs/web-support /><meta data-rh=true property=og:locale content=en /><meta data-rh=true name=docusaurus_locale content=en /><meta data-rh=true name=docsearch:language content=en /><meta data-rh=true name=docusaurus_version content=current /><meta data-rh=true name=docusaurus_tag content=docs-default-current /><meta data-rh=true name=docsearch:version content=current /><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current /><meta data-rh=true property=og:title content="Web support | React Native Google Sign In"/><meta data-rh=true name=description content="Web platform support. Works with NextJS, Vite, and other web frameworks without React Native Web dependency. Covers setup, rendering modes, and limitations."/><meta data-rh=true property=og:description content="Web platform support. Works with NextJS, Vite, and other web frameworks without React Native Web dependency. Covers setup, rendering modes, and limitations."/><link data-rh=true rel=icon href=/img/favicon.ico /><link data-rh=true rel=canonical href=https://react-native-google-signin.github.io/docs/web-support /><link data-rh=true rel=alternate href=https://react-native-google-signin.github.io/docs/web-support hreflang=en /><link data-rh=true rel=alternate href=https://react-native-google-signin.github.io/docs/web-support hreflang=x-default /><script data-rh=true type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","item":"https://react-native-google-signin.github.io/docs/web-support","name":"Web support","position":1}]}</script><link rel=stylesheet href=/assets/css/styles.c655e8c7.css /><script src=/assets/js/runtime~main.27c8b818.js defer></script><script src=/assets/js/main.1cb569e4.js defer></script></head><body><svg style="display: none;"><defs>
<symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme-32e")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/img/logo.png /><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/logo.png alt="My Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"/><img src=/img/logo.png alt="My Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"/></div><b class="navbar__title text--truncate">RN Google Sign In</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/docs/install>Guides</a><a class="navbar__item navbar__link" href=/docs/api>API</a><a class="navbar__item navbar__link" href=/examples>Example native & web app</a><div class="navbar__item dropdown dropdown--hoverable"><a href=# aria-haspopup=true aria-expanded=false role=button class=navbar__link>LLMs</a><ul class=dropdown__menu><li><a href=/llms.txt target=_blank rel="noopener noreferrer" class=dropdown__link>llms.txt<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=/llms-full.txt target=_blank rel="noopener noreferrer" class=dropdown__link>llms-full.txt<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a class="navbar__item navbar__link" href=/github-repo>GitHub</a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_Bca1><div class=navbar__search><span aria-label="expand searchbar" role=button class=search-icon tabindex=0></span><input id=search_input_react type=search placeholder=Loading... aria-label=Search class="navbar__search-input search-bar" disabled/></div></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class=sidebarViewport_aRkj><div class=sidebar_njMd><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/install><span title=Installation class=linkLabel_WmDU>Installation</span></a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist" href=/docs/category/setting-up><span title="Setting up" class=categoryLinkLabel_W154>Setting up</span></a><button aria-label="Expand sidebar category 'Setting up'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item sponsor-heart"><a class=menu__link href=/docs/one-tap><span title="Universal Google sign in" class=linkLabel_WmDU>Universal Google sign in</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/original><span title="Original Google sign in" class=linkLabel_WmDU>Original Google sign in</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item sponsor-heart"><a class="menu__link menu__link--active" aria-current=page href=/docs/web-support><span title="Web support" class=linkLabel_WmDU>Web support</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item sponsor-heart"><a class=menu__link href=/docs/security><span title="Advanced security" class=linkLabel_WmDU>Advanced security</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/migrating><span title="Migration guides" class=linkLabel_WmDU>Migration guides</span></a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="categoryLink_byQd menu__link menu__link--sublist" href=/docs/category/react-components><span title="React components" class=categoryLinkLabel_W154>React components</span></a><button aria-label="Expand sidebar category 'React components'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/testing><span title=Testing class=linkLabel_WmDU>Testing</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/errors><span title="Error handling" class=linkLabel_WmDU>Error handling</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/integration-notes><span title="Integration notes" class=linkLabel_WmDU>Integration notes</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/troubleshooting><span title=Troubleshooting class=linkLabel_WmDU>Troubleshooting</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item sponsor-heart"><a class=menu__link href=/docs/config-doctor><span title="Config doctor" class=linkLabel_WmDU>Config doctor</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/screenshots><span title=Screenshots class=linkLabel_WmDU>Screenshots</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/license><span title=License class=linkLabel_WmDU>License</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/other-libs><span title="Other libraries" class=linkLabel_WmDU>Other libraries</span></a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/docs/api><span title="API reference" class=linkLabel_WmDU>API reference</span></a></ul></nav></div></div></aside><main class=docMainContainer_TBSr><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_VOVn"><div class=docItemContainer_Djhp><article><div class=breadcrumbsWrapper_xlkt><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label=Breadcrumbs><ul class=breadcrumbs><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_YNFT><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link>Web support</span></ul></nav></div><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Web support</h1></header>
<p>The web implementation doesn't depend on React Native (or React Native Web). That means you can use it even with regular web apps created with NextJS, Vite and etc.</p>
<!-- -->
<div class="theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 12 16"><path fill-rule=evenodd d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"/></svg></span>tip</div><div class=admonitionContent_BuS1><p>The functionality covered in this page is available in the licensed
version. <a href=https://universal-sign-in.com/#pricing target=_blank rel="noopener noreferrer" class="">You can get a license here</a> ⭐️.</div></div>
<p>Providing a unified API across all platforms is a bit more tricky than it may seem. The web experience is different from the mobile one, and so are the underlying Google's APIs.</p>
<p>On the web, the <code>signIn</code> and <code>createAccount</code> functions are not <code>Promise</code>-based but callback-based as seen below. That means they return <code>void</code> and you need to provide callbacks for success and error handling. Even so, the argument and result types are the same as for native, allowing to reuse the logic for both success and error handling across all platforms.</p>
<div class="theme-admonition theme-admonition-info admonition_xJq3 alert alert--info"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>info</div><div class=admonitionContent_BuS1><p>The reason for callback-based apis rather than promise-based is that it's possible to get into an "error" state (when one-tap is not available) and later get a successful sign in from the button flow. Because of how the Google Sign In for web SDK is done, modeling this with a promise-based api is not possible.</div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=setup>Setup<a href=#setup class=hash-link aria-label="Direct link to Setup" title="Direct link to Setup" translate=no></a></h2>
<p>See <a class="" href=/docs/setting-up/web>here</a>.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=usage>Usage<a href=#usage class=hash-link aria-label="Direct link to Usage" title="Direct link to Usage" translate=no></a></h2>
<p>To implement web support, follow these two steps:</p>
<ol>
<li class="">Call <code>GoogleOneTapSignIn.signIn</code> upon page load. This attempts to present the One-tap UI. It also sets up a listener for authentication events and calls the <code>onSuccess</code> callback when the user signs in (either with the One-tap flow or the Sign-In button).</li>
</ol>
<p>If you do not want to present the one-tap UI, pass <code>skipPrompt: true</code> in the <a class="" href=/docs/api#onetapsigninparams><code>OneTapSignInParams</code></a> object. This only sets up the listener for authentication events, and then relies on the user signing in via the <code>WebGoogleSigninButton</code>.</p>
<div class="theme-admonition theme-admonition-warning admonition_xJq3 alert alert--warning"><div class=admonitionHeading_Gvgb><span class=admonitionIcon_Rf37><svg viewBox="0 0 16 16"><path fill-rule=evenodd d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg></span>warning</div><div class=admonitionContent_BuS1><p>You should display the One Tap UI on page load or other window events, instead of it being displayed by a user action (e.g. a button press). Otherwise, you may get a broken UX. Users may not see any UI after a user action, due to <a href=https://developers.google.com/identity/gsi/web/guides/features#globally_opt_out target=_blank rel="noopener noreferrer" class="">globally opt-out</a>, <a href=https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown target=_blank rel="noopener noreferrer" class="">cool-down</a>, or no Google session.</div></div>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#393A34;--prism-background-color:#f6f8fa><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style=color:#393A34;background-color:#f6f8fa><code class="codeBlockLines_e6Vv codeBlockLinesWithNumbering_o6Pm" style="counter-reset:line-count 0"><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token function" style=color:#d73a49>useEffect</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> GoogleOneTapSignIn</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>configure</span><span class="token punctuation" style=color:#393A34>(</span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> webClientId</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> iosClientId</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> config</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">iosClientId</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token keyword" style=color:#00009f>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">Platform</span><span class="token punctuation" style=color:#393A34>.</span><span class="token constant" style=color:#36acaa>OS</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>===</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'web'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> GoogleOneTapSignIn</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>signIn</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> ux_mode</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'popup'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token function-variable function" style=color:#d73a49>onResponse</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">response</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token keyword" style=color:#00009f>if</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">response</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">type </span><span class="token operator" style=color:#393A34>===</span><span class="token plain"> </span><span class="token string" style=color:#e3116c>'success'</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>log</span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">response</span><span class="token punctuation" style=color:#393A34>.</span><span class="token plain">data</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token function-variable function" style=color:#d73a49>onError</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">error</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token comment" style=color:#999988;font-style:italic>// handle error</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token function-variable function" style=color:#d73a49>momentListener</span><span class="token operator" style=color:#393A34>:</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>(</span><span class="token plain">moment</span><span class="token punctuation" style=color:#393A34>)</span><span class="token plain"> </span><span class="token operator" style=color:#393A34>=></span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>{</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style=color:#393A34>.</span><span class="token function" style=color:#d73a49>log</span><span class="token punctuation" style=color:#393A34>(</span><span class="token string" style=color:#e3116c>'moment'</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> moment</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>}</span><span class="token plain"></span></span><br/></div><div class="token-line codeLine_lJS_" style=color:#393A34><span class=codeLineNumber_Tfdd></span><span class=codeLineContent_feaV><span class="token plain"></span><span class="token punctuation" style=color:#393A34>}</span><span class="token punctuation" style=color:#393A34>,</span><span class="token plain"> </span><span class="token punctuation" style=color:#393A34>[</span><span class="token punctuation" style=color:#393A34>]</span><span class="token punctuation" style=color:#393A34>)</span><span class="token punctuation" style=color:#393A34>;</span></span><br/></div></code></pre></div></div>
<p>Optionally, you can provide a <code>momentListener</code> callback function. The callback is called when important events take place. <a href=https://developers.google.com/identity/gsi/web/reference/js-reference#PromptMomentNotification target=_blank rel="noopener noreferrer" class="">See reference.</a></p>
<ol start=2>
<li class="">Render the <a class="" href=/docs/buttons/web><code>WebGoogleSigninButton</code></a> component</li>
</ol>
<p>One-tap UI may not always be available: This happens if you disable it (<a class="" href=/docs/api#onetapsigninparams><code>skipPrompt</code></a>), when user has <a href=https://developers.google.com/identity/gsi/web/guides/features#globally_opt_out target=_blank rel="noopener noreferrer" class="">opted out</a> or when they cancel the prompt several times in a row, entering the <a href=https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown target=_blank rel="noopener noreferrer" class="">cooldown period</a>.</p>
<p><code>WebGoogleSigninButton</code> serves as a fallback. Tapping it opens the regular Google Sign-In dialog (or redirect, based on <code>ux_mode</code> param). When user signs in, the <code>onResponse</code> callback is called.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=methods>Methods<a href=#methods class=hash-link aria-label="Direct link to Methods" title="Direct link to Methods" translate=no></a></h2>
<p>The methods on the web are the same as on native — see <a class="" href=/docs/one-tap#methods>here</a> for their docs.</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href=https://github.com/react-native-google-signin/docs/edit/main/docs/web-support.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/docs/original><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>Original Google sign in</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/docs/security><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Advanced security</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#setup class="table-of-contents__link toc-highlight">Setup</a><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a><li><a href=#methods class="table-of-contents__link toc-highlight">Methods</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class=footer__copyright>Copyright © 2026 <a href=https://universal-sign-in.com/>universal-sign-in.com</a></div></div></div></footer></div></body>