I created a collection "user", nd then created doc as a current logged in user ui (you can see in screenshot). Now I want to add todo in that todo[] array. How can i do this using latest version of firebase v9?
I tried, but getting some error. Please check AddTodo() method below.
async register() {
createUserWithEmailAndPassword(auth, this.email, this.password)
.then((userCredential) => {
const currentUserUid = userCredential.user.uid;
return setDoc(doc(db, "users", currentUserUid), {
// add any additional user data here
name: "fullName",
email: "email",
todo: [],
});
})
.then(() => {
// User registration and document creation successful
})
.catch((error) => {
console.log(error.message);
});
},
async addTodo(){
if (this.newTodo != "" && this.newTask != "") {
const currentUser = auth.currentUser;
const currentUserUid = currentUser.uid;
await addDoc(collection(db, currentUserUid), [
{
title: this.newTodo,
task: this.newTask,
},
]);
}
}
Your second code snippet tries to add a new document to a collection named after the user's UID. That does not match the screenshot you have, which shows a document named after the UID in a collection names users.
To update the latter document, adding a task to the tasks array field:
async addTodo(){
if (this.newTodo != "" && this.newTask != "") {
const currentUser = auth.currentUser;
const currentUserUid = currentUser.uid;
await updateDoc(doc(db, 'users', currentUserUid), {
tasks: arrayUnion([
title: this.newTodo,
task: this.newTask,
]},
]);
}
}
Also see the Firebase documentation on adding and removing elements on an array field.
Im trying to submit the user data to the firebase firestore database, but the function to create a new collection is not working for me, I have checked some diferent ways to do it, but none of theme are working, I already update my firebase config file using the firebase comands on my terminal.
This is the code to call the service that use firestore:
this.authSvc.register(email, password).then((result) => {
this.authSvc.logout();
this.verifyEmail();
this.res = result?.user;
this.registerDB();
})
.catch((error) => {
this.toastr.error(this.firebaseError.codeError(error.code), 'Error');
this.loading = false;
});
}
verifyEmail() {
this.afAuth.currentUser.then(user => user?.sendEmailVerification())
.then(() => {
this.toastr.info('Se envio un correo con el link de verificación', 'Verificar Email')
this.router.navigate(['/verify-email'])
});
}
async registerDB() {
const path = 'Users';
const id = this.res.uid;
this.userData.uid = id;
this.userData.password = null;
await this.frservice.createDoc(this.userData, path, id);
}
And this is the code of the firestore service:
import { Injectable } from '#angular/core';
import { AngularFirestore } from '#angular/fire/compat/firestore';
#Injectable({
providedIn: 'root'
})
export class FirestoreService {
constructor(private firestore: AngularFirestore) { }
createDoc(userData: any, path: string, id: string) {
const collection = this.firestore.collection(path);
return collection.doc(id).set(userData);
}
getId() {
return this.firestore.createId();
}
getCollection<tipo>(path: string) {
const collection = this.firestore.collection<tipo>(path);
return collection.valueChanges();
}
getDoc<tipo>(path: string, id: string) {
return this.firestore.collection(path).doc<tipo>(id).valueChanges()
}
}
I just want to create a new collection were the user's data are going to be registered.
You should put an await before the this.registerDB(); call. Don't forget make you arrow function async!
I resolved the problem, It was the rules of the firestore DB:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if false;
}
}
}
I change it for this rule:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
The issue was that I didn't had the permission to write.
I have two files contact.js and functions.js. I am using firestore realtime functionality.
Here is my functions.js file code:
export const getUserContacts = () => {
const contactDetailsArr = [];
return db.collection("users").doc(userId)
.onSnapshot(docs => {
const contactsObject = docs.data().contacts;
for (let contact in contactsObject) {
db.collection("users").doc(contact).get()
.then(userDetail => {
contactDetailsArr.push({
userId: contact,
lastMessage: contactsObject[contact].lastMsg,
time: contactsObject[contact].lastMsgTime,
userName:userDetail.data().userName,
email: userDetail.data().emailId,
active: userDetail.data().active,
img: userDetail.data().imageUrl,
unreadMsg:contactsObject[contact].unreadMsg
})
})
}
console.log(contactDetailsArr);
return contactDetailsArr;
})
}
in contact.js when I do:
useEffect(() => {
let temp = getUserContacts();
console.log(temp);
}, [])
I want to extract data of contactDetailsArr in contacts.js but I get the value of temp consoled as:
ƒ () {
i.Zl(), r.cs.ws(function () {
return Pr(r.q_, o);
});
}
How do I extract the array data in my case?
The onSnapshot() returns a function that can be used to detach the Firestore listener. When using a listener, it's best to set the data directly into state rather than returning something from that function. Try refactoring the code as shown below:
const [contacts, setContacts] = useState([]);
useEffect(() => {
const getUserContacts = () => {
const contactDetailsArr = [];
const detach = db.collection("users").doc(userId)
.onSnapshot(docs => {
const contactsObject = docs.data().contacts;
const contactsSnap = await Promise.all(contactsObject.map((c) => db.collection("users").doc(c).get()))
const contactDetails = contactsSnap.map((d) => ({
id: d.id,
...d.data()
// other fields like unreadMsg, time
}))
// Update in state
setContacts(contactDetails);
})
}
getUserContacts();
}, [])
Then use contacts array to map data in to UI directly.
Assumptions
This answer assumes a user's data looks like this in your Firestore:
// Document at /users/someUserId
{
"active": true,
"contacts": {
"someOtherUserId": {
"lastMsg": "This is a message",
"lastMsgTime": /* Timestamp */,
"unreadMsg": true // unclear if this is a boolean or a count of messages
},
"anotherUserId": {
"lastMsg": "Hi some user! How are you?",
"lastMsgTime": /* Timestamp */,
"unreadMsg": false
}
},
"emailId": "someuser#example.com",
"imageUrl": "https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg",
"userName": "Some User"
}
Note: When asking questions in the future, please add examples of your data structure similar to the above
Attaching Listeners with Current Structure
The structure as shown above has a number of flaws. The "contacts" object in the user's data should be moved to a sub-collection of the user's main document. The reasons for this include:
Any user can read another user's (latest) messages (which can't be blocked with security rules)
Any user can read another user's contacts list (which can't be blocked with security rules)
As an individual user messages more users, their user data will grow rapidly in size
Each time you want to read a user's data, you have to download their entire message map even if not using it
As you fill out a user's contacts array, you are fetching their entire user data document even though you only need their active, email, imageUrl, and userName properties
Higher chance of encountering document write conflicts when two users are editing the contact list of the same user (such as when sending a message)
Hard to (efficiently) detect changes to a user's contact list (e.g. new addition, deletion)
Hard to (efficiently) listen to changes to another user's active status, email, profile image and display name as the listeners would be fired for every message update they receive
To fetch a user's contacts once in your functions.js library, you would use:
// Utility function: Used to hydrate an entry in a user's "contacts" map
const getContactFromContactMapEntry = (db, [contactId, msgInfo]) => {
return db.collection("users")
.doc(contactId)
.get()
.then((contactDocSnapshot) => {
const { lastMsg, lastMsgTime, unreadMsg, userName } = msgInfo;
const baseContactData = {
lastMessage: lastMsg,
time: lastMsgTime,
unreadMsg,
userId: contactId
}
if (!contactDocSnapshot.exists) {
// TODO: Decide how to handle unknown/deleted users
return {
...baseContactData,
active: false, // deleted users are inactive, nor do they
email: null, // have an email, image or display name
img: null,
userName: "Deleted user"
};
}
const { active, emailId, imageUrl, userName } = contactDocSnapshot.data();
return {
...baseContactData,
active,
email: emailId,
img: imageUrl,
userName
};
});
};
export const getUserContacts = (db, userId) => { // <-- note that db and userId are passed in
return db.collection("users")
.doc(userId)
.get()
.then((userDataSnapshot) => {
const contactsMetadataMap = userDataSnapshot.get("contacts");
return Promise.all( // <-- waits for each Promise to complete
Object.entries(contactsMetadataMap) // <-- used to get an array of id-value pairs that we can iterate over
.map(getContactFromContactMapEntry.bind(null, db)); // for each contact, call the function (reusing db), returning a Promise with the data
);
});
}
Example Usage:
getUserContacts(db, userId)
.then((contacts) => console.log("Contacts data:", contacts))
.catch((err) => console.error("Failed to get contacts:", err))
// OR
try {
const contacts = await getUserContacts(db, userId);
console.log("Contacts data:", contacts);
} catch (err) {
console.error("Failed to get contacts:", err)
}
To fetch a user's contacts, and keep the list updated, using a function in your functions.js library, you would use:
// reuse getContactFromContactMapEntry as above
export const useUserContacts = (db, userId) => {
if (!db) throw new TypeError("Parameter 'db' is required");
const [userContactsData, setUserContactsData] = useState({ loading: true, contacts: [], error: null });
useEffect(() => {
// no user signed in?
if (!userId) {
setUserContactsData({ loading: false, contacts: [], error: "No user signed in" });
return;
}
// update loading status (as needed)
if (!userContactsData.loading) {
setUserContactsData({ loading: true, contacts: [], error: null });
}
let detached = false;
const detachListener = db.collection("users")
.doc(userId)
.onSnapshot({
next: (userDataSnapshot) => {
const contactsMetadataMap = userDataSnapshot.get("contacts");
const hydrateContactsPromise = Promise.all( // <-- waits for each Promise to complete
Object.entries(contactsMetadataMap) // <-- used to get an array of id-value pairs that we can iterate over
.map(getContactFromContactMapEntry.bind(null, db)); // for each contact, call the function (reusing db), returning a Promise with the data
);
hydrateContactsPromise
.then((contacts) => {
if (detached) return; // detached already, do nothing.
setUserContactsData({ loading: false, contacts, error: null });
})
.catch((err) => {
if (detached) return; // detached already, do nothing.
setUserContactsData({ loading: false, contacts: [], error: err });
});
},
error: (err) => {
setUserContactsData({ loading: false, contacts: [], error: err });
}
});
return () => {
detached = true;
detachListener();
}
}, [db, userId])
}
Note: The above code will not (due to complexity):
react to changes in another user's active status, email or profile image
properly handle when the setUserContactsData method is called out of order due to network issues
handle when db instance is changed on every render
Example Usage:
const { loading, contacts, error } = useUserContacts(db, userId);
Attaching Listeners with Sub-collection Structure
To restructure your data for efficiency, your structure would be updated to the following:
// Document at /users/someUserId
{
"active": true,
"emailId": "someuser#example.com",
"imageUrl": "https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg",
"userName": "Some User"
}
// Document at /users/someUserId/contacts/someOtherUserId
{
"lastMsg": "This is a message",
"lastMsgTime": /* Timestamp */,
"unreadMsg": true // unclear if this is a boolean or a count of messages
}
// Document at /users/someUserId/contacts/anotherUserId
{
"lastMsg": "Hi some user! How are you?",
"lastMsgTime": /* Timestamp */,
"unreadMsg": false
}
Using the above structure provides the following benefits:
Significantly better network performance when hydrating the contacts list
Security rules can be used to ensure users can't read each others contacts lists
Security rules can be used to ensure a message stays private between the two users
Listening to another user's profile updates can be done without reading or being notified of any changes to their other private messages
You can partially fetch a user's message inbox rather than the whole list
The contacts list is easy to update as two users updating the same contact entry is unlikely
Easy to detect when a user's contact entry has been added, deleted or modified (such as receiving a new message or marking a message read)
To fetch a user's contacts once in your functions.js library, you would use:
// Utility function: Merges the data from an entry in a user's "contacts" collection with that user's data
const mergeContactEntrySnapshotWithUserSnapshot = (contactEntryDocSnapshot, contactDocSnapshot) => {
const { lastMsg, lastMsgTime, unreadMsg } = contactEntryDocSnapshot.data();
const baseContactData = {
lastMessage: lastMsg,
time: lastMsgTime,
unreadMsg,
userId: contactEntryDocSnapshot.id
}
if (!contactDocSnapshot.exists) {
// TODO: Handle unknown/deleted users
return {
...baseContactData,
active: false, // deleted users are inactive, nor do they
email: null, // have an email, image or display name
img: null,
userName: "Deleted user"
};
}
const { active, emailId, imageUrl, userName } = contactDocSnapshot.data();
return {
...baseContactData,
active,
email: emailId,
img: imageUrl,
userName
};
}
// Utility function: Used to hydrate an entry in a user's "contacts" collection
const getContactFromContactsEntrySnapshot = (db, contactEntryDocSnapshot) => {
return db.collection("users")
.doc(contactEntry.userId)
.get()
.then((contactDocSnapshot) => mergeContactEntrySnapshotWithUserSnapshot(contactEntryDocSnapshot, contactDocSnapshot));
};
export const getUserContacts = (db, userId) => { // <-- note that db and userId are passed in
return db.collection("users")
.doc(userId)
.collection("contacts")
.get()
.then((userContactsQuerySnapshot) => {
return Promise.all( // <-- waits for each Promise to complete
userContactsQuerySnapshot.docs // <-- used to get an array of entry snapshots that we can iterate over
.map(getContactFromContactsEntrySnapshot.bind(null, db)); // for each contact, call the function (reusing db), returning a Promise with the data
);
});
}
Example Usage:
getUserContacts(db, userId)
.then((contacts) => console.log("Contacts data:", contacts))
.catch((err) => console.error("Failed to get contacts:", err))
// OR
try {
const contacts = await getUserContacts(db, userId);
console.log("Contacts data:", contacts);
} catch (err) {
console.error("Failed to get contacts:", err)
}
To fetch a user's contacts in a way where it's kept up to date, we first need to introduce a couple of utility useEffect wrappers (there are libraries for more robust implementations):
export const useFirestoreDocument = ({ db, path }) => {
if (!db) throw new TypeError("Property 'db' is required");
const [documentInfo, setDocumentInfo] = useState({ loading: true, snapshot: null, error: null });
useEffect(() => {
if (!path) {
setDocumentInfo({ loading: false, snapshot: null, error: "Invalid path" });
return;
}
// update loading status (as needed)
if (!documentInfo.loading) {
setDocumentInfo({ loading: true, snapshot: null, error: null });
}
return db.doc(path)
.onSnapshot({
next: (docSnapshot) => {
setDocumentInfo({ loading: false, snapshot, error: null });
},
error: (err) => {
setDocumentInfo({ loading: false, snapshot: null, error: err });
}
});
}, [db, path]);
return documentInfo;
}
export const useFirestoreCollection = ({ db, path }) => {
if (!db) throw new TypeError("Property 'db' is required");
const [collectionInfo, setCollectionInfo] = useState({ loading: true, docs: null, error: null });
useEffect(() => {
if (!path) {
setCollectionInfo({ loading: false, docs: null, error: "Invalid path" });
return;
}
// update loading status (as needed)
if (!collectionInfo.loading) {
setCollectionInfo({ loading: true, docs: null, error: null });
}
return db.collection(path)
.onSnapshot({
next: (querySnapshot) => {
setCollectionInfo({ loading: false, docs: querySnapshot.docs, error: null });
},
error: (err) => {
setCollectionInfo({ loading: false, docs: null, error: err });
}
});
}, [db, path]);
return collectionInfo;
}
To use that method to hydrate a contact, you would call it from a ContactEntry component:
// mergeContactEntrySnapshotWithUserSnapshot is the same as above
const ContactEntry = ({ db, userId, key: contactId }) => {
if (!db) throw new TypeError("Property 'db' is required");
if (!userId) throw new TypeError("Property 'userId' is required");
if (!contactId) throw new TypeError("Property 'key' (the contact's user ID) is required");
const contactEntryInfo = useFirestoreDocument(db, `/users/${userId}/contacts/${contactId}`);
const contactUserInfo = useFirestoreDocument(db, `/users/${contactId}`);
if ((contactEntryInfo.loading && !contactEntryInfo.error) && (contactUserInfo.loading && !contactUserInfo.error)) {
return (<div>Loading...</div>);
}
const error = contactEntryInfo.error || contactUserInfo.error;
if (error) {
return (<div>Contact unavailable: {error.message}</div>);
}
const contact = mergeContactEntrySnapshotWithUserSnapshot(contactEntryInfo.snapshot, contactUserInfo.snapshot);
return (<!-- contact content here -->);
}
Those ContactEntry components would be populated from a Contacts component:
const Contacts = ({db}) => {
if (!db) throw new TypeError("Property 'db' is required");
const { user } = useFirebaseAuth();
const contactsCollectionInfo = useFirestoreCollection(db, user ? `/users/${user.uid}/contacts` : null);
if (!user) {
return (<div>Not signed in!</div>);
}
if (contactsCollectionInfo.loading) {
return (<div>Loading contacts...</div>);
}
if (contactsCollectionInfo.error) {
return (<div>Contacts list unavailable: {contactsCollectionInfo.error.message}</div>);
}
const contactEntrySnapshots = contactsCollectionInfo.docs;
return (
<>{
contactEntrySnapshots.map(snapshot => {
return (<ContactEntry {...{ db, key: snapshot.id, userId: user.uid }} />);
})
}</>
);
}
Example Usage:
const db = firebase.firestore();
return (<Contacts db={db} />);
Your code seems to be not written with async/await or promise like style
e.g. contactDetailsArr will be returned as empty array
also onSnapshot creates long term subscription to Firestore collection and could be replaced with simple get()
See example on firestore https://firebase.google.com/docs/firestore/query-data/get-data#web-version-9_1
I have a books collection in Firestore. Every book has authorUid property on it.
And I am getting Insufficient permissions error when I try to read collection of my books while being logged in.
These are my rules:
rules_version = '2';
service cloud.firestore {
function isAuth(){
return request.auth != null;
}
function isOwner(book){
return request.auth.uid == book.authorUid;
}
function isValidBook(book){
return (
book.title is string &&
book.title != '' &&
book.description is string
)
}
match /databases/{database}/documents {
match /users/{user} {
allow read, write: if isAuth();
}
match /books/{book}{
allow read: if isAuth() && isOwner(request.resource.data);
allow create: if isAuth() &&
isOwner(request.resource.data) &&
isValidBook(request.resource.data);
allow update: if isAuth() &&
isOwner(request.resource.data) &&
isOwner(resource.data) &&
isValidBook(request.resource.data);
allow delete: if isAuth() &&
isOwner(resource.data);
}
}
}
In vue/vuex I am using this code to perform CRUD operations (snippets):
const getBooks = () => db.collection('books');
const getOwnBooks = (uid: string) => getBooks().where('authorUid', '==', uid);
export const actions: ActionTree<BookState, RootState> & Actions = {
[ActionTypes.Listen]({ commit, rootGetters }) {
const user = rootGetters[USER_GETTER];
unsubscribe = getOwnBooks(user.uid).onSnapshot(snapshot => {
// ...
});
},
[ActionTypes.Unlisten]() {
unsubscribe();
},
async [ActionTypes.CreateBook]({ rootGetters }, payload) {
const user = rootGetters[USER_GETTER];
await getBooks().doc().set({ ...payload, authorUid: user.uid });
},
async [ActionTypes.DeleteBook](_, { bookId }) {
await getBooks().doc(bookId).delete();
},
async [ActionTypes.UpdateBook](_, { bookId, update }) {
await getBooks().doc(bookId).set(update, { merge: true });
},
}
It works after the first load, I need to know how to provide a promise to prevent the data mapping without first letting it load. On first load of the site it displays the error below. I think it's cause by not allowing the colleciton of data from the database before trying to map it?
Console error
DashboardComponent_Host.html:1 ERROR TypeError: Cannot read property 'map' of undefined at DashboardComponent.webpackJsonp.../../../../../src/app/dashboard/dashboard.component.ts.DashboardComponent.populateDashboard (dashboard.component.ts:70) at
For context the line 70 is this.goalsLength e.g. the first line that calls the db.
The TS file
ngOnInit() {
this.populateDashboard();
}
populateDashboard() {
// just needs a filter on active = if active its not completed. CHANGE IN DB FROM ACTIVE TO COMPLETED
this.goalsLength = this.progressService.getActiveGoals().map(goals => {
return goals.length;
});
this.visionsLength = this.progressService.getCompletedVisions().map(visions => {
return visions.length;
});
this.opportunitiesLength = this.progressService.getCompletedOpportunities().map(opportunities => {
return opportunities.length;
});
this.actionPlansLength = this.progressService.getCompletedActionPlans().map(actionPlans => {
return actionPlans.length;
});
Service
userId: string;
completedVisions: FirebaseListObservable<VisionItem[]> = null;
activeGoals: FirebaseListObservable<Goal[]> = null;
opportunities: FirebaseListObservable<Goal[]> = null;
actionPlans: FirebaseListObservable<Goal[]> = null;
constructor(private db: AngularFireDatabase,
private afAuth: AngularFireAuth) {
// setting userId returned from auth state to the userId on the service, now we can query
// currently logged in user, using the id. IMPORTANT
this.afAuth.authState.subscribe(user => {
if (user) {
this.userId = user.uid
}
});
}
// Used to get the dashboard values.
getCompletedVisions(): FirebaseListObservable<VisionItem[]> {
if (!this.userId) { return; } // if undefined return null.
this.completedVisions = this.db.list(`visions/${this.userId}`, {
query: {
orderByChild: 'completed',
equalTo: true
}
});
return this.completedVisions;
}
getCompletedOpportunities(): FirebaseListObservable<Goal[]> {
if (!this.userId) { return }; // if undefined return null.
this.opportunities = this.db.list(`goals/${this.userId}`, {
query: {
orderByChild: 'opportunitiesCompleted',
equalTo: true
}
});
return this.opportunities;
}
getCompletedActionPlans(): FirebaseListObservable<Goal[]> {
if (!this.userId) { return }; // if undefined return null.
this.actionPlans = this.db.list(`goals/${this.userId}`, {
query: {
orderByChild: 'allActionPlanFieldsCompleted',
equalTo: true
}
});
return this.actionPlans;
}
// Dashboard related queries.
getActiveGoals(): FirebaseListObservable<Goal[]> {
if (!this.userId) { return }; // if undefined return null.
this.activeGoals = this.db.list(`goals/${this.userId}`, {
query: {
orderByChild: 'completed',
equalTo: true
}
});
return this.activeGoals;
}
Just as the error messages state, you are willing to return FirebaseListObservable from all service functions and subscribing them from component, but service functions will return null when this.userId doesn't exist or unsetted.
The reason this happened is because you are setting this.userId in an asynchronous way(this.afAuth.authState.subscribe).
Just be sure all branches return Observable, for example:
if (!this.userId) { return Observable.of([]); } // provide an empty array if userId is not yet ready