I use the Firebase 10.13.0 version in my React 18.3.1 and Vite app. I am implementing a reset password. Below is my Reset Password modal which comes after the verification code because I am implementing code base verification and mail using mailjs which is working fine when I am very code for my rest password it comes to the ResetPassword component which is the modal. Everything is working fine, but the problem is that I am logged out and my updatePassword function is not working with bot auth.currentuser(come when login) and user from the snapshot of Firebase Firestore my password is not updating. Please look in the handleResetPassword function I am updating to a way by auth.currentUser which is null because I am logged out and the second is a snapshot from user collection from the Firebase Firestore user is coming but when I pass the user to updatePassword I get TypeError: user.getIdToken is not a Function this error because I am not logged in. How to reset passwords and how to solve this problem. Please help me to resolve this query.
import { IoIosArrowRoundBack } from "react-icons/io";
import Button from "../Button";
import Input from "../Input";
import useAuthModalStore from "../../stores/authModalStore";
import toast from "react-hot-toast";
import * as Yup from "yup";
import { Formik } from "formik";
import { updatePassword } from "firebase/auth";
import { auth, db } from "../../firebase";
import { doc, getDoc } from "firebase/firestore";
const validationSchema = Yup.object().shape({
password: Yup.string()
.min(8, "Password must be at least 8 characters long")
.required("Password is required")
.matches(
/(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}/,
"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character"
),
confirmPassword: Yup.string()
.required("Please confirm your password")
.oneOf([Yup.ref("password")], "Passwords must match"),
});
const initialValues = {
password: "",
confirmPassword: "",
};
const ResetPassword = () => {
const { resetModalType, closeModal, data } = useAuthModalStore();
const userRef = doc(db, "users", data.id);
const handleResetPassword = async (values) => {
// const user = auth.currentUser
const snapshot = await getDoc(userRef);
const user = snapshot.data()
if(user.authProvider !== "email") {
toast.error("Reset password is only available for email-based authentication");
return;
}
try {
updatePassword(user, values.password);
closeModal();
resetModalType();
toast.success("Password reset successfully");
// eslint-disable-next-line no-unused-vars
} catch (error) {
toast.error("An error occurred while resetting your password");
}
};
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleResetPassword}
>
{({ handleSubmit, values, errors, handleChange, isSubmitting }) => (
<form onSubmit={handleSubmit} className="space-y-4">
<Input
type="password"
label="Password"
id="password"
name="password"
value={values.password}
onChange={handleChange}
error={errors.password}
/>
<Input
type="password"
label="Confirm Password"
id="confirmPassword"
name="confirmPassword"
value={values.confirmPassword}
onChange={handleChange}
error={errors.confirmPassword}
/>
<Button
width="100%"
type="submit"
label="Reset password"
onClick={() => {}}
disabled={isSubmitting}
loading={isSubmitting}
/>
<p
onClick={resetModalType}
className="text-center text-sm font-medium flex items-center justify-center gap-1 cursor-pointer"
>
<IoIosArrowRoundBack size={22} />
Back to Login
</p>
</form>
)}
</Formik>
);
};
export default ResetPassword;