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

Question

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

我知道如何使用Firestore验证唯一的用户名。我有一个带有user字段的公共displayName集合。我知道如何查看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

由于无法自定义firebaseUI，因此可以采用可能的解决方案。

1. 后端解决方案-订阅firebase hooks，通知任何数据更改。您可以在其中检查唯一的displayName。

2. 前端解决方案-设计与firebase UI plugins集成的自定义Auth UI屏幕。在这里，您可以完全控制数据，然后再将其发送到Firebase。

Answer 2

如documentation中所述：

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

因此，您无法添加预挂接，验证等。但是，您可以尝试使用xhr-intercept或fetch-intercept拦截请求，并在有创建用户请求时执行您想要的任何操作。如果displayName不是唯一的，则可以取消请求，并通过JS显示错误。