reactjs - 创建一个中间步骤以使用 firebase 验证电子邮件地址，反应原生

Question

我正在尝试使用 react native 和 firebase 验证我的电子邮件地址。目前，我有一个注册页面，在输入所有凭据后，它会向电子邮件发送一个验证链接，我直接进入一个新屏幕。无法验证我的电子邮件。首先，我正在尝试验证我的电子邮件，通过单击电子邮件链接，然后，我可以导航到新屏幕。我正在尝试创建一个中间步骤来验证我的电子邮件地址，目前无法验证我的电子邮件链接。

这是我的尝试，

register: async (email, password) => {
          try {
            const userCredential = await auth().createUserWithEmailAndPassword(
              email,
              password,
          );
         await userCredential.user.sendEmailVerification();
       } catch (e) {
      console.error(e);
    }
},

这是我尝试重定向到新屏幕的尝试。

import React, {useContext, useState, useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import auth from '@react-native-firebase/auth';
import {AuthContext} from './AuthProvider';

import AuthStack from './AuthStack';
import AppStack from './AppStack';

const Routes = () => {
    // getting the created user
  const {user, setUser} = useContext(AuthContext);
 
  // subscribe to the users current authentication state, and receive an event whenever that state changes.
  const onAuthStateChanged = user => {
    setUser(user);
  };

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);


  return (
    <NavigationContainer>
      {user ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
};

export default Routes;

标签： reactjsfirebasereact-nativefirebase-authentication

Answer 1

仅当电子邮件经过验证后，您才可以设置用户，如下所示。如果未验证用户电子邮件地址，则添加中间屏幕。

const [user, setUser] = useState(false);
const [emailVerified, setEmailVerified] = useState(true);

firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
        if(user.emailVerified){
            setUser(true);  setEmailVerified(true);

        }
        else{
            setEmailVerified(false);
        }
    }
});

然后像这样使用你的条件渲染：

{user && <AppStack />}
{!user && <AuthStack />}
{!emailVerified && <EmailPendingVerifiedScreen />}