Google Signin Website

Google Signin Website

Released: Google Signin Website

Touching presence on web

This weekend I thought to try out Google Sign-in button on a test website and build a demo. This type of idea was getting repetitive in my blogs so I wrote a website without giving much fuss about it. I feel it’s pointless to pull redundant details from internet and paste on my blogs and anyways not many people read my website, LOL. Looking back I can connect the dots and pull very insightful reasons from the internet around the benefits of having a Google Sign-in button but I think it’s not worth into going such details as most folks who have ever attended a web design 101 class know that Google Sign in reduces the burden of the user to login and hence promises better UX.


  1. Have a website to pull User’s email, name and some ID upon sign in

  2. Have a callback upon sign in and sign out where a custom task can be coded


As POC, I made a simple website to solve this problem, this one: GoogleWebSignin. I had observed that I need to follow only two tiny details:

  • Have a Google Developers App to have Google handle Auth

  • Have code pointers to call Google from Website

  1. Have a Google Developers App to have Google handle Auth:

    I headed to Google API credentials page and then to Client ID for Web application where I whitelisted my domains for oAuth.


  2. Have code pointers to call Google from Website:

    In the HEAD tag:

     // in HEAD tag
     <script src="" async="" defer=""></script>
    <meta name="google-signin-client_id" content="" />

    In the Body tag:

     // in Body tag
    <div id="btn-login" class="g-signin2" data-onsuccess="onSignIn"></div>
     <a id="btn-logout" style="float:right;" href="#" hidden="" onclick="signOut();">Sign out</a>

    In the Scripts:

         function signOut() {
             var auth2 = gapi.auth2.getAuthInstance();
             auth2.signOut().then(function () {
                 // callback
         function onSignIn(googleUser) {
             profile = googleUser.getBasicProfile();
             console.log('Email: ' + profile.getEmail());
             // callback

I felt it was straightforward to implement and does not have many dependencies to slow me down. Having a simple website to call Google Sign-in is very satisfying. I tested it on my Chrome browser by going to the URL. For my demo, the source is hosted on GitHub repo: GoogleWebSignin repo, quick sneak peek is below:

Dialogue & Discussion