7

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?

David Y. Stephenson
  • 872
  • 4
  • 22
  • 44

2 Answers2

4

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.

teimurjan
  • 1,875
  • 9
  • 18
3

As firebaseUI cannot be customized, the possible solutions can be.

  1. Backend solution - Subscribe to firebase hooks that notifies any data change. where you can check for unique displayName.

  2. Frontend Solution - Design a custom Auth UI screen integrated with firebase UI plugins. Here you will have complete control over the data before sending it to firebase.

Abhishek
  • 1,302
  • 10
  • 18
  • I don't see how you can use hooks to avoid deleting an invalid user, and the link you provided does not load for me. Can you explain the backend strategy? – David Y. Stephenson Oct 08 '19 at 23:05
  • updated bad link. This might help you - https://firebase.google.com/docs/reference/functions/providers_firestore_.documentbuilder.html#onwrite – Abhishek Oct 09 '19 at 05:16
  • Wouldn't onWrite fire after the user is record is created, thus requiring me to retroacitvely delete it? – David Y. Stephenson Oct 09 '19 at 07:27
  • seems like you need to delete it. I don't have much experience using firebase cloud function, I'm just exploring it with you. Check if writing rule like this might help - https://firebase.google.com/docs/firestore/security/get-started – Abhishek Oct 09 '19 at 09:48
  • Unfortunately, I believe Firebase users created with Firebase Auth are not stored in a Firestore collection. You have to create your own "users" collection as I reference in my example code. As I understand it, the Firebase users themselves cannot be constrained with security rules. Thus I fear there is no delete-free "backend solution" as teimurjan says. – David Y. Stephenson Oct 09 '19 at 13:24