如何在 React Native Expo 中使用 Firebase 创建安全且用户友好的电子邮件/密码登录和入门流程

Question

我正在使用 React Native、Expo 构建一个移动应用程序，并使用 Firebase 作为我的数据库。请注意，我使用的是

Firebase

模块，而不是

@react-native-firebase

。让我向您介绍一下我的应用程序目前的工作原理。 在

App.js

文件中，

// App.js
useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setInitialScreen("Home");
      } else {
        setInitialScreen("Welcome");
      }
    });
  }, []);

这就是我检查用户是否已登录的方式，如果用户已登录，则我将初始屏幕状态设置为

Home

，否则我将其设置为

Welcome

。这个初始状态屏幕用于我的 React Navigation 的定义。这就是我现在创建 React 导航的方式，

// App.js
// Earlier Contents and logics
return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={initialScreen}>
        <Stack.Screen
          name="Welcome"
          component={Welcome}
          options={{ headerShown: false }}
        ></Stack.Screen>
        <Stack.Screen
          name="SignUp"
          component={SignUp}
          options={{ headerShown: false }}
        ></Stack.Screen>
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ headerShown: false }}
        ></Stack.Screen>
        <Stack.Screen
          name="EmailVerificationPending"
          component={EmailVerificationPending}
          options={{ headerShown: false }}
        ></Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );

好的，这就是我当前的应用程序。不让我告诉你我想做什么。 在我的注册页面中，我有一个包含 4 个输入字段的表单，它们是

email

、

display name

、

password

和

confirm password

。每当用户输入所有信息并单击

Create Account

按钮时，就会向其收件箱发送一封包含电子邮件验证链接的电子邮件。这就是我的实现方式，

// SignUp.js
try {
 await sendEmailVerification(user);
 props.navigation.replace("EmailVerificationPending");
 } catch (error) {
  Alert.alert("Error sending email verification", error.message, [
  { text: "Ok" },
 ]);
}

这会将电子邮件验证发送到用户的电子邮件并将其重定向到电子邮件验证待处理页面。但是，在发送验证电子邮件后，我想在登机时打开 3 个屏幕。这是我现在计划做的事情 首先，用户输入所有信息并单击

Create Account

按钮，然后用户应该被重定向到登机会话的第一页，上面写着类似

Verify your email from inbox

的内容。从该页面，他们无法返回（导航应该类似于如果他们按下手机中的后退按钮，他们就会退出应用程序）。用户将看到此消息，然后关闭应用程序，转到他们的电子邮件并单击验证网址。他们点击验证网址后，他们的电子邮件将被验证（我已经实现了这一点）。因此，在验证他们的电子邮件后，他们将打开我的应用程序，这是第一个问题。由于创建了他们的电子邮件，

App.js

文件将找到他们作为登录用户，并尝试将他们发送到

Home

页面。但我不希望这种情况发生，相反，我希望用户转到第二个登机屏幕，从那里他们可以返回到上一个登机屏幕，但由于他们已经经过验证，页面会显示“电子邮件地址已验证” 。但他们无法返回登机屏幕上的第一个屏幕。好的，在他们完成第二个登机页面后，他们将转到第三个登机页面，然后从那里转到主页。一旦他们到达主页，他们就无法返回任何其他屏幕（登机、欢迎屏幕或注册屏幕）。 有人可以指导我完成上述所有事情吗？

Answer 1

使用 React Navigation 时，我发现完全分离“经过身份验证”和“未经身份验证”的路由是最简单的，因此它看起来像这样：

// App.js

export const App = () => {
  const isLoggedIn = useLoggedIn();
  const hasFinishedOnboarding = useHasFinishedOnboaring();
  
  if (isLoggedIn && hasFinishedOnboarding) {
    return <AppNavigator />
  }
  
  return <OnboardingNavigator />

}

因此您需要存储两个值：

isLoggedIn

和

hasFinishedOnboarding

。您可以使用 React Context 或 Redux 来完成此操作，无论您喜欢哪种。