The code registers a new user with their name, email address, and password. It also uses the useState() and useAuthState() functions to set the user's name, email address, and authentication state, respectively. Finally, the useEffect() function is used to trigger a response based on the user's authentication state.
If the user is not registered, an alert box is displayed with a link to sign in. If the user is already registered, the code displays a message confirming the login.
Library: react
import "./Register.css";
registerWithEmailAndPassword,
import { useAuthState } from "react-firebase-hooks/auth";
auth,
import {
} from "./firebase";
signInWithGoogle,
import React, { useEffect, useState } from "react";
import { Link, useHistory } from "react-router-dom";
function Register() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [name, setName] = useState("");
const [user, loading, error] = useAuthState(auth);
const history = useHistory();
const register = () => {
if (!name) alert("Please enter name");
registerWithEmailAndPassword(name, email, password);
};
useEffect(() => {
if (loading) return;
if (user) history.replace("/dashboard");
}, [user, loading]);
return (
<div className="register">
<div className="register__container">
<input
type="text"
className="register__textBox"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Full Name"
/>
<input
type="text"
className="register__textBox"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="E-mail Address"
/>
<input
type="password"
className="register__textBox"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
/>
<button className="register__btn" onClick={register}>
Register
</button>
<button
className="register__btn register__google"
onClick={signInWithGoogle}
>
Register with Google
</button>
<div>
Already have an account? <Link to="/">Login</Link> now.
</div>
</div>
</div>
);
}
export default Register;