I'm having a lot of issues after signing up for Firebase auth with my email and password. When I use that method,

Question

My navigation bar no longer works.and my web application crashes. This is the signup form code. I'm taking the user name, email address, and password here. When I click the signup button, it takes me to my profile page, but when I try to return to the home page, it crashes. After a few minutes, I was stuck with the page not responding. Could you please tell me what I'm doing wrong?

import React, { useState } from "react";
import Label from "../../Form/Label"
import Input from "../../Form/input"
import Form from "../../Form/Form";
import { auth, } from "../../../../FireBase/Firebase"
import { createUserWithEmailAndPassword, onAuthStateChanged, GoogleAuthProvider } from "firebase/auth"

import { useNavigate } from "react-router";
import LoginOption from "../../MainPage/LoginOption/LoginOption";
const SignupForm = () => {
    const [isDisply, setDisplay] = useState(false)
    const [isEmail, setEmail] = useState(false)
    const [isPassword, setPassword] = useState(false)
    const [isName, setName] = useState(false)
    const Navigate = useNavigate();
    const newUser = {
        Name: '',
        Email: '',
        Password: ''
    };
    const CreateNewUser = () => {
        createUserWithEmailAndPassword(auth, newUser.Email, newUser.Password)
            .then((userCredential) => {
                const user = userCredential.user;
                console.log(user)
                Navigate("/user")
            }).catch((error) => {
                console.log(error)
                const errorM = error.massage
                setEmail(true)
            })
    }

    const changeHandler = (event) => {
        event.preventDefault()

        const password = event.target[2].value
        const rpassword = event.target[3].value
        // console.log(password, rpassword)
        if (password === rpassword) {
            newUser.Name = event.target[0].value
            newUser.Email = event.target[1].value
            newUser.Password = password
            CreateNewUser()
        }
        else {
            // console.log("PassWord Wrong")
            setDisplay(!isDisply)
        }
    }
    const OnChangeInput = (e) => {
        e.preventDefault()
        const { value, name } = e.target
        switch (name) {
            case "fullName":
                if (value === "") {
                    setName(true)
                }
                else {
                    setName(false)
                }
                break;
            case "email":
                if (value === "") {
                    setEmail(true)
                }
                else {
                    setEmail(false)
                }
                break;
            default:
                console.log("Wrong")
                break;
        }
    }
    // onAuthStateChanged(auth, (user) => {
    //     console.log(user)
    // })
    // console.log(isUser)

    return (
        <Form submit={changeHandler}>
            <div className="lable-text">
                <Label for="fullName" name=" Name" />
                <Input type="text" name="fullName" placeholder="Enter your Name" onChange={OnChangeInput} />
                <div className="animated bounce" style={{ display: isName ? "block" : "none" }}>
                    <span className="passwordNotMatch " >Please Enter your Name </span>
                </div>
                <Label for="email" name=" Email" />
                <Input type="email" name="email" placeholder="Enter your Email" onChange={OnChangeInput} />
                <div className="animated bounce" style={{ display: isEmail ? "block" : "none" }}>
                    <span className="passwordNotMatch " >Please Enter valid email Address </span>
                </div>
                <Label for="cPassword" name=" Create New Password" />
                <Input type="password" name="cPassword" placeholder="Enter your paaword" />
                <div className="animated bounce" style={{ display: isDisply ? "block" : "none" }}>
                    <span className="passwordNotMatch " >Password does not match </span>
                </div>
                <Label for="tPassword" name=" Type again  password" />
                <Input type="password" name="tPassword" placeholder="Password" />
            </div>
            <div className="d-flex justify-content-center">
                <button className="btn btn-primary" type="submit"> Sign Up</button>
            </div>
            <LoginOption />
        </Form>
    )

}



export default SignupForm

I'm attempting to change the navigation bar so that if the user signs in, the navigation options should be Home, Signup, and Account, but if the user does not sign in, the navigation options are only Home, Signup, and Login.

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import { NavLink } from 'react-router-dom';
import { auth } from "../../../FireBase/Firebase"
import { useState } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
const NavList = (props) => {

    let [user, setUser] = useState(false)
    const ChangeAuthHandler = () => {
        onAuthStateChanged(auth, (user) => {
            const uid = user.uid
            if (uid) {
                setUser(!user)
            }
            else {
                setUser(false)
            }
        })
    }
    ChangeAuthHandler()
    if (user === false) {

        return (

            <ul className="navbar-nav  justify-content-center text-center  ">
                <li className="nav-item NavLink  m-1 bg-light">
                    <NavLink className="nav-link active fw-bold m-1 text-primary " to="user">Home</NavLink>
                </li>
                <li className="nav-item NavLink  m-1 bg-light">
                    <NavLink className="nav-link fw-bold m-1 text-primary" to="user/signup">Sign Up</NavLink>
                </li>
                <li className="nav-item NavLink text-primary m-1 bg-light">
                    <NavLink className="nav-link fw-bold m-1 text-primary" to="user/login">Sign In</NavLink>
                </li>
            </ul>
        )
    }
    else {
        return (

            <ul className="navbar-nav  justify-content-center text-center  ">
                <li className="nav-item NavLink  m-1 bg-light">
                    <NavLink className="nav-link active fw-bold m-1 text-primary " to="/user">Home</NavLink>
                </li>
                <li className="nav-item NavLink  m-1 bg-light">
                    <NavLink className="nav-link fw-bold m-1 text-primary" onClick={props.click}>Sign out</NavLink>
                </li>
                <li className="nav-item NavLink text-primary m-1 bg-light">
                    <NavLink className="nav-link fw-bold m-1 text-primary" to="/user/profile">Account</NavLink>
                </li>
            </ul>
        )
    }

}
export default NavList

When my project was small, this did not happen, but now that it is larger and has more pages, when users log in, my website becomes stuck and does not respond. I want it to work as smoothly as it did before logging in. Please assist me; I've been trying to fix it for a week now.

Answer 1

User createContext hook everything will be fine.

 import React, { createContext, useEffect, useState, useContext } from "react"; import { auth } from "../FireBase/Firebase" import { createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword } from "firebase/auth"; const AuthContext = createContext() export function useAuth() { return useContext(AuthContext) } export function AuthProvider({ children }) { const [currentUser, setCurrentUser] = useState() const [isLoading, setLoading] = useState(true) function signup(email, paaword) { return createUserWithEmailAndPassword(auth, email, paaword) } function login(email, password) { return signInWithEmailAndPassword(auth, email, password) } useEffect(() => { const unsubscriber = auth.onAuthStateChanged(user => { setCurrentUser(user) setLoading(false) }) return unsubscriber }, []) const value = { currentUser, signup } return ( <AuthContext.Provider value={value}> {.isLoading && children} </AuthContext.Provider> ) }