firebaseRegister.js

    0

    0

    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;
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.