JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<!-- Get Sheets data -->
<button id="signin-button" onclick="handleSignInClick()">Sign in</button>
<button id="signout-button" onclick="handleSignOutClick()">Sign out</button>
<button onclick="makeApiCall()"></button>
<div id="apiresult">result </div>

<script>
    function makeApiCall() {
        gapi.client.sheets.spreadsheets.values.get({
          spreadsheetId: 'YOUR_SPREADSHEET_ID',
          range: 'YOUR_RANGE'
        }).then((response) => {
 
        var result = response.result.values;
      
        console.log(result);

        document.getElementById("apiresult").innerHTML = result;
      });
    }

    function initClient() {
      var API_KEY = 'YOUR_API_KEY';  

      var CLIENT_ID = 'YOUR_CLIENT_ID';  

      //   Authorize using one of the following scopes:
      //   'https://www.googleapis.com/auth/drive'
      //   'https://www.googleapis.com/auth/drive.file'
      //   'https://www.googleapis.com/auth/drive.readonly'
      //   'https://www.googleapis.com/auth/spreadsheets'
      //   'https://www.googleapis.com/auth/spreadsheets.readonly'
      var SCOPE = 'https://www.googleapis.com/auth/spreadsheets.readonly';

      gapi.client.init({
        'apiKey': API_KEY,
        'clientId': CLIENT_ID,
        'scope': SCOPE,
        'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
      }).then(function() {
        gapi.auth2.getAuthInstance().isSignedIn.listen(updateSignInStatus);
        updateSignInStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      });
    }

    function handleClientLoad() {
      gapi.load('client:auth2', initClient);
    }

    function updateSignInStatus(isSignedIn) {
      if (isSignedIn) {
        makeApiCall();
      }
    }

    function handleSignInClick(event) {
      gapi.auth2.getAuthInstance().signIn();
    }

    function handleSignOutClick(event) {
      gapi.auth2.getAuthInstance().signOut();
    }
</script>
<script async defer src="https://apis.google.com/js/api.js"
     ...