Custom Usernames with Firebase Authentication

Key Takeaways

in this episode we're going to create custom usernames for Firebase users then validate the usernames asynchronously using angular 4 users will first authenticate with ooth then they'll be directed to a username form and after each key press the username will be updated based on whether or not it's available in the database the first step is to model the data first we have a user's collection that saves just basic information about the user that we want to display throughout the app then we have a separate collection of just usernames where the username itself is the key and the value is the associated user ID this allows us to make checks for username availability much more quickly than we could if we query the entire list of [Music] users now we can start building the off service we're going to import the angular Fire 2 package both the database and the off module we also import the RX xjs switch map operator which we'll use to avoid nested subscriptions when we get the user data I'm also creating a dedicated user class to hold the user data in this case it's just going to take a username and a user ID and as the Constructor it'll take the Firebase off object in the service Constructor we first wait for the O object to emit from Firebase and then we use that data to query the database for the actual username the first function is going to allow the user to authenticate with their Google account this codes directly from the angular Fire 2 package to manage the username process we start by creating a getter to see if a username is defined or not then we create a check username function which will check the username collection to see if that particular username is defined lastly we create a function for the user to select their username this updates both the usern name's document as well as the user specific user document under their user ID now we can start building the component we start by injecting the off service then we set one variable for the username text which is what the user enters into the form then we set a separate variable for username available which is a Boolean true or false whether or not the username is available first the user will sign in with Google which will populate their user ID and then we'll display the form to fill out the username the check username function will send the actual request to the database to see if the username is available the return value is converted to a Boolean then we set that to our username available variable then we'll create an event handler to update the database when the user selects a valid username in the template we start with the sign in with Google button then once we have a current user and if their username is undefined then we display the username form the input itself uses NG model to set the username text variable and the component typescript then we bind the key up event to the check username function now we can display a couple messages conditionally based on whether or not that username is available we can also use the username available Boolean to disable the button if that username is already taken [Music] so now we have a working username system and we can see that it updates the database at both locations when the user clicks the button [Music] our final step is to enforce this validation on the back end with Firebase database rules we do this by setting a validation Rule and traversing the database calling root child usernames and then seeing if the new data the user is trying to enter already exists in the database if it does the rule will evaluate to false and prevent the operation from taking place [Music] that's it for this episode if you found the video helpful please like And subscribe and if you want to support the channel consider becoming a pro subscriber at angular firebase.com for just a few bucks a month you'll get access to exclusive content as well as free one-on-one project Consulting thanks for watching and I'll see you next time audio jump