We Keep Coding

I'm having problem figuring why login is working sometimes but sometimes not with Graph and Firebase

So, I have built this way of auth with firebase and graphql using mongo database, the problem is that everything is working, instead trying to login, its the same way of register but sometimes the method works and some times I get apollo client error, which I don't know why.
Here is my code to auth with Firebase and then check if the user exits and call the method and then the oposite.
import { FirebaseAuth } from "../config/Firebase";
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { Notifier } from "../utils";
import { USER_AUTH_ERROR } from "../config/Responders";
const Google = async (Register, Login, dispatch) => {
var Provider = new GoogleAuthProvider();
const data = await signInWithPopup(FirebaseAuth, Provider);
try {
if (data) {
const user = data.user;
const creationTime = user.metadata.creationTime;
const lastSignInTime = user.metadata.lastSignInTime;
if (creationTime === lastSignInTime) {
const name = user.displayName.split(" ");
const firstName = name[0] || "";
const lastName = name[1] || "";
const config = {
variables: {
createUserInput: {
Name: firstName,
Surname: lastName,
Email: user.email,
Avatar: user.photoURL || null,
Uid: user.uid,
},
},
};
Register(config);
}
else {
const config = {
variables: {
uid: user.uid,
},
};
Login(config);
}
}
else Notifier(dispatch, USER_AUTH_ERROR, `error`);
} catch (error) {
Notifier(dispatch, USER_AUTH_ERROR, `error`);
}
};
export
default Google;
While here is the place where I manage the functions:
const [Register, { data: registerData }] = useMutation(REGISTER);
const [Login, { data: loginData }] = useLazyQuery(AUTH);
const Auther = () => Google(Register, Login, dispatch);
useEffect(() => {
if (!account.Auth) {
if (registerData?.hasOwnProperty("UserRegister")) {
dispatch(Authenticate(registerData.UserRegister));
}
}
}, [registerData]);
useEffect(() => {
if (!account.Auth) {
if (loginData?.hasOwnProperty("UserAuth")) {
dispatch(Authenticate(loginData.UserAuth));
}
}
}, [loginData]);
Here is the error I get:

(Firebase Firestore)TypeError: n.indexOf is not a function

I'm trying to add another field value in a document but firebase returns TypeError: n.indexOf is not a function. Here's the code:
async function linkLCSN(cor, sn) {
try {
await setDoc(doc(db, "cor", cor), {
sn: sn,
}, {merge: true});
} catch(e) {
console.error(e);
}
}
I've already succeeded in doing this way but I don't know why this time it keeps giving me this error. This is the working code:
async function submitToDatabase(name, email, cor, cs, cn, concern) {
try {
//Set Datas
await setDoc(doc(db, "cor", cor), {
name: name,
email: email,
cor: cor,
courseSection: cs,
contactNumber: cn,
isViewed: false,
timestamp: serverTimestamp(),
}, {merge: true});
const docRef = await addDoc(collection(db, "cor", cor, "concerns"), {
concernData: concern,
});
console.log("Yung betlog nasa:" + docRef.id);
//Do page changes
let a = document.querySelector(".concern-main-container");
let b = document.querySelector(".concern-preview-container");
a.style.display = "none";
b.style.display = "block";
} catch(e) {
console.error(e);
//Custom Alert
}
}

I solved my problem by checking every type of params that passing to doc(), that params should not be Integer. It must be String

I'm assuming you are using v9 of firebase (modular version). It may sound silly, but make sure that you have initialized your app and that you are using a valid reference to a collection.
For example:
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const config = {/** your firebase config properties **/};
const app = initializeApp(config);
const db = getFirestore(app);
Then to add a new document, you can do:
const createDocument = (collectionName, document) => {
const colRef = collection(db, collectionName);
return addDoc(colRef, document);
};
Remember the addDoc function returns a promise, so be sure to handle this is the caller of createDocument

How do you create a subcollection in Firebase Firestore?

