Как войти в систему с помощью Google (через Firebase) в приложении React с функциональными компонентами?

Question

Я пытаюсь войти в систему с помощью Google в моем приложении React / Firebase. Я следовал учебнику на YouTube (https://www.youtube.com/watch?v=umr9eNbx3ag), но результаты разные. Когда я нажимаю кнопку «Войти», меня перенаправляют в Google, выбирают учетную запись, а затем перенаправляют на мой сайт.

Кажется, что мое утверждение «if» никогда не выполняется, auth.currentUser никогда не оценивается как true.

Это мой файл Firebase

firebase.initializeApp(firebaseConfig)
export const firestore = firebase.firestore()
export const auth = firebase.auth()
export const provider = new firebase.auth.GoogleAuthProvider()
export const signInWithGoogle = () => auth.signInWithRedirect(provider)
export const signOut = () => auth.signOut()
export default firebase

Это мой логин

import { auth, signInWithGoogle, signOut } from '../../Firebase/Firebase'

const LoginOrRegister = () => {

  const { username, setUsername, idToken, setIdToken } = useContext(Context)

  useEffect(() => {
    auth.onAuthStateChanged(async nextUser => {
      if (auth.currentUser) {
        setIdToken(await auth.currentUser.getIdToken())
        setUsername(auth.currentUser.displayName)
      } else {
        setIdToken(null)
      }
    })
  }, [])

return (
  <div>
    <LogInForm>
    <button onClick={signInWithGoogle}> Log in with Google </button>
  </div>
)

Answer 1

Поскольку вы используете signInWithRedirect, вам нужно использовать auth.getRedirectResult() вместо auth.onAuthStateChanged, так как вы фактически выходите из приложения и возвращаетесь в

Ниже будет работать код или вы.

useEffect(() => {
    auth
      .getRedirectResult()
      .then(function(result) {
        console.log(result);
        if (result.credential) {
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = result.credential.accessToken;
          setToken(token);
          // ...
        }
        // The signed-in user info.
        var user = result.user;
        console.log(user);
        setData(user);
      })
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        console.log(errorCode, errorMessage);
        // ...
      });
  }, []);

Справочную документацию можно найти здесь