next.jsでfirebaseのリダイレクト方式のログインでデータ取得できなくて困っています

実現したいこと

Header.jsの変数emailの中身が取得できなくて困っています。
データベースはfirebase、v8です。
一応ポップアップ方式（firebase.auth().signInWithPopup）にすると値を取得できているのですが、何故かリダイレクト方式（firebase.auth.signInWithRedirect）に変更すると値を取得できません。
変数emailはページ全部で共有して使える様になっています。

※現在GithubでのHeader.jsの中身が変わっていますが、ここに書いてあるHeader.jsでの前提でお願いします。
詳しいファイルの中身のgithubはこちらです
https://github.com/KKt53/DG_telephone

発生している問題・分からないこと

現状の状態ではログインに成功してもコンソール上で「リダイレクト後のユーザーなし」と表示されます。
ポップアップ方式で同じようにログインすると値取得に成功します。

該当のソースコード

next.js(Header.js)
1import { useState, useEffect, useContext } from 'react';
2import firebase from 'firebase';
3import '../components/fire';
4import AuthContext from '../contexts/AuthContext';
5
6const auth = firebase.auth();
7const provider = new firebase.auth.GoogleAuthProvider();
8
9export default function Header(props) {
10  const { email, setEmail } = useContext(AuthContext);
11
12  useEffect(() => {
13    // 1. リダイレクト後の結果を取得
14    firebase.auth().getRedirectResult()
15      .then(result => {
16        if (result.user) {
17          console.log("リダイレクトログイン成功:", result.user.email);
18          setEmail(result.user.email);
19        } else {
20          console.log("リダイレクト後のユーザーなし");
21        }
22      })
23      .catch(error => {
24        console.error("リダイレクトログインエラー:", error);
25      });
26
27    // 2. ログイン状態の変更を監視
28    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
29      if (user) {
30        console.log("ログイン状態検出:", user.email);
31        setEmail(user.email);
32      }
33    });
34
35    return () => unsubscribe(); // クリーンアップ
36  }, []);
37
38  // ログイン処理（リダイレクト）
39  const handleLogin = () => {
40    if (!firebase.auth().currentUser) { // すでにログインしている場合はリダイレクトしない
41      firebase.auth().signInWithRedirect(provider);
42    } else {
43      console.log("すでにログイン済み:", firebase.auth().currentUser.email);
44    }
45  };
46
47  // ログアウト処理
48  const clear_email = () => {
49    firebase.auth().signOut().then(() => {
50      setEmail('');
51    });
52  };
53
54  return (
55    <div>
56      <h1 className="bg-primary px-3 text-white display-4 text-right">
57        {props.header}
58      </h1>
59
60      {!email ? (
61        <button className="btn btn-primary" onClick={handleLogin}>
62          Googleでログイン
63        </button>
64      ) : (
65        <div className="text-right">
66          <p>Email: {email}</p>
67          <button className="btn btn-primary" onClick={clear_email}>
68            ログアウト
69          </button>
70        </div>
71      )}
72    </div>
73  );
74}

next.js(fire.js)
1import firebase from 'firebase/app';
2import 'firebase/firestore';
3
4// ☆各プロジェクトの設定を記述
5const firebaseConfig = {
6    apiKey: "AIzaSyCd_4OIkpeQpaJKHbYPaQyQ8ItjT4-SmmA",
7    authDomain: "dgtelephone-aa990.firebaseapp.com",
8    projectId: "dgtelephone-aa990",
9    storageBucket: "dgtelephone-aa990.appspot.com",
10    messagingSenderId: "302246333552",
11    appId: "1:302246333552:web:0913ca35ca378d44b4b8b5"
12}
13
14if (firebase.apps.length == 0) {
15  firebase.initializeApp(firebaseConfig)
16}

next.js(AuthContext.js)
1import { createContext, useState, useEffect } from 'react';
2
3const AuthContext = createContext();
4
5export const AuthProvider = ({ children }) => {
6  const [email, setEmail] = useState(null);
7
8  useEffect(() => {
9    const storedEmail = localStorage.getItem('email');
10    if (storedEmail) {
11      setEmail(storedEmail);
12    }
13  }, []);
14
15  return (
16    <AuthContext.Provider value={{ email, setEmail }}>
17      {children}
18    </AuthContext.Provider>
19  );
20};
21
22export default AuthContext;