Twitter React js Project

SignUp.js code

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './Login.css';
import twitterIcon from '../../assets/images/logo.png';
import auth from '../../firebase.init';
import {useCreateUserWithEmailAndPassword, useSignInWithGoogle} from 'react-firebase-hooks/auth';
import GoogleIcon from '@mui/icons-material/Google';
import AppleIcon from '@mui/icons-material/Apple';
import FacebookIcon from '@mui/icons-material/Facebook';

function Signup() {

    const [username, setUsername] = useState('');
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    // useNavigate function to navigate users to the homepage after succesfull login or sign in
    const navigate = useNavigate();


    const [
      createUserWithEmailAndPassword,
      user,
      loading,
      error,
    ] = useCreateUserWithEmailAndPassword(auth);


    const [signInWithGoogle, googleUser, googleLoading, gooleError] = useSignInWithGoogle(auth);
    const handleGoogleSignIn = () => {
      signInWithGoogle();
    }

    
    if(user || googleUser) {
      navigate('/');
      console.log(user);
      console.log(googleUser);
    }
    if(error) {
      console.log(error.message);
    }
    if(loading) {
      console.log('Loading...');
    }

    const handleSubmit = e => {
      e.preventDefault();
      console.log(email,password);
      createUserWithEmailAndPassword(email, password);
    }


  return (
    <div className='signup-container'>
                <div className='img-container'>
                  <img src={twitterIcon} alt="twitterIcon" />
                </div>

                <div className="form-container">
                  <div className="form-heading">
                    <h1 className='title'>Happening now</h1>
                    <h3 className='subTitle'>Join today.</h3>
                  </div>

                  {/* Login Form */}
                  <form action="#" className="form-container" onSubmit={handleSubmit}>

                    <input 
                    type="text" 
                    className='username formInput'
                    placeholder='@username'
                    required
                    onChange={(e) => setUsername(e.target.value)}/>

                    <input 
                    type="text" 
                    className='name formInput'
                    placeholder='Enter your full name'
                    required
                    onChange={(e) => setName(e.target.value)}/>

                    <input 
                    type="email" 
                    className='email formInput'
                    placeholder='Enter your email'
                    required
                    onChange={(e) => setEmail(e.target.value)}/>

                    <input 
                    type="password" 
                    className='password formInput'
                    placeholder='Enter password'
                    required
                    onChange={(e) => setPassword(e.target.value)}/>

                    <div className="login-btn">
                      <button type='submit' className='btn signupBtn'>Sign Up</button>
                    </div>
                  </form>

                  <div className="hr-div">
                    <hr className='form-hr' />
                    Or
                    <hr className='form-hr' />
                  </div>

                  <div className="social-btn">
                    <GoogleIcon
                      className='s-btn'
                      onClick={handleGoogleSignIn}
                    />

                    <AppleIcon 
                      className='s-btn'
                      onClick={() => { console.log('Google button clicked') }}
                    />
                    <FacebookIcon 
                      className='s-btn'
                      onClick={() => { console.log('Google button clicked') }}
                    />
                  </div>

                  <div className="ac-exist">
                    <p>Already have an account </p>
                    <Link to="/login">Login</Link>
                  </div>
                </div>
            </div>
  )
}

export default Signup;

Login.js Page

    import React, { useState } from 'react';
    import { Link, useNavigate, Navigate } from 'react-router-dom';
    import './Login.css';
    import twitterIcon from '../../assets/images/logo.png';
    import auth from '../../firebase.init';
    import {useSignInWithEmailAndPassword, useSignInWithGoogle} from 'react-firebase-hooks/auth';
    import GoogleIcon from '@mui/icons-material/Google';
    import AppleIcon from '@mui/icons-material/Apple';
    import FacebookIcon from '@mui/icons-material/Facebook';

    function Login() {

      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');

      // useNavigate function to navigate users to the homepage after succesfull login or sign in
      const navigate = useNavigate();

      const [
        signInWithEmailAndPassword,
        user,
        loading,
        error,
      ] = useSignInWithEmailAndPassword(auth);


      const [
        signInWithGoogle, 
        googleUser, 
        googleLoading, 
        googleError
      ] = useSignInWithGoogle(auth);

      const handleGoogleSignIn = () => {
        signInWithGoogle();
      }


      if(user || googleUser) {
        navigate('/');
        console.log(user || googleUser);
        // console.log(googleUser);
      }

      if(error || googleError) {
        console.log(error.message);
      }
      if(loading || googleLoading) {
        console.log('Loading...');
        // return <Navigate to='/loading-page' />;
      }

      const handleSubmit = e => {
        e.preventDefault();
        signInWithEmailAndPassword(email, password);
      }
      return (
        <div>
            <div className='login-container'>
                <div className='img-container'>
                  <img src={twitterIcon} alt="twitterIcon" />
                </div>

                <div className="form-container">
                  <div className="form-heading">
                    <h1 className='title'>Welcome Back</h1>
                    <h3 className='subTitle'>Login</h3>
                  </div>

                  {/* Login Form */}
                  <form action="#" className="form-container" onSubmit={handleSubmit}>
                    <input 
                    type="email" 
                    className='email formInput'
                    placeholder='Enter your email'
                    onChange={(e) => setEmail(e.target.value)}/>

                    <input 
                    type="password" 
                    className='password formInput'
                    placeholder='Enter password'
                    onChange={(e) => setPassword(e.target.value)}/>

                    <div className="login-btn">
                      <button type='submit' className='loginBtn'>Login</button>
                    </div>

                  </form>

                  <div className="hr-div">
                    <hr className='form-hr' />
                    Or
                    <hr className='form-hr' />
                  </div>

                  <div className="social-btn">
                    <GoogleIcon
                      className='s-btn'
                      onClick={handleGoogleSignIn}
                    />

                    <AppleIcon 
                      className='s-btn'
                      onClick={() => { console.log('Google button clicked') }}
                    />
                    <FacebookIcon 
                      className='s-btn'
                      onClick={() => { console.log('Google button clicked') }}
                    />
                  </div>

                  <div className="ac-exist">
                    <p>Don't have an account </p>
                    <Link to="/signup">Sign up</Link>
                  </div>

                </div>
            </div>
        </div>
      )
    }
    
    export default Login

PROTECTED ROUTE CODE :

import React from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import auth from '../firebase.init';
import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({children}) => {
    const {user, isLoading} = useAuthState(auth);

    if(isLoading) {
        console.log('Loading...')
    }
    
    if(!user) {
        return <Navigate to='/login' />
    }
    return children;
}

export default ProtectedRoute;