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

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

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

追加で必要だったコード
.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>
  );
}

現場からは以上です！！