I'm experiencing an issue with displaying the Google OneTap button. I have an ionic vue app that is supposed to work both on mobile and on a regular browser. On the regular browser I can see the button just fine and the whole process works perfectly. However on mobile, the OneTap button is not displayed. I tried on several phones / browsers and nothing shows. I can't seem to find many more info on this, likely because this is the "new correct" way of doing things, meaning most tutorials / info on adding Google SSO use the deprecated codetrix-studio/capacitor-google-auth method.
Here is my code:
<template>
<ion-page class="login-page">
<ion-header :translucent="false">
<ion-toolbar>
<div class="toolbar-logo-container">
<img src="/logo_final.png" alt="Logo" class="toolbar-logo" />
</div>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<div class="login-container">
<!-- Other stuff -->
<div class="socials">
<div class="label">Sign in with Google</div>
<div id="g_id_onload"
data-client_id="my_client_id"
data-context="signin"
data-ux_mode="popup"
data-login_uri="my_login_endpoint"
data-auto_select="true"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="filled_black"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
<div class="actions">
</div>
</div>
<!-- Other stuff -->
</div>
</ion-content>
<ion-footer>
<p>Copyright 2024</a></p>
</ion-footer>
</ion-page>
</template>
Any help highly appreciated. I'm working on the iOS / Android versions of the app but would really like folks to be able to use the web version until then...