import React, { useEffect } from 'react';

  function LoginYaID({ onAuthSuccess }) {
    useEffect(() => {
      if (window.YaAuthSuggest) {
        window.YaAuthSuggest.init(
          {
            client_id: process.env.REACT_APP_YANDEX_CLIENT_ID,
            response_type: 'token',
            redirect_uri: 'https://support.hobbs-it.ru/redirect',
          },
          'https://support.hobbs-it.ru/',

        )
        .then(({ handler }) => handler())
        .then(data => {
          onAuthSuccess(data); // Передаем данные в App
        })
        .catch(error => {
          if (error.code !== 'in_progress') {
            console.error('Ошибка при инициализации Яндекс авторизации:', error);
          }
        });
      }
    }, [onAuthSuccess]);

    return (
      <div id="container"></div>
    );
  }

  export default LoginYaID;


import React, { useEffect } from "react";

const RedirectToken = () => {
  YaSendSuggestToken(
    'https://support.hobbs-it.ru/', 
    {
       flag: true
    }
 )
  useEffect(() => {
    const params = new URLSearchParams(window.location.hash.slice(1));
    const token = params.get('access_token');

  }, );

  return <div></div>;
};

export default RedirectToken;


import React, { useState, useEffect } from "react";
import Header from "./components/Header";
import ContactForm from "./components/ContactForm";
import ListAnnouncement from "./components/ListAnnouncement";
import MessengerWidget from "./components/MessengerWidget";
import LoginYaID from "./components/LoginYaID";
import RedirectToken from "./components/RedirectToken";
import FeedbackForm from "./components/FeedbackForm";
import Feedback from "./components/FeedBack";
import "./App.css";

function App() {
  const [isYandexAuth, setIsYandexAuth] = useState(false);
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);

  useEffect(() => {
    // Проверка состояния авторизации при инициализации
    const token = localStorage.getItem("yandexToken");
    const isAuth = localStorage.getItem("isYandexAuth") === "true";

    if (token && isAuth) {
      // Если токен и состояние авторизации сохранены, используем их
      handleAuthSuccess({ access_token: token });
    }
  }, []);

  const handleAuthSuccess = (data) => {
    const token = data.access_token; // Получаем токен из данных
    if (token) {
      // Используем токен для запроса информации о пользователе
      fetch("https://login.yandex.ru/info?format=json", {
        method: "GET",
        headers: {
          Authorization: `OAuth ${token}`,
        },
      })
        .then((response) => response.json())
        .then((userInfo) => {
          const allowedDomains = ["kurganmk.ru", "reftp.ru", "hobbs-it.ru"];
          const userEmail = userInfo.default_email || "";

          if (typeof userEmail === "string" && userEmail.includes("@")) {
            const userDomain = userEmail.split("@")[1];
            if (allowedDomains.includes(userDomain)) {
              setIsYandexAuth(true);
              localStorage.setItem("isYandexAuth", "true");
              localStorage.setItem("yandexToken", token);
            } else {
              setIsYandexAuth(false);
              localStorage.removeItem("isYandexAuth");
              localStorage.removeItem("yandexToken");
              alert("Авторизация с этого домена недопустима.");
            }
          } else {
            alert("Не удалось получить данные пользователя для авторизации.");
          }
        })
        .catch((error) => {
          console.error(
            "Ошибка при получении информации о пользователе:",
            error
          );
        });
    }
  };

  const handleLogout = () => {
    setIsYandexAuth(false);
    localStorage.removeItem("isYandexAuth");
    localStorage.removeItem("yandexToken");
  };

  return (
    <div className="bg-gray-100 min-h-screen p-4">
      <div className="max-w-6xl mx-auto bg-white p-6 rounded-lg shadow-lg">
        <Header isYandexAuth={isYandexAuth} handleYandexLogout={handleLogout} />
        {isYandexAuth ? (
          <>
            <div className="md:flex">
            <ContactForm />
            <ListAnnouncement />
      
            </div>
            <Feedback />
          </>
        ) : (
          <>
            <LoginYaID onAuthSuccess={handleAuthSuccess} />
            <RedirectToken onAuthSuccess={handleAuthSuccess} />
          </>
        )}
      </div>
    </div>
  );
}

export default App;

There are three components, they work in conjunction for authorization by Yandex ID, the authorization status is saved in localStorage so as not to ask to do it several times. Libraries are connected in public/index.html

Now the behavior is unclear to me. Catching the error object object

As expected, the authorization was successful, the data was saved in localstorage and there were no errors.`

enter image description here