I'm having troulbe figuring out how to add a subcollection to a document in my React App. I'm also getting the error that db.collection() is not a function. I'm trying to add the subcollection in the registerWithEmailAndPassword function. The Firebase Firestore documentation does not specify how to create a subcollection. Any help would be greatly appreciated thank you. Firebase config has been ommited to protect my API key.
import { initializeApp } from "firebase/app";
import {
GoogleAuthProvider,
getAuth,
signInWithPopup,
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
sendPasswordResetEmail,
signOut,
} from "firebase/auth";
import {
getFirestore,
query,
getDocs,
collection,
where,
addDoc,
Firestore,
doc,
DocumentReference,
setDoc
} from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const googleProvider = new GoogleAuthProvider();
const signInWithGoogle = async () => {
try {
const res = await signInWithPopup(auth, googleProvider);
const user = res.user;
const q = query(collection(db, "users"), where("uid", "==", user.uid));
const docs = await getDocs(q);
if (docs.docs.length === 0) {
await addDoc(collection(db, "users"), {
uid: user.uid,
name: user.displayName,
authProvider: "google",
email: user.email,
});
}
} catch (err) {
console.error(err);
alert(err.message);
}
};
const logInWithEmailAndPassword = async (email, password) => {
try {
await signInWithEmailAndPassword(auth, email, password);
} catch (err) {
console.error(err);
alert(err.message);
}
};
const registerWithEmailAndPassword = async (name, email, password) => {
try {
const res = await createUserWithEmailAndPassword(auth, email, password);
const user = res.user;
const userDoc = await addDoc(collection(db, "users"), {
uid: user.uid,
name,
authProvider: "local",
email,
});
db.collection("users").doc(userDoc.id).collection("test");
} catch (err) {
console.error(err);
alert(err.message);
}
};
const sendPasswordReset = async (email) => {
try {
await sendPasswordResetEmail(auth, email);
alert("Password reset link sent!");
} catch (err) {
console.error(err);
alert(err.message);
}
};
const logout = () => {
signOut(auth);
};
export {
auth,
db,
signInWithGoogle,
logInWithEmailAndPassword,
registerWithEmailAndPassword,
sendPasswordReset,
logout,
};

This code uses the classic, namespaced syntax of Firebase SDK version 8 and before:
db.collection("users").doc(userDoc.id).collection("test");
But the rest of your code uses the new modular syntax of Firebase SDK versions 9 and later. The equivalent there would be:
collection(doc(collection(db, "users"), userDoc.id), "test")
Or more concisely:
collection(db, "users", userDoc.id, "test")
The above creates a reference to the subcollection, but doesn't create the collection in the database yet. A collection is created once a document is written to it, and removed automatically once the last document is removed from it.
So you can create a document in test (and thus create test) with:
const testCollection = collection(db, "users", userDoc.id, "test");
addDoc(testCollection, { title: "hello world })

error with reauthenticateWithCredential get error TypeError: credential._getReauthenticationResolver is not a function (firebase 9)

I am learning firebase. now want to change password with reauthenticateWithCredential(). but get error like this.
TypeError: credential._getReauthenticationResolver is not a function
this the code:
import { getAuth, reauthenticateWithCredential, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
const user = auth.currentUser;
const credential = signInWithEmailAndPassword(auth, user.email, this.oldPassword);
reauthenticateWithCredential(user, credential).then(() => {
// User re-authenticated.
console.log(credential)
}).catch((error) => {
console.log(error)
});
can anyone point out where the error is?

Maybe still not quite right, but give this a try :
import {
getAuth,
reauthenticateWithCredential,
EmailAuthProvider,
} from "firebase/auth";
const auth = getAuth();
const user = auth.currentUser;
try {
const credential = EmailAuthProvider.credential(
user.email,
this.oldPassword
);
reauthenticateWithCredential(user, credential).then(() => {
// User re-authenticated.
// Code...
});
} catch (error) {
console.log(error.message);
}

Firebase v9 auth.currentUser is null after creating the user

Here's my JS code:
import { ref } from "vue"
import { projectAuth } from '../firebase/config'
import { getAuth, createUserWithEmailAndPassword, updateProfile } from 'firebase/auth'
const error = ref(null)
const isPending = ref(false)
const signup = async(email, password, displayName) => {
error.value = null
isPending.value = true
try {
const res = createUserWithEmailAndPassword(projectAuth, email, password)
console.log(projectAuth.currentUser)
if (!res) {
console.log('Could not complete the signup')
throw new Error('Could not complete the signup')
}
console.log(projectAuth.currentUser)
await updateProfile(projectAuth.currentUser, {displayName})
error.value = null
isPending.value = false
return res
} catch(err) {
console.log('ERROR: ' + err.message)
error.value = err.message
isPending.value = false
}
}
const useSignup = () => {
return {error, signup, isPending}
}
export default useSignup
My Vue3 application is calling the signup function in this script whenever a user is signing up. The createUserWithEmailAndPassword function is successful and the user shows up in firebase. But I want to also add a display name to my user, so I'm trying to use the updateProfile function to do that but there's a problem.
The problem is the projectAuth.currentUser is null even after creating the user and I can't figure out why??

The createUserWithEmailAndPassword() method returns a promise. Since your function is async, try adding await:
const res = await createUserWithEmailAndPassword(projectAuth, email, password)
console.log(projectAuth.currentUser)
Alternatively, you can pass User object to updateProfile directly from res:
const { user } = await createUserWithEmailAndPassword(projectAuth, email, password)
await updateProfile(user, { displayName })