How to create custom URLs for new users using Firebase? - reactjs

Question

I have a React/Redux application that creates and saves new users under Firebase as /users/<uid>
However, I also want to have each user have a custom URL for their profile pages, like domain.com/users/john-david or domain.com/users/john-david-1343 (if the original /users/john-david is already taken.)
What's the best way to do this?
My problem is that I was going to store users under /users/<firstname-lastname-hash> in Firebase, but that seems like a bad idea to store them under anything besides uid (is this true?).
But also, if I don't do that, then how do I maintain /users/<uid> in Firebase, while creating new usernames that account for duplicates, and searching if the user exists when visiting domain.com/users/john-david-123
Here is some sample code of where the new user gets saved to Firebase
export function saveUser (data, user) {
let username = data.username
return ref.child(`users/${user.uid}/info`)
.set({
email: user.email,
firstname: data.firstName,
lastname: data.lastName,
admin: false,
// for /users/<username>
username: username,
uid: user.uid
})
.then(() => user)
}

Answer 1

In general we say you should store data in Firebase how you intend to view it, and there's no reason in particular that you must use the UID as your primary key when storing users. What you might want to is:
Store user data in /users/${username} as you mentioned, including a uid field.
When a user signs up, generate the firstname-lastname slug and store in /uids/${uid} = username.
This way you have a simple way to map from UID to user and vice-versa. The downside here is that once you bake a username into your data structure, you should probably never let them change their username.
Alternatively, you could reverse my suggestion and store /usernames/${username} = uid and /users/${uid}. This makes it easier to rename usernames, but requires that you do an extra lookup to go from username to data.