firbase.js
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
const firebaseConfig = {
// 인증정보
}
const auth =firebase.auth();
export {auth};
user.js
import {auth} from '../../shared/firebase';
const signupFB = (id, pwd, user_name) =>{
return function (dispatch, getState, {history}){
// firebase 웹 비밀번호 인증 복사
auth.createUserWithEmailAndPassword(id, pwd)
// 완료되었을 때
.then((user) => {
// 회원가입이 정상적이면 회원가입 버튼 눌렀을 때 콘솔 찍기
console.log(user)
// 유저 닉네임 업데이트 (사용자 프로필 업데이트)
// 로그인한 유저를 가져오는 방법 (firebase.auth().currentUser;)
auth.currentUser.updateProfile({
// 바꾸고 싶은 객체
displayName: user_name,
}).then(()=>{ // 성공했을 때
// 닉네임이 성공적으로 바뀌었을 때, 로그인 상태 바꾸기
dispatch(setUser({user_name: user_name, id: id, user_profile:''}));
history.push('/');
}).catch((error) =>{ // 실패했을 때
console.log(error);
});
})
// 오류 났을 때
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode, errorMessage)
});
}
}
const actionCreators = {
logOut,
getUser,
loginAction,
signupFB
}
Signup.js
const [id, setId] = React.useState('');
const [pwd, setPwd] = React.useState('');
const [pwd_check, setPwdCheck] = React.useState('');
const [user_name, setUserName] = React.useState('');
const signup = () =>{
// 아이디, 유저네임, 비밀번호 값이 없으면 return
if(id === ' ' || pwd === ' ' || user_name === ''){
return;
}
// 비밀번호와 비밀번호 확인이 다르면 return (실행 x)
if(pwd !== pwd_check){
return;
}
dispatch(userActions.signupFB(id, pwd, user_name))
}
<Input
label='아이디'
placeholder='아이디 입력'
_onChange={(e) =>{
setId(e.target.value);
}}
/>
회원가입 구현 상태
id는 이메일 형태, 패스워드는 6자리 이상으로 입력해야 정상적으로 작동
여기서 문제!
새로고침하면 리덕스에 있는 데이터가 사라지면서 헤더가 정상적으로 뜨지 않는다. 하지만 리덕스에서는 날아갔어도 쿠키에는 남아있고 firebase에도 로그인 되어 있는 상태. (가입 정보는 firebase Authentication에서 확인 가능)
-> 로그인 유지를 해줘야 함
user.js
const loginFB = (id, pwd) =>{
return function (dispatch, getState, {history}){ // history - 페이지 이동할 때 사용
// 로그인 방법 (이메일 주소와 비밀번호로 사용자 로그인 처리)
auth
.signInWithEmailAndPassword(id, pwd)
// 로그인 후 무엇을 할 것인지
.then((user) => {
console.log(user)
dispatch(
setUser({
user_name: user.user.displayName,
id: id,
user_profile:''
})
)
// 로그인 성공시 메인 페이지로 이동
history.push('/');
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode, errorMessage)
});
}
}
const actionCreators = {
logOut,
getUser,
signupFB,
loginFB
}
Login.js
// 초기값 ' ' 설정
const [id, setId] = React.useState('');
const [pwd, setPwd] = React.useState('');
// 유저가 입력한 id, pwd 받아와야함
const login = () =>{
// 빈칸 입력 방지
if(id === ''|| pwd === ''){
window.alert('아이디 혹은 비밀번호가 공란입니다.')
return;
}
dispatch(userActions.loginFB(id, pwd));
}
<Input
label = '아이디'
placeholder = '아이디를 입력해세요'
_onChange = {(e) =>{
setPwd(e.target.value);
}}
/>
<Input
label = '비밀번호'
placeholder = '비밀번호를 입력하세요'
type:'password' //비밀번호 안보이게 설정
_onChange = {(e) =>{
setId(e.target.value);
}}
/>
로그인 구현 상태
user.js
const logoutFB = () =>{
return function (dispatch, getState, {history}){
auth.signOut().then(()=>{
dispatch(logOut());
// 기존 페이지와 '/'페이지와 바꿔치기
history.replace('/');
})
}
}
const actionCreators = {
logOut,
getUser,
signupFB,
loginFB,
loginCheckFB,
logoutFB
};
Header.js
로그아웃 버튼을 누르면 is_login 값이 false로 바뀌고 세션에 저장된 정보도 사라짐
<Button
text="로그아웃"
_onClick={() => {
dispatch(userActions.logoutFB());
}}
></Button>