reactjs - FirebaseUI - 在创建用户之前验证显示名称

Question

我正在使用firebaseui-web-react。在注册流程中，我想在创建用户之前验证用户提供的 displayName。特别是，我想确保 displayName 是唯一的。

我知道如何使用 Firestore 验证唯一用户名。我有一个带有 displayName 字段的公共(public) user 集合。我知道如何查看 displayName 是否已被占用，查询如下:

const snapshot = await store
  .collection('user')
  .where('displayName', '==', displayNameFormValue)
  .get()

return snapshot.empty

我想在创建用户之前验证displayName。我想避免创建并立即删除用户。我想在 FirebaseUI 发送创建用户的请求之前验证 displayName。

但是，FirebaseUI 仅提供 signInSuccessWithAuthResult 等回调。这些回调仅在创建用户后运行。如果我使用这些回调来验证 displayName，则在 displayName 被占用时，我将必须追溯删除创建的用户。我想在创建用户的 displayName 之前对其进行验证以避免删除。

如何在创建 Firebase 用户之前使用上面显示的查询来验证 displayName？如何在利用预制 FirebaseUI 组件和上下文的同时支持唯一的显示名称？如何将表单验证与 FirebaseUI 集成？

Answer 1

正如 documentation 中所述:

Currently, FirebaseUI does not offer customization out of the box. However, the HTML around the widget is not affected by it so you can display everything you want around the widget container.

所以你没有办法添加预钩子(Hook)、验证等。但是，你可以尝试使用 xhr-intercept 来拦截请求。或fetch-intercept当有创建用户的请求时，可以做任何你想做的事情。如果 displayName 不唯一，您可以取消请求并通过 JS 显示错误。