firebase createUser

export default function CreateAccount(){
    const [isLoading, setLoading]=useState(false);
    const [name, setName]=useState("");
    const [email, setEmail]=useState("");
    const [password, setPassword]=useState("");
    const [error, setError]=useState("");
    const navigate=useNavigate();
    const onChange = (e: React.ChangeEvent<HTMLInputElement>)=>{
        const{target:{name, value}}=e;
        if(name === "name"){
            setName(value)
        }
        else if(name==="email"){
            setEmail(value)
        }
        else if(name==="password"){
            setPassword(value)
        }
    }
    const onSubmit=async (e:React.FormEvent<HTMLFormElement>)=>{
        e.preventDefault();
        if(isLoading || name===""|| email===""||password==="") return;//*
        try{
            //1. 계정 생성
            const credentials=await createUserWithEmailAndPassword(auth,email,password);
            console.log(credentials.user);
            //2. 사용자의 프로필 이름을 설정
            await updateProfile(credentials.user,{
                displayName:name
            })
            //3. 홈페이지로 리다이렉트
            navigate("/");
        }catch(e){
            //에러 잡기
            console.log(e);
            if(e instanceof FirebaseError){
                setError(e.message)
            }
        }
        finally{
            setLoading(true);
        }
    }
    return (
        <Wrapper>
            <Title>Log into X</Title>
            <Form onSubmit={onSubmit}>
                <Input onChange={onChange} name="name" value={name} placeholder="Name" type="text" required/>
                <Input onChange={onChange} name="email" value={email} placeholder="Email" type="email" required/>
                <Input onChange={onChange} name="password" value={password} placeholder="Password" type="password" required/>
                <Input type="submit" value={isLoading ? "Loading...":"Create Account"} />
            </Form>
            {error !== ""?<Error>{error}</Error>:null}
            <Switcher>
                Already have an account?<Link to="/login">Log in &rarr;</Link>
            </Switcher>
        </Wrapper>
    )
}

 

input으로 입력값을 받을 때마다 상태를 변경해주지 말고!

input 창에 name과 value를 넣어주고

(e: React.ChangeEvent<HTMLInputElement>) 를 이용해서 해당 value들을 상태에 변경 시키자

 

onSubmit 함수 

• 계정 생성에 충족하지 못할 상황이 있다면 바로 Return

1. firebase/auth 의 createUserWithEmailAndPassword 사용, 처음엔 auth(firebase.tsx에 있는 auth)을 넣어주고 현재 알수 있는 값인 Email, password를 넣어주고 계정 생성 결과 값을 credentials 넣어줌
2. firebase/auth 의 updateProfile 사용 credentials의 user에 displayName을 name으로 설정
3. react hook 인 useNavigate를 이용해 홈페이지로 리다이렉트

createUserWithEmailAndPassword 의 특성상 계정이 생성되면 해당 사용자가 자동으로 로그인 됨

 

error handling

error가 나타나면 e.message를 error 상태를 변경

form아래에 error을 보여준다.

이미 계정이 있다면 login 창으로 넘어갈 수 있는 링크를 걸어준다.