Reactを使用してログイン中のGoogleアカウントを確認するための簡単な実装例

import React, { useState } from 'react';
import GoogleLogin, { GoogleLogout } from 'react-google-login';

const GoogleAuth = () => {
  const [loggedIn, setLoggedIn] = useState(false);
  const [userProfile, setUserProfile] = useState(null);

  const handleLoginSuccess = (response) => {
    setLoggedIn(true);
    setUserProfile(response.profileObj);
  };

  const handleLogoutSuccess = () => {
    setLoggedIn(false);
    setUserProfile(null);
  };

  const handleLoginFailure = (error) => {
    console.log('Google login failed:', error);
  };

  return (
    <div>
      {loggedIn ? (
        <div>
          <p>ログイン中のGoogleアカウント:</p>
          <p>名前: {userProfile.name}</p>
          <p>メールアドレス: {userProfile.email}</p>
          <GoogleLogout
            clientId="YOUR_GOOGLE_CLIENT_ID"
            buttonText="ログアウト"
            onLogoutSuccess={handleLogoutSuccess}
          />
        </div>
      ) : (
        <GoogleLogin
          clientId="YOUR_GOOGLE_CLIENT_ID"
          buttonText="Googleアカウントでログイン"
          onSuccess={handleLoginSuccess}
          onFailure={handleLoginFailure}
          cookiePolicy={'single_host_origin'}
        />
      )}
    </div>
  );
};

export default GoogleAuth;

上記のコードでは、GoogleAuthコンポーネントがログイン状態を管理し、ログイン成功時にはユーザープロファイル情報を表示します。ログアウト時にはログアウト処理が行われます。

以下の手順で実装を行います。

Google Developer Console（https://console.developers.google.com/）にアクセスして、プロジェクトを作成し、OAuth 2.0 クライアント IDを取得します。
YOUR_GOOGLE_CLIENT_IDを取得したクライアント IDに置き換えます。
GoogleAuthコンポーネントを他のコンポーネントで使用すると、ログイン中のGoogleアカウント情報が表示されます。

この実装は、react-google-loginパッケージを使用しており、Google Sign-In APIとの連携を簡素化しています。必要に応じてスタイリングやエラーハンドリングなどを追加してください。