[트위터 클론코딩] - 파이어베이스 인증시스템 구현하기(로그인)

기본적인 셋팅까지는 저번 게시물에 다 기록을 해뒀고,

오늘은 firebase.auth를 이용해서 로그인 부분을 구현할 예정이다.

import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from 'firebase/auth';

버전 8이랑 버전 9는 import 하는 코드도 다른데, 해당 코드는 버전 9에서 사용된 코드이다.

const Auth =  () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("")
    const [newAccount, setNewAccount] = useState(false)
    const auth = getAuth();

    const onChange = (e) => {
        const {target: {name, value}} = e

        if (name === "email") {
            setEmail(value)
        } else if (name === "password") {
            setPassword(value)
        }

    }

    const onSubmit = async(e) => {
        e.preventDefault()
        try {
            let data;
            if(newAccount) {
                data = await createUserWithEmailAndPassword(auth, email, password);
            } else {
                data = await signInWithEmailAndPassword(auth, email, password);
            }
            console.log(data)
        } catch(error) {
            console.log('err',error)
        }
    }

    return (
        <div>
            <form onSubmit={onSubmit}>
                <input 
                    name="email"
                    type="email"
                    placeholder="Email" 
                    value={email} 
                    onChange={onChange}
                required/>
                <input 
                    name="password"
                    type="password" 
                    placeholder="Password" 
                    value={password} 
                    onChange={onChange}
                required/>

                <input type="submit" value={newAccount ? "Create Account" : "Log in"}/>
            </form>
            <div>
                <button>Continue with Google</button>
                <button>Continue with Github</button>
            </div>
        </div>
    )
}

export default Auth;

email과 password 변수가 바뀔 때마다 동작하는 onChange 함수와
form의 onSubmit 함수를 생성했다.

email과 password를 각각 입력한 뒤, 버튼을 누르면

이렇게 에러가 나오는데

파이어베이스 에러찾기

해당 사이트에서 에러를 찾아보면,

제공된 식별자에 해당하는 기존 사용자 레코드가 없습니다.

라고 나온다.

프로젝트 설정에서 Authentication 부분에 사용자 추가를 해준 뒤,
해당 계정으로 로그인을 하면

성공적으로 로그인이 된 것을 알 수 있다!