title: Gapi Error in while using youtube data api in reactjs app
body: <p>I have build up a project using Next.js. Here I have wanted to implement a feature using the YouTube Data API. The feature is when the user clicks the <strong>youtube connect</strong> button, a pop-up window opens and authenticates the user. After the authentication, the YouTube Data API gives a response which contains the basic info the user's channel. Sometimes it has worked fine. But, sometimes it has shown the following error: </p>
  
  <p><a href="https://i.stack.imgur.com/b5a95.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b5a95.png" alt="enter image description here"></a> </p>
  
  <p>Here is my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Fragment, useEffect, useContext } from "react";
  import {gapi} from "../common/api";
  import { GOOGLE_CLIENT_ID } from "../../helpers/Constants";
  import { AthleteContext } from "../../context/AthleteContextProvider";
  import { Button, message } from "antd";
  import AthleteProfileService from "../../services/AthleteProfileService";
  
  
    const YouTubeConnect = () =&gt; {
  
      const athleteContext = useContext(AthleteContext);
      function authenticate() {
          return gapi.auth2.getAuthInstance()
              .signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
              .then(function() { console.log("Sign-in successful"); },
                    function(err) { console.error("Error signing in", err); });
        }
        function loadClient() {
          gapi.client.setApiKey(GOOGLE_API_KEY);
          return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
              .then(function() { console.log("GAPI client loaded for API");
              execute();
            },
                    function(err) { console.error("Error loading GAPI client for API", err); });
        }
        // Make sure the client is loaded and sign-in is complete before calling this method.
        function execute() {
          return gapi.client.youtube.channels.list({
            "part": "snippet,contentDetails,statistics",
            "mine": true
          })
              .then(function(response) {
                      // Handle the results here (response.result has the parsed body).
                      console.log("Response", JSON.parse(response.body));
                      athleteContext.invokeYoutubeInfo(response.body);
                      AthleteProfileService.connectSocialAccount({
                        attrName: "youtube",
                        attrValue: JSON.parse(response.body).items[0].id
                    }).then(res =&gt; {
                        message.success("Youtube profile link added!");
                        athleteContext.setProfileUpdateStatus(true);
                    }).catch(err =&gt; {
                        console.log(err);
                        athleteContext.setProfileUpdateStatus(false);
                    })
                    },
                    function(err) { console.error("Execute error", err); });
        }
  
        function executeFinal() {      
          authenticate().then(() =&gt; {
              loadClient();
            })
        }
  
        gapi.load("client:auth2", function() {
          gapi.auth2.init({client_id: GOOGLE_CLIENT_ID});
            });
        return (
            &lt;Fragment&gt;
                 {/* &lt;button onClick={() =&gt; authenticate().then(() =&gt; loadClient())}&gt;auth&lt;/button&gt; */}
                 &lt;Button onClick={() =&gt; executeFinal()}&gt;Connect&lt;/Button&gt;
            &lt;/Fragment&gt;
        )
    }
    export default YouTubeConnect;
  </code></pre>
  
  <p>I have tried some solutions. But, it still shows the error. Please tell me where is the problem.
  Thanks in advance.</p>