I am trying to implement a login feature in my React application using Firebase authentication. I am able to successfully authenticate users with their email and password, but I am unable to properly handle redirecting the user to the home page once they are logged in.
Here is my login form component:
import { useState } from 'react';
import { useFirebase } from 'react-redux-firebase';
const LoginForm = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const firebase = useFirebase();
const handleSubmit = (e) => {
e.preventDefault();
firebase.login({
email,
password
})
}
return (
<form onSubmit={handleSubmit}>
<input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
<input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" />
<button type="submit">Login</button>
</form>
)
}
export default LoginForm;
How can I handle redirecting the user to the home page after a successful login?
CodePudding user response:
If you are using React Router Dom You can use Redirect from React Router Dom onc you authenticate user. https://reactrouter.com/en/main/fetch/redirect
ie:
import { redirect } from "react-router-dom";
firebase.login({
email,
password
}).then(()=> redirect("/homeppage"));
}