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 :*