FirebaseUI - Validate displayName before user creation

Question

I am using firebaseui-web-react. In the signup flow, I want to validate the user-provided displayName before the user is created. In particular, I want to make sure the displayName is unique.

I know how to validate unique usernames with Firestore. I have a public user collection with displayName fields. I know how to see if a displayName is already taken, with a query like:

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

return snapshot.empty

I want to validate the displayName before the user is created. I want to avoid creating and immediately deleting the user. I want to validate the displayName before FirebaseUI sends the request to create the user.

However, FirebaseUI only provides callbacks like signInSuccessWithAuthResult. These callbacks only run after the user has been created. If I use these callbacks to validate the displayName, I will have to retroactively delete a created user if their displayName is taken. I want to validate the user's displayName before they are created to avoid deletion.

How can I use the query shown above to validate the displayName before the Firebase user is created? How can I support unique display names while leveraging the pre-made FirebaseUI components and context? How can I integrate form validation with FirebaseUI?

Answer 1

As it's said in the 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.

So you have no way to add a pre-hook, validation, etc. However, you can try to intercept the requests using xhr-intercept or fetch-intercept and do anything you want when there is a request for creating a user. You can cancel the request if the displayName is not unique and show an error via JS.