FirebaseUI-在创建用户之前验证displayName

Question

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

我知道如何使用Firestore验证唯一的用户名。我有一个user带有displayName字段的公共收藏。我知道如何查看a displayName是否已被接受，并带有如下查询：

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

return snapshot.empty

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

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

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

Answer 1

正如文档中所说：

目前，FirebaseUI 不提供开箱即用的自定义功能。但是，小部件周围的 HTML 不受其影响，因此您可以在小部件容器周围显示您想要的所有内容。

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