Firebase Auth Twitter登录立即重定向回登录页问题求助

我在Next.js 14应用中集成Firebase OAuth登录，Google、Microsoft和Yahoo登录均正常工作，但点击Twitter登录按钮后，会立即重定向回应用登录页，完全不显示Twitter的授权同意界面。

已完成的配置：

• 在Twitter开发者平台创建项目，正确设置重定向URL，获取了OAuth 1.0a的客户端ID和客户端密钥（确认Firebase对Twitter使用的是OAuth 1.0a版本）
• 在Firebase控制台启用Twitter作为登录提供商，并配置了从Twitter开发者平台获取的凭证
• 排除第三方Cookie/跟踪保护影响：已在多个浏览器测试并禁用跟踪保护，问题仍存在

以下是所有相关代码：

firebase-config.js #

import { initializeApp, getApp, getApps } from "firebase/app";
import {
  getAuth,
  TwitterAuthProvider,
  OAuthProvider,
  GoogleAuthProvider,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);

//OAuth Providers
const yahooProvider = new OAuthProvider("yahoo.com");
const microsoftProvider = new OAuthProvider("microsoft.com");
const twitterProvider = new TwitterAuthProvider();
const googleProvider = new GoogleAuthProvider();

export const auth = getAuth(app);

export { googleProvider, yahooProvider, twitterProvider, microsoftProvider };

LoginCard.tsx #

"use client";
import React from "react";
import Image from "next/image";
import { FaYahoo, FaTwitter, FaApple } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";
import {
  handleYahoo,
  handleGoogle,
  handleTwitter,
  handleMicrosoft,
} from "../../../lib/loginHandlers";
import { auth } from "../../../lib/firebase-config";
import { signOut } from "firebase/auth";
type Props = {
  portalName: string;
  redirectPortalName: string;
};

const signOutUser = () => {
  signOut(auth);
  console.log("fired sign out method");
};

const signInOptions = [
  { name: "Yahoo", icon: <FaYahoo />, color: "#553E93", onClick: handleYahoo },
  {
    name: "Google",
    icon: <FcGoogle />,
    onClick: handleGoogle,
    color: "#71A6FF",
  },
  {
    name: "Twitter",
    icon: <FaTwitter />,
    color: "#019AD6",
    onClick: handleTwitter,
  },
  { name: "Apple", icon: <FaApple />, color: "rgba(0,0,0,1)" },
  {
    name: "Microsoft",
    icon: (
      <Image
        src="/images/microsoft.png"
        width={16}
        height={16}
        alt="microsoft Logo"
      />
    ),
    color: "#2C2C2E",
    onClick: handleMicrosoft,
  },
];

export default function LoginCard({ portalName, redirectPortalName }: Props) {
  return (
    <div className="flex flex-col items-center justify-center rounded-xl p-3 md:border-2 md:border-gray-200 md:px-10 md:py-10 md:shadow-2xl">
      <h1 className="mb-10 mt-2 border-b-4 border-golden font-playfair text-4xl">
        Login
      </h1>
      <h2 className="mb-10 text-xl font-light">{portalName}</h2>

      {signInOptions.map((provider) => (
        <button
          onClick={provider.onClick}
          key={provider.name}
          style={{ backgroundColor: `${provider.color}` }}
          className="mb-3 min-w-[100%] rounded-xl border border-gray-200 p-3 text-white transition-all duration-150 hover:opacity-75"
        >
          <span className="mr-2 inline-block">{provider.icon}</span> Sign in
          with {provider.name}
        </button>
      ))}
      <span className="mt-8 text-center">
        Looking for the{" "}
        <a
          className="text-link transition-all duration-150 hover:text-linkHover"
          href=""
        >
          {redirectPortalName}
        </a>
        ?
      </span>
      <button onClick={signOutUser}>Sign Out</button>
    </div>
  );
}

loginHandlers.ts #

import { signInWithRedirect } from "firebase/auth";
import {
  yahooProvider,
  googleProvider,
  twitterProvider,
  microsoftProvider,
  auth,
} from "./firebase-config";


export const handleTwitter = async () => {
  console.log("Twitter fired");
  const result = await signInWithRedirect(auth, twitterProvider);
  console.log(result);
};

export const handleGoogle = async () => {
  console.log("Google fired");
  const result = await signInWithRedirect(auth, googleProvider);
  console.log(result);
};

export const handleYahoo = async () => {
  console.log("Yahoo fired");
  const result = await signInWithRedirect(auth, yahooProvider);
  console.log(result);
};


export const handleMicrosoft = async () => {
  console.log("Microsoft fired");
  const result = await signInWithRedirect(auth, microsoftProvider);
  console.log(result);
};

请告知我是否遗漏了明显的配置，或是否需要补充更多信息。

内容的提问来源于stack exchange，提问作者JaredCaprio