React Native+Firebase邮箱密码认证：实现登录后显示用户名

嘿，我来帮你搞定这个需求！确实，Firebase Auth的邮箱密码登录默认只会返回用户的邮箱、UID这些基础信息，没有姓名字段。要实现“欢迎回来，[用户名]”的效果，我们需要额外把用户的姓名和Firebase用户绑定存储，具体步骤如下：

1. 准备：存储用户姓名到Firebase数据库 #

首先，我们需要用Firebase的Firestore或者实时数据库来存储用户的姓名信息，关联到用户的UID（每个Firebase用户唯一的标识）。

情况一：新用户注册时收集姓名 #

如果你的应用有注册流程，在注册页面添加一个姓名输入框，用户注册成功后，把姓名和UID一起存入数据库：

// 假设你已经初始化了Firebase Auth和Firestore
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { getFirestore, doc, setDoc } from "firebase/firestore";

const handleSignUp = async (email, password, name) => {
  try {
    const auth = getAuth();
    // 创建Firebase用户
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    
    const db = getFirestore();
    // 把姓名存入Firestore，文档ID用用户UID
    await setDoc(doc(db, "users", user.uid), {
      name: name,
      email: user.email,
      createdAt: new Date()
    });
    
    // 注册成功后跳转到首页
    navigation.navigate("Home");
  } catch (error) {
    console.error("注册失败：", error.message);
    // 这里可以把错误信息显示给用户
  }
};

情况二：已有用户补充姓名 #

如果用户已经通过邮箱密码登录过，但没有存储姓名，可以在登录成功后引导用户进入资料完善页面，输入姓名后再存入数据库。

2. 登录时获取用户姓名 #

修改你LoginForm.js里的登录逻辑，在登录成功后，通过用户UID从数据库中读取姓名，然后存入应用状态（比如React State、Context或者Redux），方便后续页面使用。

调整你的登录处理函数：

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
import { getFirestore, doc, getDoc } from "firebase/firestore";

class LoginForm extends Component {
  // ... 其他原有代码

  async onLoginPress() {
    const { email, password } = this.props;
    const auth = getAuth();
    try {
      // 执行Firebase登录
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      const user = userCredential.user;
      
      const db = getFirestore();
      // 根据UID查询用户文档
      const userDocRef = doc(db, "users", user.uid);
      const userDoc = await getDoc(userDocRef);
      
      if (userDoc.exists()) {
        const userData = userDoc.data();
        // 把姓名传递给父组件或者存入全局状态
        this.props.onLoginSuccess(userData.name);
        // 跳转到首页
        navigation.navigate("Home");
      } else {
        // 如果没有找到用户资料，引导去完善姓名
        navigation.navigate("ProfileSetup");
      }
    } catch (error) {
      // 处理登录错误，比如显示错误提示
      this.setState({ error: error.message });
    }
  }

  renderButton() {
    return (
      <Button
        onPress={this.onLoginPress.bind(this)}
        title="登录"
      />
    );
  }

  // ... 其他原有代码
}

3. 在首页显示欢迎语 #

拿到姓名后，在首页直接渲染即可：

// 首页组件示例
const HomeScreen = ({ userName }) => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontSize: 20 }}>欢迎回来，{userName}！</Text>
    </View>
  );
};

额外提示 #

• 如果你的应用支持第三方登录（比如Google、Facebook），Firebase Auth会自动返回displayName字段，这时候可以直接用user.displayName，不需要额外存储。
• 可以在用户个人资料页面提供修改姓名的功能，修改后同步更新Firestore里的文档。

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