Working on custom child theme on wordpress that requires "Sign in with Google". AS per Google's recent update, we cannot fully customize the button provided by GIS (Goole identity service) & hence, I created a custom button & added a click event on this button that triggers a click on the actual button as provided by GIS.
All I can see in the console is "This document requires 'TrustedScript' assignment."
How do I get rid of it & make it work?
const googleLoginCallback = (response) => {
if (response.credential) {
USER = {};
USER.token = response.credential;
var res = JSON.parse(window.atob(response.credential.split(".")[1]));
}
};
window.google.accounts.id.initialize({
client_id: "XXXX-XXXXX-XXXX",
ux_mode: "popup",
callback: googleLoginCallback,
});
const createFakeGoogleWrapper = () => {
const googleLoginWrapper = document.createElement("div");
googleLoginWrapper.style.display = "none";
googleLoginWrapper.classList.add("custom-google-button");
document.body.appendChild(googleLoginWrapper);
var google_btn_config = {
type: "standard",
shape: "rectangular",
theme: "outline",
size: "large",
logo_alignment: "center",
};
google.accounts.id.renderButton(googleLoginWrapper, google_btn_config);
const googleLoginWrapperButton =
googleLoginWrapper.querySelector("div[role=button]");
return {
click: () => {
googleLoginWrapperButton.click();
},
};
};
// Now we have a wrapper to click
const googleButtonWrapper = createFakeGoogleWrapper();
window.handleGoogleLogin = () => {
// Use wrapper click to prevent Illegal invocation exception
googleButtonWrapper.click();
// This will open GSI login and after success you will have
// a response on googleLoginCallback method previously created
};
Reffered: https://medium.com/@leonardosalles/a-guide-to-custom-google-sign-in-button-e7b02c2c5e4f