React Native Firebase 刷新用户记录

Question

我目前正在构建一个带有经过验证的电子邮件屏幕的 firebase 登录系统。

我的问题是我在已验证的电子邮件屏幕上有一个重新加载用户按钮，用于更新用户的凭据，以便在 currentUser.emailVerified === true 时我的根目录将用户重定向到 AppStack。但是一旦按下重新加载按钮就不会被触发，所以我的根目录仍然是 currentUser.emailVerified === false 并且不会将用户重定向到 AppStack。

Login-System/context/AuthContext.js:

import React, { createContext, useContext, useState, useEffect } from 'react';
import { auth } from '../config';

const AuthContext = createContext();

export function useAuth() {
  return useContext(AuthContext);
}

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);
 
  function sendVerification() {
    return currentUser.sendEmailVerification();
  }

  const getUser = () => auth.currentUser;

  const reloadUser = () => getUser().reload();

  const reload = async () => {
    try {
      await reloadUser();
      const user = getUser();
      setCurrentUser(user);
    } catch (error) {}
    return reload;
  };

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user);
      setLoading(false);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  const value = {
    currentUser,
    loading,
    reload,
    sendVerification,
  };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

Login-System/screens/VerifyEmailScreen.js:

import React from 'react';
import { Text, StyleSheet } from 'react-native';

import { useAuth } from '../contexts/AuthContext';
import { View, Button } from '../components';
import { Colors } from '../config';

export const VerifyEmailScreen = () => {
  const { currentUser, reload, sendVerification } = useAuth();

  const handleSendVerification = async () => {
    try {
      await sendVerification();
    } catch (error) {}
    return handleSendVerification;
  };

  return (
    <>
      <View isSafe style={styles.container}>
        <View style={styles.center}>
          <Text style={styles.screenTitle}>Check your email</Text>
          <Text style={styles.screenInfo}>{currentUser.email}</Text>
          <Text style={styles.screenInfo}>
            We sent you an email with instructions on how to verify your email
            address. Click on the link in the email to get started.
          </Text>

          <Button
            style={styles.button}
            onPress={() => handleSendVerification()}>
            <Text style={styles.buttonText}>Resend</Text>
          </Button>
          <Button style={styles.button} onPress={reload}>
            <Text style={styles.buttonText}>Done</Text>
          </Button>
        </View>
      </View>
    </>
  );
};

Answer 1

我做了一些类似的工作来检查用户电子邮件是否已验证您可以使用此功能：

export function getUserEmailVerified() {
    const user = firebase.auth().currentUser;
    return !!user ? (user.emailVerified ? 'Yes' : 'No') : 'No';
}

要触发电子邮件验证，您可以使用此方法。此方法将触发电子邮件验证并刷新用户。

export function verificationEmail(email, onSuccess) {
    refreshUser();
    const user = firebase.auth().currentUser;
    const finishAction = message => {
      onSuccess();
      showToast(message);
    };
  
    user
      .sendEmailVerification()
      .then(() => {
        refreshUser();
      })
      .catch(error => finishAction(error.message));
}

要刷新用户，您可以使用此方法。

export function refreshUser() {
    let user = firebase.auth().currentUser;
    if (!!user && !user?.emailVerified) {
        interval = setInterval(() => {
        user?.reload().then();
        }, 3000);
    }
}

您还需要使用firebase 的onUserChanged 来检测用户信息是否被更改。它 returns 如果您的用户电子邮件验证字段发生更改，它将成为一个侦听器，这里是一个示例。

export function onUserChanged(listener) {
    firebase.auth().onUserChanged(listener);
}

React Native Firebase 刷新用户记录

React Native Firebase refresh user record

firebase

reactjs

react-native

firebase-authentication