polymerfire create uid path in firebase database for new loggedin user - firebase

Question

I am new to polymer and firebase. I could not find good documentation on firebase-document element for polymer.
My question is when a new user is logged in, how can I create an object in firebase database with his uid?
Also, please point me to some good examples on how to save and query the data using polymerfire firebase elements.

Answer 1

To begin with, you'll need firebase-auth to make authentication magic happen. For example, if you want to do a Google login, you need:
Assign these properties to firebase-auth element
<firebase-auth
id="auth"
user="{{user}}"
provider="google"
signed-in="{{signedIn}}">
</firebase-auth>
Assign click/tap event listener to button
<button on-tap="signInWithGoogle">Sign In With Google</button>
Call OAuth authentication method on button click/tap
signInWithGoogle: function() {
this.$.auth.signInWithPopup();
}
Now, here's how you save user information to firebase database:
Assign these properties to firebase-document element (mind that path property is irrelevant at this point as it will be overridden with save() method)
<firebase-document
id="authDocument"
data="{{userData}}">
</firebase-document>
Extend signInWithGoogle() method
signInWithGoogle: function() {
// Chain then() method to the Promise
this.$.auth.signInWithPopup().then(function(response) {
// Update userData object with user information
// returned with signInWithPopup()
this.userData.displayName = response.user.displayName;
this.userData.email = response.user.email;
// Save userData object under /users/$uid. Note that at this
// point authDocument's path is now changed to /users/$uid
this.$.authDocument.save('/users', response.user.uid);
// And don't forget to bind this
}.bind(this));
}
Hope that helped. Here's a full implementation in single element. Mind that firebase-app element is in parent.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../bower_components/polymerfire/firebase-document.html">
<dom-module id="my-account">
<template>
<style>
:host {
display: block;
}
</style>
<firebase-auth
id="auth"
user="{{user}}"
provider="google"
signed-in="{{signedIn}}">
</firebase-auth>
<firebase-document
id="authDocument"
data="{{userData}}">
</firebase-document>
<div hidden$="[[user]]">
<button on-tap="signInWithGoogle">Sign In With Google</button>
</div>
<div hidden$="[[!user]]">
<table>
<tr><th>photoURL</th> <td><img src="[[user.photoURL]]" alt=""></td></tr>
<tr><th>uid</th> <td>[[user.uid]]</td></tr>
<tr><th>displayName</th> <td>[[user.displayName]]</td></tr>
<tr><th>email</th> <td>[[user.email]]</td></tr>
<tr><th>emailVerified</th> <td>[[user.emailVerified]]</td></tr>
</table>
<button on-tap="signOut">Sign Out</button>
</div>
</template>
<script>
Polymer({
is: 'my-account',
signInWithGoogle: function() {
this.$.auth.signInWithPopup().then(function(response) {
this.userData.displayName = response.user.displayName;
this.userData.email = response.user.email;
this.$.authDocument.save('/users', response.user.uid);
}.bind(this));
},
signOut: function() {
this.$.auth.signOut();
}
});
</script>
</dom-module>