Firebase Auth v9: Object(…) is not a function

I need help, i was watching tutorial for firebase and react. and then i realised the tutorial was for v8 and the newest one is v9

this is my firebase.js

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  //firebaseconfig
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const database = getDatabase(app);

export { auth, database }

and then this is my signin.js snippet code

import { auth, database } from "../Firebase/firebase";

const submitForm = async (values) => {
   
auth()
.signInWithEmailAndPassword(values.email,values.password)
.then((userCredentials) => {
        props.history.push("/profile");
      }).catch((err) => {  
        setLoading(false);
      });
  };

and then when i submit my form the application crash with error on auth().

Unhandled Rejection (TypeError): Object(...) is not a function

Answer

import { auth, database } from "../Firebase/firebase";
// this  ^^^^ is not a function but is being used as one
// auth().signInWithEmailAndPassword(values.email,values.password)
// ^^^^ here

signInWithEmailAndPassword needs to be imported from firebase/auth as shown below:

import { auth, database } from "../Firebase/firebase";
import { signInWithEmailAndPassword } from "firebase/auth"

const submitForm = async (values) => { 
  const userCredentials = await signInWithEmailAndPassword(auth, values.email, values.password)
  // Pass the 'auth' instance here                         ^^^^
  const { user: { uid } } = userCredentials
  console.log(`userId: ${uid}`)
}

I’d recommend following the documentation along with any tutorial. The documentation has both name-spaced (v8) and modular/functional (v9) syntax.