Sign In with Google - Console.log

Question

I'm trying to use this new example for the new Sign In with Google since oAuth will be retired in 2023. Question is, how do I pass this value console.log("Email: " + responsePayload.email); to a hidden html field ? I was able to do this with the current oAuth Java funstion but can't seem to pass the value with this new version of the code.

decodeJwtResponse() is a custom function defined by you - could be what I'm missing. I would like to keep this entire function in java script if possible. I am lost

    <div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-callback="handleCredentialResponse">
</div>
<script>
  function handleCredentialResponse(response) {
     // decodeJwtResponse() is a custom function defined by you
     // to decode the credential response.
     const responsePayload = decodeJwtResponse(response.credential);

     console.log("ID: " + responsePayload.sub);
     console.log('Full Name: ' + responsePayload.name);
     console.log('Given Name: ' + responsePayload.given_name);
     console.log('Family Name: ' + responsePayload.family_name);
     console.log("Image URL: " + responsePayload.picture);
     console.log("Email: " + responsePayload.email);
  }
</script>

Answer 1

Try This Native Javascript Code.

function decodeJwtResponse (token) 
{
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
}