【React.js&Next.js超入門 第2版】リスト6-8（ログイン認証 Firebase v9）

こちらの技術書はどうやらFirebaseのv８仕様で対応されているようで、v９では動かず3時間苦戦したので覚え書き。

研修の先生にご指導いただきつつ、
参考にさせて頂いたサイトはこちら。

本当に助かりました！！
ただ、私の場合は、プラス２つ追加設定が必要でしたので、同じく悶絶されている方はご参考まで。

ポップアップウィンドウの設定

アドレスバーのビックリマークをクリックすると「サイトの設定」がポップアップされるので、クリック。

「ポップアップとリダイレクト」を許可してポップアップ表示を予め有効にしておきましょう！でないと認証したくてもログインウィンドウが表示されなくなってしまいますので。

追加で必要だったコード
.catchエラー系の設定

先の記事に追加して欲しいコードがあります。 私の場合は先の記事のコードだけではエラーが表示されて 認証ログイン画面に遷移できませんでした。

なので、以下のようにuseEffect内に.catch〜を追加。
無事コードが動き、エラーで止まることなく、ログインできましたー😂

以下は先の記事にコードを追加したものです
マルっとコピペできるかと。

pages/fire/index.js

import { useState, useEffect } from 'react';
import Layout from '../../components/layout';
import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth';

const auth = getAuth();
const provider = new GoogleAuthProvider();

export default function Home() {
  const [message, setMessage] = useState('wait...');

  useEffect(() => {
    signInWithPopup(auth, provider)
      .then(result => {
        setMessage('logined: ' + result.user.displayName);
      })
      .catch(error => {
        if (error.code === 'auth/cancelled-popup-request') {
          setMessage('Authentication request was cancelled by the user.');
        } else {
          setMessage('An error occurred during authentication: ' + error.message);
        }
      });
  }, []);

  return (
    <Layout header="Next.js" title="Top page.">
      <div className="alert alert-primary text-center">
        <h5 className="mb-4">{message}</h5>
        <p className="h6 text-left">
          uid: {auth.currentUser != null ? auth.currentUser.uid : ''}<br />
          displayName: {auth.currentUser != null ? auth.currentUser.displayName : ''}<br />
          email: {auth.currentUser != null ? auth.currentUser.email : ''}<br />
          phoneNumber: {auth.currentUser != null ? auth.currentUser.phoneNumber : ''}
        </p>
      </div>
    </Layout>
  );
}

現場からは以上です！！