SignInWithRedirect 未按预期工作

Question

当我尝试在我的 React 项目中使用 SignInWithRedirect 时，我（如预期）被重定向到 google 网站，但是，我只在顶部看到一个蓝色进度条，然后很快重定向回我的网站。我想让它向我显示我的谷歌登录选项，但它不会发送给我。我在 SignInWithPopup 中发现了类似的问题，但它引发了跨源错误。我登录过一次，它似乎不会再让我登录，或者它不会让我选择帐户。此外，如果我尝试再次使用同一电子邮件登录，则在注销后，它也不起作用。我是 React 的新手。这是我的代码：

import './app.css'
import { Route, Routes, json } from 'react-router-dom'
import { Link, useMatch, useResolvedPath } from "react-router-dom"
import Home from './pages/home.jsx'
import PPapers from './pages/pastp.jsx'
import Logo from './images/re.svg'
import 'bootstrap/dist/css/bootstrap.min.css';
import { auth, googleProvider } from './config/firebase-config';
import { createUserWithEmailAndPassword, signInWithRedirect, signOut } from 'firebase/auth'; 
import { useEffect, useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import GoogleLogo from './images/google.png'
import { onAuthStateChanged } from 'firebase/auth';




function NavBar(){
  useEffect(() => {
    if (cLogged) {
      console.log(auth.currentUser.email);
    }
  });

  const logout = async () => {
    try {
      await signOut(auth);
    } catch (err) {
      console.error(err);
    }

    // Wait for a short time before checking the authentication state again
    setTimeout(() => {
      isLogged();
    }, 2000);
  };

  function isLogged() {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setLoggedIn(true);
      } else {
        setLoggedIn(false);
      }
    });
  }

  
  const [cLogged, setLoggedIn] = useState(false);
  const [modalShow, setModalShow] = useState(false);
  return (
    <> 
      <div className = "navBar">
      <div id='LHS'>
        <img src= {Logo} alt="" />
          <label className="hamburger-menu">
          <input type="checkbox" />
          </label>
          <aside className="sidebar">
            <nav>
                <div><CustomLink className = "links" to="/">Home</CustomLink></div>
                <div><CustomLink className = "links" to="/pastp">Past Papers</CustomLink></div>
            </nav>
          </aside>
      </div>
        <div id="RHS">
          
          {cLogged ? <button className='accountBtn' onClick={logout}>Logout</button>: <Button variant="primary" className = 'accountBtn'onClick={() => setModalShow(true)}>Log-In</Button>}
          <SignInPopup
            show={modalShow}
            onHide={() => setModalShow(false)}
          /> 
          <Link id='pBtn'>
            Get Premium
          </Link>
        </div>
      </div>
    </>

  )
}

function SignInPopup(props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isLogin, setLogin] = useState(true); // State to manage whether it's a login or sign-up
  const [invalid, setInvalid] = useState(false); // State to manage the invalid state

  const signIn = async () => {
    try {
      await createUserWithEmailAndPassword(auth, email, password);
    } catch (err) {
      console.error(err);
      setInvalid(true);
    }
  };

  const signInWithGoogle = async () => {
    try {
      await signInWithRedirect(auth, googleProvider);
    } catch (err) {
      console.error(err);
      setInvalid(true); // Set invalid state to true
    }
  };

  function isInvalid() {
    return (
      email === "" ||
      password === "" ||
      password.length < 6 ||
      !email.includes('@') ||
      !email.includes('.')
    );
  }

  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      data-bs-theme="dark"
      className='modal'
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          <h2>RevisionEase</h2>
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>{isLogin ? 'Sign-in' : 'Sign-Up'}</h4>
        <p className='signIn' onClick={() => setLogin(!isLogin)}>
          {isLogin ? 'Sign-Up?' : 'Sign-in?'}
        </p>
        <div className='su'>
          <input placeholder="Enter Email" onChange={e => setEmail(e.target.value)} />
          <input placeholder="Enter Password" type='password' onChange={e => setPassword(e.target.value)} />
          <button className='signIn' onClick={signIn}>{isLogin ? 'Sign-in' : 'Sign-up'}</button>
          <p>Or sign-in with:</p>
          <button className="googlesu" onClick={signInWithGoogle}>
            <img src={GoogleLogo} alt="" />
          </button>
          <p>{(invalid && isInvalid) ? 'Please enter your details correctly' : ''}</p>
        </div>
      </Modal.Body>
      <Modal.Footer>
        <label>Log-in and Sign-up to gain access to more past papers and more!</label>
      </Modal.Footer>
    </Modal>
  );
}

function App() {
  return (
    <>
      <NavBar />
      <div className="maincontainer">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/pastp" element={<PPapers />} />
        </Routes>
      </div>
    </>
  )
}
function CustomLink({ to, children, ...props }) {
  const resolvedPath = useResolvedPath(to)
  const isActive = useMatch({ path: resolvedPath.pathname, end: true })

  return (
    <li className={isActive ? "active" : ""}>
      <Link to={to} {...props}>
        {children}
      </Link>
    </li>
  )
}



export default App;

这是我的 firebase 配置代码（一些细节被划掉，但填写在我的实际代码中）：

import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from 'firebase/storage';


const firebaseConfig = {
  apiKey: "---",
  authDomain: "---",
  projectId: "---",
  storageBucket: "---",
  messagingSenderId: "---",
  appId: "---",
  measurementId: "---"
};


const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();
export const db = getFirestore(app);
export const storage = getStorage(app);

我尝试寻找答案，但似乎很少。也许我真的很不幸或者不聪明。

Answer 1

添加此：

googleProvider.setCustomParameters({
    prompt: 'select_account',
});

它应该有帮助，但我有另一个问题，signInWithRedirect 打开新选项卡而不是在当前选项卡中重定向。你有什么想法吗？我用的是arc浏览器。