【React】2023年3月時点のGoogle認証に対応してるライブラリ「MomenSherif/react-oauth」

概要

この記事を書いてる2023年3月時点で、ReactでGoogle認証が実装できるライブラリを探していたところ、良さげなものがあったので今回紹介します。

対象のライブラリ

MomenSherif/react-oauthというライブラリです。2022年の5月にリリースされて、2023年3月まで定期的に更新されているようです。
認証後に、トークンもしくは認証コードを取得できるなど、フロントエンドで必要となる機能は実装されていそうです。

実装サンプル

認証コードを取得する実装をサンプルで紹介します。ボタンについては、今回はNextUIの使っていますが、基本何でも問題ないはずです。

import { Button } from "@nextui-org/react";
import { GoogleOAuthProvider, useGoogleLogin } from "@react-oauth/google";

function GoogleAuthComponentLogin() {
  const login = useGoogleLogin({
    onSuccess: (codeResponse) => console.log(codeResponse), // 認証コードを取得
    flow: "auth-code",
    scope: "email profile openid", // scopeはスペース区切り
  });

  return (
    <Button color="primary" onPress={login}>
      Google認証
    </Button>
  );
}

export default function GoogleAuthComponent() {
  // 認証用のProviderにGCPのクライアントIDを設定
  return (
    <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}>
      <GoogleAuthComponentLogin />
    </GoogleOAuthProvider>
  );
}