I am using VUEX and Firebase to create a register form with three fields NAME, EMAIL, PASSWORD. First i am using createUserWithEmailAndPassword method to add the user but I also want to ad the name filed data to an Existing Blank collection, here I am using set method. But it is not adding the name field data in the collection.
methods: {
onSignUp() {
firebase
.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.then(user => {
console.log(user);
console.log(user.user.uid);
firebase.database.collection("profiles").doc(user.user.id).set({
name: this.name
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
this.$store.dispatch('signUserUp', user);
})
.catch(error => {
this.$store.dispatch('signUserError', error)
});
}
}
data(){
return {
name: "",
email: "",
password: "",
}
}
After submitting the form it's adding a new user and I can also see the uid in the console but some how its not updating the name field in the database.
You should use firebase.firestore() and not firebase.database (See this doc) and therefore adapt your code as follows:
onSignUp() {
firebase
.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.then(user => {
console.log(user);
console.log(user.user.uid);
return firebase.firestore().collection("profiles").doc(user.user.id).set({
name: this.name
});
})
.then(() => {
console.log("Document successfully written!");
this.$store.dispatch('signUserUp', user);
})
.catch(error => {
this.$store.dispatch('signUserError', error)
});
}
}
You should also check that your security rules for the profiles collection are correctly set. Normally (authenticated) users should only be able to write a document with their own userid as document id.
Related
I am building an app with firebase .
I had successfully implemented a function that will enable the user to upload a pic to firebase storage
here it is
const uploadImageToBucket = async () => {
let blob;
try {
setUploading(true);
blob = await getPictureBlob(image);
const ref = await storage.ref().child(uuid.v4());
const snapshot = await ref.put(blob);
return await snapshot.ref.getDownloadURL();
} catch (e) {
alert(e.message);
} finally {
blob.close();
setUploading(false);
}
};
the problem is that I want the picture to be uploaded based on certain user and I want to set that pic as user profile pic .any suggestion please!!
here the user sign up function
const handleSignUp = () => {
setErrortext("");
if (!FullName) return alert("Please fill Name");
if (!Email) return alert("Please fill Email");
if (!Password) return alert("Please fill Address");
setIsLogged(true);
firebase
.auth()
.createUserWithEmailAndPassword(Email, Password)
.then((user) => {
alert("Registration Successful. Please Login to proceed");
console.log(user);
if (user) {
firebase
.auth()
.currentUser.updateProfile({
displayName: FullName,
})
.then(() => navigation.replace("Log_In"))
.then(() => {
firebase.auth().onAuthStateChanged((userData) => {
setuserData(userData);
});
})
.catch((error) => {
console.log(error);
setErrortext(error);
});
}
})
.catch((error) => {
if (error.code === "auth/email-already-in-use") {
setErrortext("That email address is already in use!");
setIsLogged(false);
} else {
setErrortext(error.message);
setIsLogged(false);
}
});
};
You can simply use updateProfile method to update currently logged in user's photoURL and set it to the download URL just requested. The uploadImageToBucket function returns that URL back so you can try this:
uploadImageToBucket().then(async (photoURL) => {
const user = firebase.auth().currentUser
await user.updateProfile({ photoURL })
console.log("Photo URL updated")
})
For the app I'm building, I want my users to have a profile created for them when they register; the profile would contain the user's username, email, and the uid created by firebase authentication. I've got the authentication portion using createUserWithEmailAndPassword to work on its own. I'm also able to create a "users" collection, capturing a username and the user's email, on its own as well. However, I'm running into trouble grabbing and saving the uid to the user's profile in the user's collection.
Here is the code I have at the moment:
import * as firebase from "firebase/app";
import db from "../../components/firebase/firebaseInit";
actions: {
registerUser({ commit }, payload) {
commit("setLoading", true);
commit("clearError");
firebase
.auth()
.createUserWithEmailAndPassword(payload.email, payload.password)
.then(user => {
commit("setLoading", false);
const newUser = {
email: user.email,
id: user.uid,
courses: []
};
commit("setUser", newUser);
db.collection("users")
.add({
username: payload.username,
email: user.email,
userId: user.uid
})
.then(() => {
console.log("New user added!");
})
.catch(err => {
console.log(err);
});
})
.catch(err => {
commit("setLoading", false);
commit("setError", err);
});
},
In the research I've done, I've found these suggested solutions:
Get Current User Login User Information in Profile Page - Firebase and Vuejs
Cloud Firestore saving additional user data
And this video:
https://www.youtube.com/watch?v=qWy9ylc3f9U
And I have tried using the set() method instead of add(), as well.
But none of them seem to work, for me at least.
Thank you in advance for your help.
And if you need to see any more code, just let me know.
You haven't shared the error message you get, but most probably the error comes from the fact that the createUserWithEmailAndPassword() method returns a UserCredential and not a User.
So you have to do as follows:
import * as firebase from "firebase/app";
import db from "../../components/firebase/firebaseInit";
actions: {
registerUser({ commit }, payload) {
commit("setLoading", true);
commit("clearError");
firebase
.auth()
.createUserWithEmailAndPassword(payload.email, payload.password)
.then(userCredential=> {
commit("setLoading", false);
const user = userCredential.user; // <-- Here is the main change
const newUser = {
email: user.email,
id: user.uid,
courses: []
};
commit("setUser", newUser);
return db.collection("users")
.add({
username: payload.username,
email: user.email,
userId: user.uid
});
})
.then(() => {
console.log("New user added!");
})
.catch(err => {
commit("setLoading", false);
commit("setError", err);
});
},
I'm building a simple single page web app using Vue JS (Vue Cli 3) with Firebase's Firestore as the back-end database. I've managed to add, and delete records with ease. I'm running into an issue when trying to 'update' a user's details.
My code for this function is as follows:
saveEditUser() {
db.collection('users')
.where('email', '==', this.form.email)
.get()
.then(snap => {
snap.forEach(doc => {
doc.ref.update({
email: this.form.email
})
})
})
.then(() => {
console.log('Successfully updated the record')
})
.catch(error => {
console.error('There was an error editing the record: ' + error)
})
}
Some things that I've discovered during my attempts at debugging this:
This is not a scope issue where 'this' in the this.form.email is not available inside the forEach loop.
I thought this could be the case and so I declared a 'const vm = this' before the loop and tried to use vm.form.email, but no dice.
Also, when I try to update the email field to a simple string like 'abc' instead of a dynamic value such as this.form.email, it works!
After several spent hours on this ridiculous problem, I am officially stumped folks. Please send help!
Thank you.
TL;DR: the OP was updating a record with the same value, hence nothing appeared to change in the Firestore DB. However, in his code, there was the need to return the promise returned by the single asynchronous operation (or by the set of asynchronous operations)
Since your are potentially going to execute several asynchronous operations to the database in parallel (using the update() method, which return a promise, see doc) , you need to use Promise.all(), as follows.
saveEditUser() {
const email = this.form.email;
const= promises = [];
db.collection('users')
.where('email', '==', email )
.get()
.then(snap => {
snap.forEach(doc => {
promises.push(
doc.ref.update({
email: email //Actually the problems comes from here, see below
})
);
return Promise.all(promises);
})
})
.then(() => {
console.log('Successfully updated the record')
})
.catch(error => {
console.error('There was an error editing the record: ' + error)
})
}
If you are 100% sure your query will return only one doc you could update the doc directly, but then you have to return the promise returned by update(), as follows:
saveEditUser() {
const email = this.form.email;
db.collection('users')
.where('email', '==', email)
.get()
.then(snap => {
return snap.docs[0].ref.update({
email: email
});
})
.then(() => {
console.log('Successfully updated the record')
})
.catch(error => {
console.error('There was an error editing the record: ' + error)
})
}
Note: by declaring the email const at the beginning of the function, you should not encounter any problem of context anymore.
Update following our comments and discussion:
Actually you are updating with the SAME value of email. So it is normal you don't see any result. Just try to update with another value, like in the following code:
saveEditUser() {
const email = this.form.email;
db.collection('users')
.where('email', '==', email)
.get()
.then(snap => {
return snap.docs[0].ref.update({
email: 'john.doe#gmail.com'
});
})
.then(() => {
console.log('Successfully updated the record')
})
.catch(error => {
console.error('There was an error editing the record: ' + error)
})
}
If you want to test with a value from your form, just use two fields: one with the value to query and one with the new value, like:
<input v-model="form.mail" placeholder="mail to search for">
<input v-model="form.newMail" placeholder="new email">
.....
saveEditUser() {
const emailToQuery = this.form.email;
const newEmail = this.form.newMail;
db.collection('users')
.where('email', '==', emailToQuery )
.get()
.then(snap => {
return snap.docs[0].ref.update({
email: newEmail
});
})
.then(() => {
console.log('Successfully updated the record')
})
.catch(error => {
console.error('There was an error editing the record: ' + error)
})
}
I'm new with react-native-firebase
I want to link the user after login with facebook provider and google provider
I tried all solutions on the internet but any of them worked.
this is my code
const loginUser = await firebase.auth().signInAndRetrieveDataWithEmailAndPassword('test#gmail.com','password888').then(async function(userRecord) {
console.log("Successfully sign in user:", userRecord.user._user);
let user = firebase.auth().currentUser;
console.log('current user ',user)
let linkAndRetrieveDataWithCredential=firebase.auth().currentUser.linkAndRetrieveDataWithCredential(firebase.auth.FacebookAuthProvider.PROVIDER_ID).then(async u=>{
console.log('linkAndRetrieveDataWithCredential u',u)
}).catch(async (e)=>{
console.log('linkAndRetrieveDataWithCredential error',e)
})
console.log('linkAndRetrieveDataWithCredential error',linkAndRetrieveDataWithCredential)
/**/
await firebase.auth().fetchSignInMethodsForEmail('sss#sss.sss')
.then(async providers => {
console.log('login index providers',providers)
}).catch(function(error){
console.log('login index providers error',error)
})
}).catch(async function(error){
console.log('login error',error,error.email)
if(error.code=='auth/user-not-found'){
}else if(error.code=='auth/wrong-password'){
errorMsg=`${L('password')} ${L('notValid')}`
}
if(errorMsg){
if (Platform.OS === 'android') {
ToastAndroid.show(
errorMsg,
ToastAndroid.LONG
)
} else {
Alert.alert(
'',
errorMsg,
[{ text: L('close'), style: 'cancel' }]
)
}
}
console.log("Error sign in user:", error.code);
})
linkAndRetrieveDataWithCredential needs an AuthCredential, in my app I use react-native-fbsdk to get the credential(You’ll need to follow their setup instructions).
This function will prompt the user to log into his facebook account and return an AccessToken, then you get the credential from firebase and finally linkAndRetrieveDataWithCredential.
linkToFacebook = () => {
LoginManager.logInWithReadPermissions(['public_profile', 'email'])
.then((result) => {
if (result.isCancelled) {
return Promise.reject(new Error('The user cancelled the request'))
}
// Retrieve the access token
return AccessToken.getCurrentAccessToken()
})
.then((data) => {
// Create a new Firebase credential with the token
const credential = firebase.auth.FacebookAuthProvider.credential(data.accessToken)
// Link using the credential
return firebase.auth().currentUser.linkAndRetrieveDataWithCredential(credential)
})
.catch((error) => {
const { code, message } = error
window.alert(message)
})
}
I can add users in Firebase console -> Auth but I can't do anything more than setting an email and password for them.
Could I in some way set for them displayName?
I guess if you just want to update users profile:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
user.updateProfile({
displayName: "Random Name"
}).then(function() {
// Update successful.
}, function(error) {
// An error happened.
});
} else {
// No user is signed in.
}
});
Additionally: https://firebase.google.com/docs/auth/web/manage-users
When you create a user you create it only with email and password but you can and the displayName in the promise, then inside the .then() method you call the updateProfile method and you are ready, right down is the code:
onSubmit(formData) {
if(formData.valid) {
console.log(formData.value);
this.af.auth.createUserWithEmailAndPassword(
formData.value.email,
formData.value.password
).then(
(success) => {
console.log(success);
success.updateProfile({
displayName: "Example User",
photoURL: "https://example.com/jane-q-user/profile.jpg"
}).catch(
(err) => {
this.error = err;
});
this.router.navigate(['/login'])
}).catch(
(err) => {
this.error = err;
})
}
}
Note that in my example the displayName is set to "Example User", in the real app you just add the parameter as in my case it should be -> displayName:formData.value.name