GoogleLoginButton

Googleブランドガイドラインに準拠したログインボタン。認証ロジックはアプリ側で注入する。

いつ使うか

Google アカウントによるログイン・サインアップ画面で使用する
OAuth 認証フローのトリガーとして使用する

いつ使わないか

Google 以外の認証プロバイダのボタンには使わない。汎用的な ActionButton を使用する
ログイン以外の Google 関連アクション（Google Drive 連携等）には使わない

Usage

import { GoogleLoginButton } from '@bi-shop-it/ui/google-login-button';

<GoogleLoginButton onClick={() => handleGoogleLogin()} />;

`@react-oauth/google` との組み合わせ

認証ロジックは @react-oauth/google の useGoogleLogin フックで注入する。

import { useGoogleLogin } from '@react-oauth/google';
import { GoogleLoginButton } from '@bi-shop-it/ui/google-login-button';

const LoginPage = () => {
  const login = useGoogleLogin({
    onSuccess: (response) => {
      // アクセストークンをサーバーに送信する
    },
  });

  return <GoogleLoginButton onClick={() => login()} />;
};

Props

Prop	型	デフォルト	説明
`label`	`string`	`'Googleでログイン'`	ボタンのテキスト
`disabled`	`boolean`	`false`	無効状態にする
`isLoading`	`boolean`	`false`	ローディング状態にする。`disabled` と同時に適用される
`onClick`	`() => void`	—	クリック時のコールバック。認証ロジックをここに渡す

状態

無効

disabled を指定すると、操作不能な状態になる。

<GoogleLoginButton disabled />

ローディング

isLoading を指定すると、クリック不能かつ cursor-wait の状態になる。

<GoogleLoginButton isLoading />

カスタムラベル

label で表示テキストを変更できる。英語表記が必要な場合に使用する。

<GoogleLoginButton label="Sign in with Google" />

アクセシビリティ

コンポーネントが内部で処理すること

Google ロゴに aria-hidden="true" を付与し、スクリーンリーダーから隠す
disabled 状態で pointer-events-none を適用し、操作を防ぐ
button 要素を使用しているため、キーボード操作（Enter / Space）に対応する

利用者が対応すること

特になし