Rafael Veloso Rafael Veloso - 1 month ago 7
Javascript Question

Add authentication data to firebase database

I'm using Firebase at a school project and I'm having the same problem a while... I have looked at various sites but I can't find anyone with the same problem...

The User authentication is working correctly, but the problem is with saving the user data in the database.
I have two available ways to authenticate:


  • Email and password;

  • Facebook.



With email and password, the data is written successfully in the database, and I'm using the following JavaScript code:

function signUp(){
//Get DOM data
const email = String(document.getElementById('TXTEmail').value);
const pass = String(document.getElementById('TXTPassword').value);
const name = String(document.getElementById('TXTNome').value);
const gender = document.registo.sexo.value;
const auth = firebase.auth();
var promise = auth.createUserWithEmailAndPassword(email,pass);
promise.catch(e => console.log(e.message));

firebase.database().ref('users/' + firebase.auth().currentUser.uid).set({
name : name,
email : email,
gender : gender,
uid: firebase.auth().currentUser.uid
});
}


However, when using the function of facebook I can't save the data, I can only authenticate the user, and the code I'm using is as follows:

function signUpFacebook(){
var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithRedirect(provider);
firebase.auth().getRedirectResult().then(function(result) {
if (result.credential) {
// This gives you a Facebook Access Token. You can use it to access the Facebook API.
var token = result.credential.accessToken;
}
// The signed-in user info.
var user = result.user;
const name = user.displayName;
const email = user.email;
const photo = user.photoURL;
if(user != 0) {
firebase.database().ref('users/' + user.uid).set({
name: nome,
email: email,
photo: photo,
uid: user.uid
});
}
//Tests only
if(user != 0){
console.log("name: "+user.displayName);
console.log("email: "+user.email);
console.log("photoUrl: "+user.photoURL);
console.log("uid: "+user.uid);
}
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
var email = error.email;
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;

});
}


And I get this output on my console:
Console output.

name: Rafael Veloso
email: rafael****@gmail.com
photoUrl: scontent.xx.fbcdn.net/v/t1.0-1/s100x100/…
uid: **HY43Tl******KoO6OhZjG****


Also, my database.rules.json is:

{
"rules": {
".read": true,
".write": true
}
}


Does anyone know what is the problem that I'm having?
Thank you.

Answer

with the help of the Firebase support I managed to solve my problem :)

First, created a script within the .html document like that:

<script>
document.getElementById('btnFacebook').addEventListener('click', signUpFacebook, false);

function signUpFacebook(){
    var provider = new firebase.auth.FacebookAuthProvider();
    firebase.auth().signInWithRedirect(provider);
}

function createNewPost(name, email, photo, uid) {
    firebase.database().ref('users/' + uid).set({
        name: name,
        email: email,
        photo: photo,
        uid: uid
    });
}

firebase.auth().getRedirectResult().then(function(result) {
    if (result.credential) {
        var token = result.credential.accessToken;
    }
    // The signed-in user info.
    if(user != null) {
        console.log("name: "+user.displayName);
        console.log("email: "+user.email);
        console.log("photoUrl: "+user.photoURL);
        console.log("uid: "+user.uid);
    }

}).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

});

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        var name = user.displayName;
        var email = user.email;
        var photo = user.photoURL;
        var uid = user.uid;
        createNewPost(name, email, photo, uid);
        console.log("name: "+user.displayName);
        console.log("email: "+user.email);
        console.log("photoUrl: "+user.photoURL);
        console.log("uid: "+user.uid);
    }
});

With just that, I still wasn't able to add the user data to the Realtime Database, so I changed my "imports", I was with this:

<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>

and only when I changed to the following I was able to save the user data in the Database:

<!--    <script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase-messaging.js"></script>-->
<script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>

But I find that strange, can anyone help and explain me why that worked out?

Comments