Запуск функции Javascript после загрузки библиотеки API Google в Гэтсби

Question

Я настраиваю Google Sign-In для серверных приложений на сайте Gatsby. Мне удалось загрузить библиотеки с использованием реактивного шлема, показанного в приведенном ниже коде, но не могу инициализировать объект GoogleAuth, описанный в шаге 3 этой статьи:

https://developers.google.com/identity/sign-in/web/server-side-flow

Мне удалось внедрить код через консоль разработчика, на которой запущен локальный экземпляр сайта, и пройти через процесс, однако я не смог сделать это через Gatsby / React. Я думаю, что это, вероятно, мое ограниченное знание двух платформ, которое вызывает проблему, и я, возможно, неправильно вызываю функцию Javascript.

import React from "react"
import { Helmet } from "react-helmet"

import Layout from "../components/layout"

export default () => (

<React.Fragment>

<Helmet>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
    </script>
    <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer>
    </script>

    <script
    dangerouslySetInnerHTML={{
        __html: `
        (function start() {
            gapi.load('auth2', function() {
              auth2 = gapi.auth2.init({
                client_id: 'REMOVED',
                // Scopes to request in addition to 'profile' and 'email'
                //scope: 'additional_scope'
              });
            });
          })();
        `,
    }}
/>



</Helmet>

<Layout>
<h1>Hello world!</h1>
<button id="signinButton" onClick={auth2.grantOfflineAccess().then(signInCallback)}>Sign in with Google</button>

</Layout>

</React.Fragment>



)

В настоящее время я получаю следующие сообщения об ошибках.

39: 36 ошибка 'auth2' не определена no-undef 39:68 ошибка 'signInCallback' не определена no-undef