FB 회원가입, 로그인

function Home (){
//     const[is_login,setIsLogin] =React.useState(false)
//     // auth.currentUser
//     const loginCheck = async (user)=>{
//         if(user){
//             setIsLogin(true)
//         }else{
//             setIsLogin(false)
//         }
//     }
//     React.useEffect(() => {
//     //   distpatch(loadBucketFB());
//       onAuthStateChanged(auth,loginCheck)
//     }, []);
//     return(
//         <div>
//             <Routes>
//             <Route path="/signup" element={<Signup/>}/>
//             {is_login?( <Route path="/" element={<App/>}/>):(<Route path="/login" element={<Login/>}/>)}
            
//             </Routes>
//         </div>
//     )
// }
// export default Home

import React from 'react'
import {auth, db} from "./firebase"
import {createUserWithEmailAndPassword,signInWithEmailAndPassword,onAuthStateChanged} from 'firebase/auth'
import {useNavigate} from "react-router-dom"
import {collection,addDoc,getDoc,where,query} from "firebase/firestore"
import {Route, Routes} from "react-router-dom"
function Login (){
    const navigate =useNavigate()
    const id_ref = React.useRef(null)
    const pass_ref =React.useRef(null)

    const loginFB = async ()=>{
        const user = await signInWithEmailAndPassword(
            auth,
            id_ref.current.value,
            pass_ref.current.value
        )
        const bucket = []
        const checkid = async ()=>{
          const user_doc = await getDoc(query(
            collection(db,"users"),where('user_id','==',user.user.email)
        ))
          user_doc.forEach((x)=>{bucket.push(x.data().bucketlist)})
        }
    }    
    
    return(

        <div>
        아이디(이메일): <input ref={id_ref}/><br/>
        비밀번호 : <input ref={pass_ref}/><br/>
        <button onClick={loginFB}>로그인</button>
        <button onClick={()=>{navigate("/signup")}}>회원가입하러가기</button>
        </div>

    )
}

export default Login

import React from 'react'
import {auth, db} from "./firebase"
import {createUserWithEmailAndPassword,signInWithEmailAndPassword,onAuthStateChanged} from 'firebase/auth'
import {useNavigate} from 'react-router-dom'
import {collection,addDoc,getDoc,where,query} from "firebase/firestore"
import {Route, Routes} from "react-router-dom"
function Signup () {
    const id_ref = React.useRef(null)
    const name_ref =React.useRef(null)
    const pass_ref =React.useRef(null)
    const pass2_ref =React.useRef(null)
    const navigate =useNavigate()
    const signupFB = async ()=>{
        // if(id_ref.current.value === ""){
        //     window.alert("아이디를 입력해주세요")
        //     return false;
        // }else if(name_ref.current.value === ""){
        //     window.alert("이름을 입력해주세요")
        //     return false;
        // }else if(pass_ref.current.value=== ""){
        //     window.alert("비밀번호를 입력해주세요")
        //     return false;
        // }else if(pass2_ref.current.value === ""){
        //     window.alert("비밀번호 확인을 입력해주세요")
        //     return false;
        // }else if (pass_ref.current.value !== pass2_ref.current.value){
        //     window.alert("비밀번호가 일치하지 않습니다")
        //     return false;
        // }else{return
           const user =  await createUserWithEmailAndPassword(
                auth,
                "go@na",
                "1234"
                )
            console.log(user)
             await addDoc(collection(db,"users"),{user_id:id_ref.current.value ,user_name:name_ref.current.value,bucketlist:[]})
            // window.alert("회원가입 완료!")    
            // navigate("/login")

            
    }
    return(
        <div>
            아이디(이메일): <input ref={id_ref}/><br/>
            이름 : <input ref={name_ref}/><br/>
            비밀번호 : <input ref={pass_ref}/><br/>
            비밀번호 확인 : <input ref={pass2_ref}/><br/>
            <button onClick={signupFB}>회원가입하기</button>
        </div>

    )
}
export default Signup