register 페이지 만드는 법이랑 비슷하다.

사용되는 기능 - 입력 부분

• 이메일
• 비밀번호
• 전송버튼

로그인하기 - signInWithEmailAndPassword로 로그인

코드

import React,{useState} from 'react'
import { Link } from 'react-router-dom'
import {useForm} from 'react-hook-form'
import firebase from 'firebase/compat/app';  // eslint-disable-line no-unused-vars
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "../../firebase";
import { updateProfile } from "firebase/auth";
//realtime database
import { getDatabase, ref, set } from "firebase/database";
const db = getDatabase();

function LoginPage() {

  const { register, handleSubmit,formState: { errors } } = useForm({mode:"onChange"});
  const {errorFromSubmit,setErrorFromSubmit} = useState("")
  const [loading,setLoading] = useState(false)
  
  const onSubmit = async (data) => {
      try{
        setLoading(true);

        await firebase.auth().signInWithEmailAndPassword(data.email,data.password);

        setLoading(false);
      }catch(error){
        setErrorFromSubmit(error.message)
        setLoading(false);
        setTimeout(()=>{
          setErrorFromSubmit("");
        },5000)
      }
  }

  return (
    <div className='auth-wrapper'> 
        <div style={{textAlign : 'center'}}>
          <h3>Login</h3>
        </div>  
        
        <form onSubmit={handleSubmit(onSubmit)}>
          
          <label>Email</label>
          <input
              name="email" 
              type="email"  
              {...register("email", { required: true,pattern:/^\\S+@\\S+$/i})}/>
              {errors.email && <p>This field is required</p>}
          
          <label>Password</label>
          <input
              name="password"
              type="password"
              {...register("password",{ required: true,minLength:6})}/>
              {errors.password && errors.password.type === "required" 
                && <p>This password field is required</p>}
              {errors.password && errors.password.type === "minLength" 
                && <p>Password must have at least 6 characters</p>}
          
              {errorFromSubmit&&
              <p>{errorFromSubmit}</p>
              }
          
          <input type="submit" value={"submit"} disabled={loading}/>
        <Link style={{color:"gray",textDecoration:'none'}} to="/register">아직 아이디가 없다면...</Link>
        </form>
    </div>
  )
}

export default LoginPage