Google OAuth LoginをReact ✖️ Viteで実装する📝

pnpm add @react-oauth/google

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import HomePage from "./pages/home/index.tsx";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { GOOGLE_CLIENT_ID } from "@/constants/env";

// Vite React App のエントリーポイント
// id="root" のDOMに対してReactをマウントする
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
      <div className="w-full h-full">
        <HomePage />
      </div>
    </GoogleOAuthProvider>
  </StrictMode>
);

import { CredentialResponse, GoogleLogin } from "@react-oauth/google";
import { jwtDecode } from "jwt-decode";

export const GoogleLoginButton = () => {
  /** ログイン成功時の処理 */
  const handleLoginSuccess = (credentialResponse: CredentialResponse) => {
    if (!credentialResponse.credential) {
      throw new Error("credentialResponse.credential is undefined");
    }

    // JWT をデコードしてユーザー情報を取得する。
    const decoded = jwtDecode(credentialResponse.credential);
    console.log("ログイン成功:", decoded);
    // 例: { name: "ユーザー名", email: "メールアドレス", sub: "Google ID" }
  };

  /** ログイン失敗時の処理 */
  const handleLoginError = () => {
    console.log("ログインに失敗しました");
    throw new Error("ログインに失敗しました");
  };

  return (
    <GoogleLogin onSuccess={handleLoginSuccess} onError={handleLoginError} />
  );
};