React oauthライブラリを使用し、ユーザー認可画面の表示を行う

はじめに

個人開発メモ📝
※実装途中なので都度更新していきます。

使用言語

バックエンド　→ php/laravel
フロントエンド　→ React

laravel内にViteでReactを導入しています。

【１】Google OAuthのクライアント情報を作成する

作成手順は以下を参考にさせていただきました。
https://www.delftstack.com/ja/howto/react/react-use-google-oauth-authentication/

作成が終わると、クライアントIDとクライアントシークレットが取得できます。
※ダイアログを閉じても、後から認証情報詳細は確認できました。

【２】１で取得したクライアントIDとクライアントシークレットを.envファイルで管理する

.env

// 省略
GOOGLE_CLIENT_ID=取得したID
GOOGLE_CLIENT_SECRET=取得したシークレット
GOOGLE_REDIRECT=設定時に記載したリダイレクト先

【３】react oauthライブラリの導入

npm install @react-oauth/google@latest

※reactのバージョンがv18だったので上記のライブラリを使用しました。
GitHub⇨https://github.com/MomenSherif/react-oauth

【４】認可画面表示の実装

ログインコンポーネントに追加しました。

Login.jsx

import { GoogleOAuthProvider, useGoogleLogin } from '@react-oauth/google';

function loginUserForm() {

     省略

    return(
        {/* Googleログイン */}
        <div className={ Login.login__google }>
            {/* GoogleOAuthProviderでラップする */}
            <GoogleOAuthProvider clientId={ import.meta.env.VITE_GOOGLE_CLIENT_ID }>
                <ProsessToProvider />
            </GoogleOAuthProvider>
        </div>
    );
};

// Googleログイン処理
export function ProsessToProvider() {
  const login = useGoogleLogin({
    // 認証が成功した際に実行される、コールバック関数　※現時点ではまだ使用していません
    onSuccess: (codeResponse) => console.log(codeResponse),
  });

  return (
    <button onClick={ login }>Google Login</button>
  );
};

// laravelの.envファイルにあるIDを使用するため環境変数の呼び出し
<GoogleOAuthProvider clientId={ import.meta.env.VITE_GOOGLE_CLIENT_ID }>

今回、laravelにViteでreactを導入しているため、import.meta.envで呼び出しています。Viteの環境変数として呼び出す際には、先頭にVITE_を付ける決まりがあるそうです。
参考サイト⇨https://ja.vitejs.dev/guide/env-and-mode.html

上記の呼び出しを行うため、laravelの.envファイルも変更しています。

.env

VITE_GOOGLE_CLIENT_ID=XXXXXXXXXXX

挙動確認

認可画面が表示されるようになりました。
別記事で今度は、認証を行なっていきたいと思います。