728x90
반응형
Loading이 Ture면 아직 프로세스 처리중이라는 뜻이 되기 때문에 함수를 일찍 종료하고,
name, email, password 중 하나라도 비어있으면 안되니까 일찍 종료하는 조건을 걸어줍니다.
이메일과 비밀번호를 사용한 계정생성 함수는 이미 있으니 가져다 써주고,
await는 async function 안에서만 사용이 가능하기 때문에 아래와 같이 수정해줍니다.
createUserWithEmailAndPassword 는 성공시 credential을 반환하니 const credentials 로 넣어줍니다.
const credentials = await createUserWithEmailAndPassword(auth, email, password);
계정 생성과 동시에 사용자의 이름을 저장하기위해 updateProfile을 사용합니다.
이제 유저가 계정생성에 성공했다면 홈페이지로 리다이렉션 시켜야합니다.
이를 위해 react-router-dom의 useNavigate라는 훅을 사용할겁니다.
const navigate = useNavigate();
위 코드를 추가해주고 updateProfile 이후에 홈페이지로 갈 수 있게 바로 밑 줄에
navigate("/");
를 추가해줍니다. 또한 setLoading은 ture가 되어야하기 때문에 블럭 상단에 setLoading(true);를 적용해줍니다.
이제 결과를 확인하기위해 계정생성을 해보면
계정 생성 후 홈페이지로 이동된것을 확인할 수 있습니다.
계정생성이 완료되면 로그인된 상태로 홈페이지로 리다이렉트 됩니다.
firebase 홈페이지로 가서 Authentication의 사용자탭을 눌러보면,
계정이 등록된것을 확인할 수 있습니다.
728x90
반응형
'Front-end > twitter_clone' 카테고리의 다른 글
[트위터 클론코딩 챌랜지] error 표시와 로그인 화면 구성_10 (0) | 2024.04.02 |
---|---|
[트위터 클론코딩 챌랜지] 로그아웃_09 (0) | 2024.04.02 |
[트위터 클론코딩 챌랜지] 계정 생성 및 간단한css_07 (0) | 2024.04.02 |
[트위터 클론코딩 챌랜지] Firebase와 Loading page_06 (0) | 2024.04.02 |
[트위터 클론코딩 챌랜지] Routes & Global style_05 (0) | 2024.03.31 |