[React] FirebaseのGoogle認証でなんどもリダイレクトされてしまう原因がわからない

Question

前提

• ReactはFunctionコンポーネントで記述

※classコンポーネントは利用しない

• Googleアカウント認証

問題

公式ドキュメント5番「ログインページにリダイレクトしてログインを行う場合」

現在ReactとFirebaseを利用してGoogleアカウントの自動認証・ログインする仕組みを構築中なのですが、コンポーネントページ(src/auth/GoogleAuth.js)に遷移した際、リダイレクトが延々にループしてしまいます。
延々とリダイレクトループしてはサービスとしてよろしくありません。
なぜこのようなことがおこるのか、原因不明です。

ただ、試しに、ルートアドレスである「http://localhost:3000/」をURLにペーストすると
認証ページに遷移して、FirebaseのAuthenticationに登録・ログインはできています。

cf. Firebase Google認証公式ドキュメント
【Firebase公式】JavaScript で Google ログインを使用して認証する

// src/auth/GoogleAuth.js

import React from 'react';
import { Link } from 'react-router-dom';
import firebase from '../Firebase';

const GoogleAuth = () => {
    // ログインページにリダイレクトしてログインを行う場合の処理
    const provider = new firebase.auth.GoogleAuthProvider();

    firebase.auth().signInWithRedirect(provider);

    firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
            const token = result.credential.accessToken;
            console.log(token);
        }
        const user = result.user;
        console.log(user);
    }).catch(function(error) {
        const errorCode = error.code;
        const errorMessage = error.message;
        const email = error.email;
        const credential = error.credential;
        console.log(errorCode);
        console.log(errorMessage);
        console.log(email);
        console.log(credential);
    });

    return (
        <React.Fragment>
            <h2>Google Auth</h2>
            <p>認証完了しました</p>
            <Link to="/">Home</Link>
        </React.Fragment>
    );
}

export default GoogleAuth;

Answer 1

ReactはSPAなので、本来はGoogleAuthページは存在していなくて、
JSのルーティングによって表示するべきページを
リダイレクトしてしまったことで、うまく処理が通らずリダイレクトループに陥ってたようです。

実際にWebにデプロイするとGoogleAuthページはNot Foundと出ていました。

なので、GoogleAuthへ遷移するのではなく
SigninページにてonClickイベントで関数を走らせると
無事にGoogole認証&ログインできました。

うまくいったコードを実際のコードアップしておきます。

// src/auth/Signin.js
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { withRouter } from 'react-router';
import { AuthContext } from './AuthProvider';

// Google認証の関数インポート
import GoogleAuth from './GoogleAuth';

const Signin = ({ history }) => {
    const { signin } = useContext(AuthContext);

    const handleSubmit = (e) => {
        e.preventDefault();
        const { email, password } = e.target.elements;
        signin(email.value, password.value, history);
    }

    return (
        <React.Fragment>
            <h2>Sign in</h2>
            <form onSubmit={ handleSubmit }>
                <Link to="/signup">Sign up</Link>
                <input name="email" type="email" placeholder="Email" />
                <input name="password" type="password" placeholder="Password" />
                <button type="submit">Sign in</button>
            </form>

            {/* onClickイベント */}
            <button onClick={ GoogleAuth }>Google認証</button>
        </React.Fragment>
    );
}

export default withRouter(Signin);

// src/auth/GoogleAuth.js
import firebase from '../Firebase';

// Google認証する関数のみ
const GoogleAuth = (e) => {
    e.preventDefault();
    const provider = new firebase.auth.GoogleAuthProvider();

    firebase.auth().signInWithRedirect(provider);

    firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
            const token = result.credential.accessToken;
            console.log(token);
        }
        const user = result.user;
        console.log(user);
    }).catch(function(error) {
        const errorCode = error.code;
        const errorMessage = error.message;
        
        const email = error.email;
        const credential = error.credential;
        console.log(errorCode);
        console.log(errorMessage);
        console.log(email);
        console.log(credential);
    });
}

export default GoogleAuth;