angularfire2 + angular 4: fetching data and using it in a component

Question

Alright, I recently switched form angularJS to angular 4.x and I am having some issues. Note that I am not moving any app, I am just building a new one from scratch, using Firebase as my back-end.

I got to the stage where I have authentication working fine (register and login). However, the built-in user system of Firebase allows for registration with email address and password - while I would like to add a username. The requirement is for this username to be unique.

As a structure, I have an auth.service which takes care of talking to firebase to register / login / logout. Conceptually speaking, my idea was as soon as a user wants to sign up (so, fills the form and click on the button), query the database for any user already registered with that name. Which is what I have been unsuccessfully trying to achieve. i query the data, but when I want to use it, it always comes as undefined...

To simplify, what would be the best way to ensure a user can register only if the username he chose is unique?

I would appreciate any help, even if it is just to point out a tutorial, I find the documentation to be very hard to follow. I am using firebase 3.9 with angularfire2 v4.

Thanks :)

Answer 1

I can see two approach to check if the user is already registered.

1. Firebase will throw an error if there's an already registered user

Probably the easiest way and you don't need to add much code to your existing code. Just modify you observable error handling in your service where you implement the sign-up.

2. Add "/users" node

Before you execute your sign-up functionality, check your users list if there is an existing email something like this

db.list('/users', ref => ref.equalTo(signUpEmail))

Note that whenever you have a new registered user, add them to this list.

More info:

Query list - https://github.com/angular/angularfire2/blob/master/docs/rtdb/querying-lists.md