BUY FULL SOURCE CODE

Welcome folks today in this blog post we will be integrating one tap google login and logout project using jwt and google identity services in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>One-tap Auto Login Example</title>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script>
        function handleCredentialResponse(response) {
            console.log(response)
            if (response.credential) {
                // The user is logged in.
                // Decode the JWT token and show the user's profile information.
                var jwt = response.credential;
                var user = JSON.parse(atob(jwt.split('.')[1]));

                document.getElementById('profile').innerHTML += `Welcome, ' + ${user.name} with email ${user.email}<br><br>`;
                document.getElementById('profile').innerHTML += `<img src="${user.picture}"/>`

                document.getElementById('logout-button').style.display = 'inline';
            } else {

                document.getElementById('login-button').style.display = 'inline';
            }
        }

        function init() {
            google.accounts.id.initialize({
                client_id: '494419600913-b22ce3maudb4o2fut5n6jvskikgbmf4e.apps.googleusercontent.com',
                auto_select: true,
                callback: handleCredentialResponse
            });

            google.accounts.id.prompt();
        }

        function handleLogout() {
            google.accounts.id.disableAutoSelect();
            google.accounts.id.prompt();
            document.getElementById('profile').innerHTML = ``
            document.getElementById('logout-button').style.display = 'none'
        }


    </script>
</head>

<body onload="init()">
    <h1>One-tap Auto Login Example</h1>
    <p id="profile"></p>
    <button id="logout-button" style="display:none" onclick="handleLogout()">Logout</button>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>One-tap Auto Login Example</title>

function handleCredentialResponse(response) {

console.log(response)

if (response.credential) {

// The user is logged in.

// Decode the JWT token and show the user's profile information.

var jwt = response.credential;

var user = JSON.parse(atob(jwt.split('.')[1]));

document.getElementById('profile').innerHTML += `Welcome, ' + ${user.name} with email ${user.email}<br><br>`;

document.getElementById('profile').innerHTML += `<img src="${user.picture}"/>`

document.getElementById('logout-button').style.display = 'inline';

} else {

document.getElementById('login-button').style.display = 'inline';

}

function init() {

google.accounts.id.initialize({

client_id: '494419600913-b22ce3maudb4o2fut5n6jvskikgbmf4e.apps.googleusercontent.com',

auto_select: true,

callback: handleCredentialResponse

});

google.accounts.id.prompt();

}

function handleLogout() {

google.accounts.id.disableAutoSelect();

google.accounts.id.prompt();

document.getElementById('profile').innerHTML = ``

document.getElementById('logout-button').style.display = 'none'

}

</script>

</head>

<h1>One-tap Auto Login Example</h1>

<button id="logout-button" style="display:none" onclick="handleLogout()">Logout</button>

</body>

</html>

Now we need to replace the url of your application to get the client_id as shown above.

As you can see we are showing the user profile information in browser using automatically login the google account. Now we need to replace the client_id from the google cloud console as shown below