Update Google OAuth for new sign in method (old method deprecated from March 2023)

As per - https://developers.google.com/identity/sign-in/web/sign-in - Google is deprecating their Oauth2 web sign in and replacing it with https://developers.google.com/identity/gsi/web/guides/overview

Previously you could set up your Oauth2 in a Server Connect for login and then those credentials would be valid throughout your site until the access token expired. They’ve now separated Authentication and Authorization so the current process will no longer work in Wappler. There is a guide here https://developers.google.com/identity/gsi/web/guides/migration for migrating from the old way to the new.

I spent a few hours trying to get it to work but only got as far as getting the sign in working and logging the response in the console. Hopefully that’s at least a little helpful as a start.

<!--Code for the sign on-->
<script src="https://accounts.google.com/gsi/client" async defer></script>

<!--Needed to decode the returned JWT-->
<script src="https://unpkg.com/jwt-decode/build/jwt-decode.js"></script>

Code for the buttons…

<div id="g_id_onload" data-client_id="YOUR_CLIENT_ID.apps.googleusercontent.com" data-context="signin" data-ux_mode="popup" data-login_uri="https://app.triptakers.travel/New_Google.php" data-auto_prompt="false" data-callback="handleCredentialResponse">

            </div>

            <div class="g_id_signin" data-type="standard" data-shape="pill" data-theme="filled_blue" data-text="signin_with" data-size="large" data-logo_alignment="left">

            </div>

            function decodeJwtResponse(r){
        var decoded = jwt_decode(r);
        return decoded;
    }

Code to handle the returned response

function decodeJwtResponse®{

        var decoded = jwt_decode(r);

        return decoded;

    }



    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);



  }

I think what needs to happen next is the server needs to verify the Google Id token I tried installing the PHP library and following the instructions at https://developers.google.com/identity/gsi/web/guides/verify-google-id-token but didn’t quite get it working.