Generate Access Token

import React, { useEffect, useState } from "react";
import jwt_decode from "jwt-decode";
import youtubelogo from "../images/Youtubelogo.png";
import "bootstrap/dist/css/bootstrap.min.css";
const google = window.google;

const clientId = "{{CLIENT_ID}}";
function App() {
  const [profile, setProfileUser] = useState(null);
  const [tokenClient, settokenClient] = useState(null);
  const [accessToken, setaccessToken] = useState(null);

  function handleCallbackResponse(response) {
    const userObj = jwt_decode(response.credential);
    setProfileUser(userObj);
  }

  function getAccessToken() {
    tokenClient.requestAccessToken();
  }

  async function handleSignOut() {
    await google.accounts.id.disableAutoSelect();
    google.accounts.id.revoke(localStorage.getItem("gtoken"), () => {
      localStorage.removeItem("gtoken");
      setProfileUser(null);
    });
  }
  useEffect(() => {
    if(google) {
      google.accounts.id.initialize({
        client_id: clientId,
        callback: handleCallbackResponse,
      });
      google.accounts.id.renderButton(document.getElementById("sign-in-button"), {
        theme: "outline",
        size: "large",
      });

      settokenClient(google.accounts.oauth2.initTokenClient({
        client_id: clientId,
        scope:
        "https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube.force-ssl",
        callback: (tokenResponse) => {
        setaccessToken(tokenResponse.access_token);
        },
      }));
    }
  }, [accessToken, window.google, profile]);

  return (
    <div className="App">
        <div className="container d-flex justify-content-center" style={{paddingTop:"30px"}}>
          <img
            src={youtubelogo}
            alt="Youtube API"
            className="card-img-top mb-5"
            style={{maxWidth: "30vw",}}
          />
          <br />
        </div>
      <div id="main-body" className="container d-flex justify-content-center">
        {!profile && (
          <div id="sign-in-button" className="vstack d-flex justify-content-center align-items-center"></div>
        )}
        {profile && (
          <div className="row justify-content-center align-items-center">
            <div className="col-5 mt-4" style={{width: "40vw"}}>

              {accessToken && (
                <div className="input-group justify-content-center" style={{padding: '1rem'}}>
                  <span className="input-group-text"> Access Token</span>
                  <input
                    type="text"
                    className="form-control"
                    aria-label="Access Token"
                    id="accessToken"
                    aria-describedby="button-addon2"
                    readOnly
                    value={accessToken}
                  />
                  <button
                    className="btn btn-danger"
                    type="button"
                    id="button-addon2"
                    onClick={() => {
                    navigator.clipboard.writeText(
                      accessToken
                    );
                    }} >
                    Copy
                  </button>
                </div>
              )}
              {!accessToken && (
                <div className="input-group justify-content-center" style={{ padding: '1rem'}}>
                  <input
                  className="btn btn-danger"
                  type="submit"
                  onClick={getAccessToken}
                  value="Generate Access Token"
                  />
                </div>
              )}
              <div className="input-group justify-content-center" style={{paddingTop: "10px"}}>
                <button onClick={handleSignOut}className="btn btn-danger">Sign out</button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;