I have the following setup to connect to firebase but for some reason in the browser console it shows that auth.createUserWithEmailAndPassword() is not a function. Is there something wrong with my code? this is login.js
import React, { useState } from 'react';
import './Login.css'
import { Link, useNavigate } from "react-router-dom";
import { auth } from "firebase/auth";
function Login() {
const navigate = useNavigate();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const signIn = e => {
e.preventDefault();
//some fancy firebase
}
const register = e => {
e.preventDefault();
auth
.createUserWithEmailAndPassword(email, password)
.then((auth) => {
// it successfully created a new user with email and password
if (auth) {
navigate.push('/')
}
})
.catch(error => alert(error.message))
}
return (
<div className='login'>
<Link to='/'>
<img
className="login__logo"
src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1024px-Amazon_logo.svg.png' alt=" "
/>
</Link>
<div className='login__container'>
<h1>Sign-in</h1>
<form>
<h5>E-mail</h5>
<input type='text' value={email} onChange={e => setEmail(e.target.value)} />
<h5>Password</h5>
<input type='password' value={password} onChange={e => setPassword(e.target.value)} />
<button type='submit' onClick={signIn} className='login__signInButton'>Sign In</button>
</form>
<p>
By signing-in you agree to the AMAZON FAKE CLONE Conditions of Use & Sale. Please
see our Privacy Notice, our Cookies Notice and our Interest-Based Ads Notice.
</p>
<button onClick={register} className='login__registerButton'>Create your Amazon Account</button>
</div>
</div>
)
}
export default Login
Also I will post my firebase.js here
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: "Not mentioning my firbase config in and below",
authDomain: "c",
projected: " ",
storageBucket: " ",
messagingSenderId: " ",
appId: " ",
measurementId: " "
};
// const firebaseApp = firebase.initializeApp(firebaseConfig);
const firebaseApp = initializeApp(firebaseConfig);
// const db = firebaseApp.firestore();
const db = getFirestore(firebaseApp);
//const auth = getAuth(app);
//const auth = firebase.auth();
const auth = getAuth(firebaseApp);
export { db, auth };
I removed auth. from auth.createUserWithEmailAndPassword(email, password).then(cred => { console.log(cred); and now it is giving me the current error in console of browser as inspect:
Uncaught (in promise) TypeError: Cannot create property '_canInitEmulator' on string '[email protected]
Tried all solutions that were previously here in stack overflow but none worked also read through some docs of new firebase v.9.0 modules but nothing understood yet. I would appreciate some great help for this authorization of firebase with react js.
CodePudding user response:
The createUserWithEmailAndPassword()
is a top level function in the new Firebase Modular SDK. Try importing the function as shown below:
import { createUserWithEmailAndPassword } from "firebase/auth"
import { auth } from "../firebase.js"; // update path
const register = (e) => {
e.preventDefault();
// auth instance as first param
createUserWithEmailAndPassword(auth, email, password).then((auth) => {
// it successfully created a new user with email and password
if (auth) {
navigate.push('/')
}
})
.catch(error => alert(error.message))
}
You must import auth
instance that is getAuth()
exported from Firebase file and not from "firebase/auth"
SDK. The first param in createUserWithEmailAndPassword()
should be this auth instance but you only have email
and password
params right now.