如何在用户的电子邮件使用 Firebase/auth 和 react-native 验证用户的电子邮件后立即登录，而无需创建整个着陆页？

Question

注意：我已经看到了这个问题，但创建一个完整的登录页面来验证用户似乎有点过分。

我使用带有电子邮件和密码的 firebase/auth 向我的 react-native 应用程序添加了登录功能。到目前为止，这效果很好，我这样做没有任何问题。

然后，我继续向一个新用户发送验证电子邮件，并只允许他/她在电子邮件验证后使用该应用程序。同样，这里没有问题。

下一步是在验证电子邮件后立即登录用户。这就是我卡住的地方，因为 onAuthStateChanged 事件处理程序在用户按下电子邮件中的验证链接后不会更新。

有没有办法实时监听< code>emailVerified状态？我尝试使用< code>setInterval()进行轮询，但是效果并不好，因为在验证和登录之间有明显的延迟。我了解到一个可以传递给< code > sendEmailVerification 的continueLink，但是我不知道如何在react-native中实现它。

我使用的是 Expo，因此使用的是 Firebase SDK，而不是 Firebase react 原生包。

这是我用于注册的代码：

export const signUp = async (username: string, email: string, password: string) => {
    try {
        const auth = getAuth();
        if (email && password && username) {
            // sign up 
            const userCredential = await createUserWithEmailAndPassword(auth, email, password);
            // save username in firestore
            await setUserName(userCredential, username);
            // send Email Verification
            await sendEmailVerification(userCredential.user);
            return true;
        }
    } catch (error) {
        onError(error);
    }
};

这是我的onAuthStateChanged处理程序:

auth.onAuthStateChanged(authenticatedUser => {
            try {
                if (authenticatedUser?.emailVerified) {
                    setUser(authenticatedUser)
                } else {
                    setUser(null)
                }
            } catch (error) {
                console.log(error);
            }
        });

Answer 1

使用下面的代码作为身份验证上下文。对于用户id，应使用“user.uid”

html lang-html prettyprint-override">import React, { useState, createContext } from "react";
import * as firebase from "firebase";

import { loginRequest } from "./authentication.service";

export const AuthenticationContext = createContext();

export const AuthenticationContextProvider = ({ children }) => {
const [isLoading, setIsLoading] = useState(false);
      const [user, setUser] = useState(null);
      const [error, setError] = useState(null);
      
       firebase.auth().onAuthStateChanged((usr) => {
        if (usr) {
          setUser(usr);
          setIsLoading(false);
        } else {
          setIsLoading(false);
        }
      });
      
      const onLogin = (email, password) => {
        setIsLoading(true);
        firebase.auth().signInWithEmailAndPassword(email, password)
          .then((u) => {
            setUser(u);
            setIsLoading(false);
          })
          .catch((e) => {
            setIsLoading(false);
            setError(e.toString());
          });
      };

      const onRegister = (email, password, repeatedPassword) => {
        setIsLoading(true);
        if (password !== repeatedPassword) {
          setError("Error: Passwords do not match");
          return;
        }
        firebase
          .auth()
          .createUserWithEmailAndPassword(email, password)
          .then((u) => {
            setUser(u);
            setIsLoading(false);
          })
          .catch((e) => {
            setIsLoading(false);
            setError(e.toString());
          });
      };

      const onLogout = () => {
        setUser(null);
        firebase.auth().signOut();
      };

      return (
        <AuthenticationContext.Provider
          value={{
            isAuthenticated: !!user,
            user,
            isLoading,
            error,
            onLogin,
            onRegister,
            onLogout,
          }}
        >
          {children}
        </AuthenticationContext.Provider>
      );
    };

Answer 2

所以最后我还是回答了这个问题，但是我根据自己的需要做了一点修改。我会把我的步骤发布给所有做同样事情的人。

< li >使用< code>firebase init创建一个简单的静态网站，并将其托管在firebase或其他地方(检查firebase控制台中的托管选项卡以开始) < li >按照本指南在网站上创建适当的处理程序 < li >将以下内容添加到您的< code>verificationHandler中以更新用户(不要忘记导入firestore)(我通过< code>continueURL发送用户Id，但可能有更好的方法)

// You can also use realtime database if you want
firebase.firestore().collection("users").doc(userId).set({
                            emailVerified: true
                        }, {merge: true}).then(() => {
                            message.textContent = "Your email has been verified.";
                        }).catch((error) => {
                            message.textContent = "The verification was invalid or is expired. Please try to send another verification email from within the app.";
                        });

const onUserDataChanged = (uid, callback) => {
   onSnapshot(doc(firestore, "users", uid), doc => callback(doc.data()));
}

// As an example
auth.onAuthStateChanged(authenticatedUser => {
             if (authenticatedUser && !authenticatedUser.emailVerified) {
                    unsubscribeFirestoreListener?.();
                    unsubscribeFirestoreListener = onUserDataChanged(authenticatedUser.uid, (data: any) => {
                        if (data?.emailVerified) {
                            setUser(authenticatedUser);
                            unsubscribeFirestoreListener?.();
                        }
                    });
             }
}