I am currently following a tutorial to make a simple frontend application that uses Firebase for authentication purposes. My code seemed to work when I only had the logic for registering a new user, however, something went amiss when I added the logic for a user trying to login. Every time I simply click into the Email box for logging in, my app freezes.
Here is the display of my application (ignore blue line):
Here is the code for App.js:
import { useState } from 'react';
import './App.css';
import { createUserWithEmailAndPassword,
onAuthStateChanged,
signInWithEmailAndPassword,
signOut } from 'firebase/auth';
import { auth } from './firebase-config'
function App() {
const [registerEmail, setRegisterEmail] = useState('')
const [registerPassword, setRegisterPassword] = useState('')
const [user, setUser] = useState({});
const [loginEmail, setLoginEmail] = useState('')
const [loginPassword, setLoginPassword] = useState('')
onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser)
}, [])
const register = async() => {
try {
const user = await createUserWithEmailAndPassword(auth, registerEmail, registerPassword);
console.log(user)
} catch (err) {
console.log(err.message)
}
};
const login = async() => {
try {
const user = await signInWithEmailAndPassword(auth, loginEmail, loginPassword);
console.log(user)
} catch (err) {
console.log(err.message)
}
};
const logout = async() => {
await signOut(auth);
};
return (
<div className="App">
<div>
<h3> Register User </h3>
<input placeholder='Email...' onChange={(e) => setRegisterEmail(e.target.value)}/>
<input placeholder='Password...' onChange={(e) => setRegisterPassword(e.target.value)}/>
<button onClick={register}> Create User</button>
</div>
<div>
<h3> Login </h3>
<input placeholder='Email...' onChange={(e) => setLoginEmail(e.target.value)}/>
<input placeholder='Password...' onChange={(e) => setLoginPassword(e.target.value)}/>
<button onClick={login}> Login</button>
</div>
<h4> User Logged In: </h4>
{user?.email}
<button onClick={logout}> Sign Out </button>
</div>
);
}
export default App;
Finally, here is the code for the firebase.config.js file:
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: "AIzaSyANfrqNmIbJLZlN-j6oOrjL8ZRv-YYM10M",
authDomain: "authentication-tutorial-3259a.firebaseapp.com",
projectId: "authentication-tutorial-3259a",
storageBucket: "authentication-tutorial-3259a.appspot.com",
messagingSenderId: "145171676516",
appId: "1:145171676516:web:044dfc2fc86abbb1d74e71"
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
CodePudding user response:
You need to add values to both your inputs. The value is not changing, hence you get the feeling of you app getting stuck.
For signup inputs
<input value={registerEmail} placeholder='Email...' onChange={(e) => setRegisterEmail(e.target.value)}/>
<input value={registerPassword} placeholder='Password...' onChange={(e) => setRegisterPassword(e.target.value)}/>
For login inputs
<input value={loginEmail} placeholder='Email...' onChange={(e) => setLoginEmail(e.target.value)}/>
<input value={loginPassword} placeholder='Password...' onChange={(e) => setLoginPassword(e.target.value)}/>