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
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.