ViteのReactを使ってFirebase フェデレーションIDプロバイダのログイン処理について解説

import './Login.css'
import {useState} from "react";
import {auth} from "./Firebase";
import googleSignInButton from './img/btn-google.png';
import {GoogleAuthProvider} from 'firebase/auth';

const Login = (props) => {
    const styleRoot = 'Login container md:3/5 lg:w-3/6 xl:w-2/5 ';
    const styleHeader = 'h-20 flex justify-center items-center text-3xl';
    const styleMain = 'border border-emerald-400 p-5 rounded-md';
    const styleRow = 'p-5 flex flow-root';
    const styleInputLabel = 'block pb-1 text-lg text-emerald-700';
    const styleInput = 'border rounded-md border-emerald-500 w-full p-2 text-lg text-emerald-900';
    const styleBtn = 'p-2 w-full rounded-lg bg-emerald-400 hover:opacity-80 action:opacity-50 ' +
        'text-teal-50 text-lg hover:border-emerald-500 hover:ring-2 font-black';
    const styleProviderBtn = 'w-full flex justify-center';

    const formsInit = {
        email: '',
        password: '',
    };

    const [forms, setForms] = useState(formsInit);
    const handleEmailChange = e => setForms({...forms, email: e.target.value});
    const handlePasswordChange = e => setForms({...forms, password: e.target.value});
    const handlePasswordReminder = e => {
        console.log('パスワードリマインダー');
        e.preventDefault();
    };

    const clickForms = e => {
        e.preventDefault();
        auth.signInWithEmailAndPassword(forms.email, forms.password)
            .then(r => {
                console.log('パスワード成功', r);
            }).catch(e => {
                console.log('パスワードエラー', e);
            });
        console.log('buttonが押されました');
    };

    const clickGoogleAuth = e => {
        let provider = new GoogleAuthProvider();
        auth.signInWithPopup(provider).then(result => {
           console.log('Google認証成功', result);
        }).catch(error => {
            console.log('Google認証失敗', error);
        });
    };

    // 認証チェック処理
    auth.onAuthStateChanged(user => {
        console.log('認証チェック', user);
    });

    return (
        <div className={styleRoot}>
            <header className={styleHeader}>
                <h1 className="text-center">ログイン画面</h1>
            </header>
            <main className={styleMain}>
                <form onSubmit={clickForms}>
                    <div className={styleRow}>
                        <label htmlFor="email" className={styleInputLabel}>メールアドレス</label>
                        <input id="email" className={styleInput} name="email"
                               type="email" autoComplete="email" required
                               value={forms.email} onChange={handleEmailChange}/>
                    </div>
                    <div className={styleRow}>
                        <label htmlFor="password" className={styleInputLabel}>パスワード</label>
                        <input id="password" className={styleInput} name="password"
                               type="password" autoComplete="current-password" required
                               value={forms.password} onChange={handlePasswordChange}/>
                    </div>
                    <div className={styleRow}>
                        <div>
                            <a href="#" onClick={handlePasswordReminder}>パスワードを忘れた方</a>
                        </div>
                    </div>
                    <div className={styleRow}>
                        <button type="submit" className={styleBtn}>ログイン</button>
                    </div>
                </form>
                <div className={styleRow}>
                    <div className="flex items-center">
                        <hr className="w-full" />
                        <span className="w-1/2 text-center">または</span>
                        <hr className="w-full" />
                    </div>
                </div>
                <div className={styleRow}>
                    <button type="button" className={styleProviderBtn} onClick={clickGoogleAuth}>
                        <img src={googleSignInButton} className="h-14" />
                    </button>
                </div>
            </main>
        </div>
    );
}

export default Login;

import googleSignInButton from './img/btn-google.png';

import {GoogleAuthProvider} from 'firebase/auth';

const clickGoogleAuth = e => {
    let provider = new GoogleAuthProvider();
    auth.signInWithPopup(provider).then(result => {
       console.log('Google認証成功', result);
    }).catch(error => {
        console.log('Google認証失敗', error);
    });
};

<button type="button" className={styleProviderBtn} onClick={clickGoogleAuth}>
    <img src={googleSignInButton} className="h-14" />
</button>

auth.onAuthStateChanged(user => {
    console.log('認証チェック', user);
});

import facebookSignInButton from './img/btn-facebook.png';
import {GoogleAuthProvider, FacebookAuthProvider} from 'firebase/auth';

const clickFacebookAuth = e => {
    let provider = new FacebookAuthProvider();
    auth.signInWithPopup(provider).then(result => {
        console.log('Facebook認証成功', result);
    }).catch(error => {
        console.log('facebook認証失敗', error);
    });
};

<div className={styleRow}>
    <button type="button" className={styleProviderBtn} onClick={clickFacebookAuth}>
        <img src={facebookSignInButton} className="h-14" />
    </button>
</div>