I’m facing a problem for almost 2 days. I want to make a change-password page with Firebase Auth
change-password/page.tsx
"use client";
import React, { useState, useEffect } from "react";
import { auth } from "@/firebase";
import { useSession } from "next-auth/react";
import {
reauthenticateWithCredential,
EmailAuthProvider,
updatePassword,
onAuthStateChanged,
getAuth,
} from "firebase/auth";
import { User } from "next-auth";
const ChangePass = () => {
const [oldPassword, setOldPassword] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [passMatch, setPassMatch] = useState(true);
async function changePassword(currentPassword: string, newPassword: string) {
const user = auth.currentUser;
if (!user) {
throw new Error("No user logged in");
} else {
if (!passMatch) {
return console.log("Passwords don't match");
}
const credential = EmailAuthProvider.credential(
user.email!,
currentPassword
);
reauthenticateWithCredential(user, credential);
updatePassword(user, newPassword);
}
}
// Handle form submission
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
try {
await changePassword(oldPassword, password);
alert("Password changed successfully!");
} catch (error: any) {
alert(error.message);
}
};
return (
<main className="lg:w-10/12 lg:mx-auto p-8 h-[90vh] flex justify-center items-center">
<form
onSubmit={handleSubmit}
className="flex flex-col bg-white p-10 py-10 rounded-xl shadow-xl lg:items-center justify-center lg:w-fit"
>
<label className="text-lg font-normal mb-1">Current Password : </label>
<input
name="oldPassword"
type="password"
className="bg-transparent placeholder:text-gray-300 border-2 bg-white border-red-400 rounded-2xl py-0.5 px-2 w-80 outline-none"
placeholder="Enter old password"
value={oldPassword}
onChange={(e) => setOldPassword(e.target.value)}
/>
<label className="text-lg font-semibold mb-1 mt-5">Password</label>
<input
name="password"
type="password"
className="bg-transparent border-2 placeholder:text-gray-300 bg-white border-red-600 rounded-2xl py-0.5 px-2 w-80 outline-none"
placeholder="Enter new password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<label className="text-lg font-semibold mt-5 mb-1">
Confirm password
</label>
<input
name="confirmPassword"
type="password"
className="bg-transparent border-2 placeholder:text-gray-300 bg-white border-red-600 rounded-2xl py-0.5 px-2 w-80 outline-none"
placeholder="Confirm new password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
{!passMatch && (
<p className="text-xs pl-2 mt-1 text-red-400 text-left">
Passwords don't match
</p>
)}
<button
type="submit"
className="bg-gradient-to-b from-red-800 to-red-600 text-gray-100 w-fit rounded-lg mx-auto py-2 px-4 font-semibold mt-8"
disabled={!passMatch || !password || !oldPassword}
>
Change password
</button>
</form>
</main>
);
};
export default ChangePass;
I searched that i need auth.currentUser, but for some reason it is null and i can’t updatePassword
I tried to make use of onAuthStateChanged but unfortunately it didn’t help me.
What I found out about this problem is that if I log in from the /signin page and then I was redirected to / and in the main page.tsx i did
const session = await auth(); const user = authFirebase.currentUser; console.log(user);
and it showed me the user but only after i logged in, and then when i changed the link to /change-password it became null.
Session is working but currentUser no.
Any thoughts on this?
Thanks and best wishes :*