Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- React
- 리액트
- 부트캠프 #개발일지 #TIL #FlexboxFroggy #displayflex #flexbox
- 부트캠프 #개발일지 #TIL #CSS속성 #float #clear
- 템플릿스트링
- CSS
- Til
- appendChild
- 부트캠프 #CSS #개발일지 #TIL
- useState
- 부트캠프 #개발일지 #TIL #그리드 #CSS
- 부트캠프
- 부트캠프 #CSS #개발일지 #TIL #박스모델
- JS예제
- 부트캠프 #스파르타코딩클럽 #개발일지# #TIL #Javascript #confirm #location.href
- 개발일지
- 부트캠프 #개발일지 #TIL #Position #위치
- 특성선택자
- 알고리즘
- textContent
- js
- 결합선택자
- 부트캠프 #스파르타코딩클럽 #개발일지# #html
- useEffect
- 개발일지 #TIL #프론트엔드 #HTML
- 부트캠프 #코딩 #개발일지 #프론트엔드 #CSS #TIL
- ㅜㄹㄹ
- querySelector
- 깃허브오류
- 의사클래스
Archives
- Today
- Total
나의 개발일지
[React/TypeScript] 최종프로젝트 - Mango(환경오염 줄이기 / 지구 살리기 프로젝트!) (진행 중) - 파이어베이스 로그인/회원가입 본문
과제 및 팀프로젝트
[React/TypeScript] 최종프로젝트 - Mango(환경오염 줄이기 / 지구 살리기 프로젝트!) (진행 중) - 파이어베이스 로그인/회원가입
heew0n 2024. 1. 9. 20:44
최종프로젝트에서 마이페이지 쪽을 맡게되면서 또 다시 auth 쪽을 구현하게 되었다
그 대신 이번에는 파이어베이스로!
https://firebase.google.com/docs/auth/web/start?hl=ko
파이어베이스 공식문서이다.
공식문서를 보면 쉽게 따라할 수 있다
회원가입
const signUp: SubmitHandler<Data> = async ({ email, password, nickname, passworkCheck }: Data) => {
try {
const userCredential = await createUserWithEmailAndPassword(auth, email, password);
console.log('userCredential', userCredential);
const user = userCredential.user;
if (user !== null) {
await updateProfile(user, {
displayName: nickname
});
} else return;
setValue('email', '');
setValue('password', '');
setValue('nickname', '');
setValue('passworkCheck', '');
// 회원가입 state 업데이트
setIsSignUp(false);
//...코드생략
}
} catch (error) {
setErrorMsg(error);
}
};
로그인
const signIn: SubmitHandler<Data> = async (data) => {
try {
const userCredential = await signInWithEmailAndPassword(auth, data.email, data.password);
// 로그인 성공 시 role의 recoil(전역상태) update
const user = userList && userList.find((user) => user.uid === auth.currentUser?.uid);
if (user) {
setRole(user.role);
}
// home으로 이동
navigate('/');
} catch (error) {
setErrorMsg(error);
}
};
이번에도 역시나 react-hook-form을 사용하여 실시간 유효성 검사를 했다
아직 중복확인 기능은 구현하지 못했는데
어떻게 구현해야 할지 고민이다!