如何在react-redux-firebase中实现Firebase无密码邮箱链接登录与创建

针对你遇到的两个关于无密码邮箱认证和react-redux-firebase集成的问题，我整理了具体的解决思路和实践方案：

问题1：如何用react-redux-firebase的firebase.login()处理无密码邮箱链接登录的用户 #

首先要明确：当你使用Firebase原生的signInWithEmailLink(email, link)完成认证后，react-redux-firebase会自动监听Firebase Auth的状态变化，将用户信息同步到Redux Store中，不需要额外调用firebase.login()方法。

不过如果你的场景需要手动触发同步（比如自动同步失效的情况），可以按以下步骤操作：

1. 先完成原生的无密码登录流程：

   import { Linking } from 'react-native';
   import firebase from 'firebase/app';
   import 'firebase/auth';
   
   // 获取用户点击的邮箱链接
   const handleEmailLink = async () => {
     const url = await Linking.getInitialURL();
     const actionCodeSettings = {
       url: 'your-app-scheme://login', // 你的React Native应用跳转链接
       handleCodeInApp: true,
       iOS: { bundleId: 'your-ios-bundle-id' },
       android: { packageName: 'your-android-package-name', installApp: true, minimumVersion: '12' }
     };
   
     if (url && firebase.auth().isSignInWithEmailLink(url)) {
       let email = 'user@example.com'; // 可以从本地存储或输入框获取用户邮箱
       try {
         // 完成Firebase原生认证
         const userCredential = await firebase.auth().signInWithEmailLink(email, url);
         // 此时用户已登录，react-redux-firebase会自动同步到store
       } catch (error) {
         console.error('登录失败:', error);
       }
     }
   };
   

2. 如果发现Redux Store中没有同步用户信息，可以手动调用react-redux-firebase的同步方法：

   import { firebase } from 'react-redux-firebase';
   
   // 在登录成功后调用
   const syncUserToStore = async () => {
     const currentUser = firebase.auth().currentUser;
     if (currentUser) {
       // 同步用户认证信息到store
       await firebase.syncAuth();
       // 同步用户资料到store（如果Firestore中有users集合）
       await firebase.syncProfile(currentUser.uid);
     }
   };
   

为什么不需要用firebase.login()？
firebase.login()主要是为了封装邮箱/密码、第三方登录等流程，而无密码邮箱链接的认证已经通过原生方法完成，react-redux-firebase的核心是同步Auth状态到Redux，所以不需要再传入密码或凭证参数调用login。

问题2：如何用react-redux-firebase的createUser()处理无密码邮箱链接注册 #

同样，无密码邮箱链接的注册流程不需要调用firebase.createUser()，因为Firebase Auth会在用户首次通过链接登录时自动创建用户账号。正确的流程应该是：

1. 发送无密码登录链接给用户：

   import AsyncStorage from '@react-native-async-storage/async-storage';
   import firebase from 'firebase/app';
   import 'firebase/auth';
   
   const sendLoginLink = async (email) => {
     const actionCodeSettings = {
       url: 'your-app-scheme://login',
       handleCodeInApp: true,
       iOS: { bundleId: 'your-ios-bundle-id' },
       android: { packageName: 'your-android-package-name', installApp: true }
     };
   
     try {
       await firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings);
       // 保存用户邮箱到本地存储，后续验证时需要
       await AsyncStorage.setItem('pendingEmail', email);
       alert('登录链接已发送到你的邮箱');
     } catch (error) {
       console.error('发送链接失败:', error);
     }
   };
   

2. 用户点击链接完成登录后，自动创建用户并同步资料：
   当用户首次登录时，Firebase Auth会自动生成用户UID，此时你可以：

   • 用react-redux-firebase的setProfile()方法将用户资料同步到Redux Store和Firestore：

     import { firebase } from 'react-redux-firebase';
     
     const setupUserProfile = async (user) => {
       const profileData = {
         email: user.email,
         username: '默认用户名', // 可以让用户后续修改
         createdAt: firebase.firestore.FieldValue.serverTimestamp()
       };
       // 将资料同步到Redux Store和Firestore的users集合
       await firebase.setProfile(profileData, user.uid);
     };
     

   • 或者使用Firebase云函数的Auth触发器，在用户创建时自动初始化Firestore文档：

     // 云函数示例（index.js）
     const functions = require('firebase-functions');
     const admin = require('firebase-admin');
     admin.initializeApp();
     
     exports.createUserProfile = functions.auth.user().onCreate(async (user) => {
       await admin.firestore().collection('users').doc(user.uid).set({
         email: user.email,
         createdAt: admin.firestore.FieldValue.serverTimestamp()
       });
     });
     

为什么不用createUser()？
createUser()是为邮箱/密码注册设计的，需要密码参数，而无密码认证没有密码，且用户账号是在首次登录时自动创建的，所以直接用原生流程+资料同步即可。

内容的提问来源于stack exchange，提问作者Wissile Sogoyou