react login and sign up pages with auth using firebase - reactjs

Question

I am building Login and Signup pages using react and auth by using firebase.
The problem is that after successful login and signup, the application is NOT navigating the user to landing page.
I think there is something wrong with my handleLogin and handleSignup methods but, I'm to pinpoint it out.
To Login: use -> email: test#gmail.com and password: 123456
Also, there are no errors in the console and I get 200 response from firebase.
This is firebase.config.js
import firebase from "firebase";
var firebaseConfig = {
apiKey: "MY_KEY",
authDomain: "login-and-push-notification.firebaseapp.com",
projectId: "login-and-push-notification",
storageBucket: "login-and-push-notification.appspot.com",
messagingSenderId: "84083076850",
appId: "1:84083076850:web:3e9febc1341d8f7b036a6b",
};
// Initialize Firebase
const fb = firebase.initializeApp(firebaseConfig);
export default FB;
This is Login.js
const Login = (props) => {
const [user, setUser] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [emailError, setEmailError] = useState("");
const [passwordError, setPasswordError] = useState("");
const [hasAccount, setHasAccount] = useState(false);
const clearInputs = () => {
setEmail("");
setPassword("");
};
const clearErrors = () => {
setEmailError("");
setPasswordError("");
};
const handleLogin = () => {
clearErrors();
fb.auth()
.signInWithEmailAndPassword(email, password)
.then((user) => {
console.log("user", user);
props.navigation.push("/Landing");
})
.catch((error) => {
switch (error.code) {
case "auth/invalid-email":
case "auth/user-disabled":
case "auth/user-not-found":
setEmailError(error.message);
break;
case "auth/wrong-password":
setPasswordError(error.message);
break;
}
});
};
const handleSignup = () => {
clearErrors();
fb.auth()
.createUserWithEmailAndPassword(email, password)
.catch((error) => {
switch (error.code) {
case "auth/email-already-in-use":
case "auth/invalid-email":
setEmailError(error.message);
break;
case "auth/weak-password":
setPasswordError(error.message);
break;
}
});
};
const authListener = () => {
fb.auth().onAuthStateChanged((user) => {
if (user) {
clearInputs();
setUser(user);
} else {
setUser("");
}
});
};
useEffect(() => {
authListener();
}, []);
return (
<div className="login">
<div className="loginContainer">
<label>Username</label>
<input
type="text"
value={email}
autoFocus
required
onChange={(e) => setEmail(e.target.value)}
/>
<p className="errorMsg">{emailError}</p>
<label>Password</label>
<input
type="password"
value={password}
required
onChange={(e) => setPassword(e.target.value)}
/>
<p className="errorMsg">{passwordError}</p>
<div className="btnContainer">
{hasAccount ? (
<span>
<button onClick={handleLogin} type="submit">
Sign In
</button>
<p>
Don't have an account?
<span onClick={() => setHasAccount(!hasAccount)}>Sign up</span>
</p>
</span>
) : (
<>
<button onClick={handleSignup} type="submit">
Sign Up
</button>
<p>
Have an account?
<span onClick={() => setHasAccount(!hasAccount)}>Sign in</span>
</p>
</>
)}
</div>
</div>
</div>
);
};
And then I'm importing the Login component into the Home component and passing props.
import React from "react";
import Login from "../components/Login";
import Landing from "../Pages/Landing";
function Home(props) {
return (
<div>{props.user ? <Landing {...props} /> : <Login {...props} />}</div>
);
}
export default Home;

Answer 1

Your authListener() in Login.js is setting a state variable in the Login component, but it does not communicate the change of state back to the rest of the application.
One way to resolve this would be to move the const [user, setUser] = useState() from Login.js to Home.js, then pass setUser as a prop to <Login>. That way, when the onAuthStateChanged() gets the user object, you set it in state at the Home level.
You'd additionally change the condition statement in Home.js to be:
return (
<div>{user ? <Landing {...props} /> : <Login {...props} />}</div>
);
since user would now be a state variable in Home.js.
Once you have that working and are comfortable with it, you might consider moving all of your authentication handling into a pattern that leverages useContext(). You would create an AuthProvider component. There are several blogs on this topic, such as this one