Why might Google Auth not work in Electron after build?

Question

API

Following the example from the Google documentation, I wrote such a script. That is, rewrote it in React view

import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import Backdrop from "@material-ui/core/Backdrop";
import CircularProgress from "@material-ui/core/CircularProgress";

import s from "./index.module.scss";

class AuthPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      CLIENT_ID:
       CLIENT_ID,
      API_KEY: API_KEY,
      DISCOVERY_DOCS: [
        "https://www.googleapis.com/discovery/v1/apis/drive/v3/rest",
      ],
      SCOPES: "https://www.googleapis.com/auth/drive.metadata.readonly",
      googleAuth: null,
      isLogged: false,
      loginInProcess: true,
    };
  }

  componentDidMount() {
    const script = document.createElement("script");
    script.onload = () => this.handleClientLoad();
    script.src = "https://apis.google.com/js/api.js";
    document.body.appendChild(script);
  }

  signIn() {
    const { googleAuth } = this.state;
    googleAuth.signIn();
    this.updateSigninStatus();
  }

  signOut() {
    const { googleAuth } = this.state;
    googleAuth.signOut().then(() => this.updateSigninStatus());
    // eslint-disable-next-line no-restricted-globals
    window.location.replace("/");
  }

  updateSigninStatus() {
    this.setState({
      isLogged: window.gapi.auth2.getAuthInstance().isSignedIn.get(),
      loginInProcess: false,
    });

    // this.listFiles();
  }

  handleClientLoad() {
    window.gapi.load("client:auth2", () => this.initClient());
  }

  initClient() {
    const { API_KEY, CLIENT_ID, DISCOVERY_DOCS, SCOPES } = this.state;

    window.gapi.client
      .init({
        apiKey: API_KEY,
        clientId: CLIENT_ID,
        scope: SCOPES,
        discoveryDocs: DISCOVERY_DOCS,
        ux_mode: "redirect",
      })
      .then(() => {
        this.setState(
          {
            googleAuth: window.gapi.auth2.getAuthInstance(),
          },
          () => {
            window.gapi.auth2
              .getAuthInstance()
              .isSignedIn.listen(this.updateSigninStatus());
          }
        );
      });
  }

  // eslint-disable-next-line class-methods-use-this
  listFiles() {
    window.gapi.client.drive.files
      .list({
        pageSize: 10,
        fields: "nextPageToken, files(id, name)",
      })
      .then(() => {});
  }

  render() {
    const { isLogged, loginInProcess } = this.state;
    return (
      <>
        <Backdrop className={s.backdrop} open={loginInProcess}>
          <CircularProgress color="inherit" />
        </Backdrop>

        {!loginInProcess && !isLogged && (
          <Button variant="contained" onClick={() => this.signIn()}>
            вход
          </Button>
        )}
        {!loginInProcess && isLogged && (
          <Button
            variant="contained"
            color="primary"
            onClick={() => this.signOut()}
          >
            выход
          </Button>
        )}
      </>
    );
  }
}

export default AuthPage;

The problem here is that when I run the dev build of the application, everything works fine, but if I run the build script and then run the built application, nothing will work and only an error is shown

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

Googling this error turned up nothing.

I suspect that in the Google OAuth settings I specified localhost:3000 as a trusted address, but now my application opens the file and not the link. But maybe I'm wrong, and if not, I don't know how to fix it.

Does anyone know what's wrong?