firebase-config.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: import.meta.env.VITE_API_KEY,
authDomain: import.meta.env.VITE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_PROJECT_ID,
storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_ID
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// Use named exports for better clarity and import flexibility
export { app, db };
authcontext.jsx
error is in the useEffect with const userDoc.
import { createContext, useContext, useEffect, useState } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { db } from '../utils/firebase-config'; // Assuming you have firestore imported from firebase-config
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const auth = getAuth();
const unsubscribe = onAuthStateChanged(auth, async (userAuth) => {
if (userAuth) {
setUser(userAuth);
// Read preferences from Firestore on login
try {
const userDoc = await db.collection('users').doc(userAuth.uid).get();
const userData = userDoc.data();
setUser((prevUser) => ({
...prevUser,
preferences: userData?.preferences || {} // assuming preferences is an object
}));
} catch (error) {
setError(error);
console.error("Error fetching preferences:", error);
}
} else {
setUser(null);
}
}, (error) => {
setError(error);
console.error("Auth error:", error);
});
return () => unsubscribe();
}, []);
// Function to save user preferences
const savePreferences = async (preferences) => {
try {
await db.collection('users').doc(user.uid).set({
preferences
}, { merge: true });
setUser((prevUser) => ({
...prevUser,
preferences: {
...prevUser.preferences,
...preferences
}
}));
} catch (error) {
setError(error);
console.error("Error saving preferences:", error);
}
};
return (
<AuthContext.Provider value={{ user, savePreferences, error }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => useContext(AuthContext);
user preferences start out blank then once logged in you can go to the settings page and add to the given settings that are in the settings page.
it allows me to input and but when I hit the save button the console gives me an error with db.collection