How to solve "This document requires 'TrustedScript' assignment." issue in Wordpress custom theme? (child theme)

131 Views Asked by At

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

0

There are 0 best solutions below