Firebase generating two different uid's for the same user?

It stores the user under an id that looks like -N4xrZ...

That's the expected behavior since you're using push(). This function generates a unique ID each time is called.

When I make a call to get the user's UID (through userCredential.user.uid), it returns a much longer one that looks like a typical UID generated by Firebase and that isn't the same as the user's parent id.

The UID that comes from the authentication process, it's different than the one that is generated by push(). It's actually the same, each time you launch your app. So when you write data to the database, stop using push() and use the UID:

firebase.database().ref('users/' + userCredential.user.uid).set({
    username: name,
    email: email,
    profile_picture : imageUrl
});