Sign In with Google - Console.log - google-signin

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

To decode the token you need to Base64 URL decode the message and parse it back into an object with JSON.parse, which is what jwt-decode does.
If you're not using a bundler with NPM you can import it:
console.log(jwt_decode('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'))
<script src="https://unpkg.com/jwt-decode/build/jwt-decode.js"></script>
Or as an ES6 module:
<script type="module">
// Or https://unpkg.com/jwt-decode/build/jwt-decode.esm.js
import jwtDecode from 'https://esm.run/jwt-decode';
console.log(jwtDecode('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'))
</script>

Answer 2

I was able to do it manually using https://jwt.io/ with algorithm RS256
And programmatically using jose library https://github.com/panva/jose
import * as jose from 'jose'
const claims = jose.decodeJwt(token)
console.log(claims)
The result is the same as in the documentation https://developers.google.com/identity/gsi/web/reference/js-reference#credential
You should verify the JWT (public keys, issuer, audience, issuer and expiration date), jose has a function to decode and verify called jwtVerify
https://github.com/panva/jose/blob/main/docs/functions/jwt_verify.jwtVerify.md#readme