[React] Google Firebase로 이메일 / 비밀번호 인증 회원가입 기능 만들기(feat. magazine사이트만들기)

회원가입 기능 구현
1. firebase.js에 만들어둔 auth 가져오기
2. 리덕스에서 signupFB 함수 만들기
3. auth.createUserWithEmailAndPassword()로 가입 시키기
4. Signup 컴포넌트에서 signupFB를 호출!
5. 가입한 후, display_name 바로 업데이트하기
6. 사용자 정보 업데이트 후에 메인 페이지로 이동하기

1. firebase에서 web app을 열고, project에서 firebase를 설치해준다.

yarn add firebase

2. firebase에서 web app을 열고, 웹 앱에 Firebase 추가를 클릭하면

내 Web app에서 사용할 apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId 등을 담은 코드를 준다.
이 코드를 복사해서 나의 project로 돌아와 share 폴더에 firebase.js를 생성해주고 내 웹과 firebase를 연결할 코드를 작성한다.

// /shared/firebase.js
import firebase from 'firebase/compat/app'; 
import 'firebase/compat/auth'; 
import 'firebase/compat/firestore';
// Import the functions you need from the SDKs you need
// import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "---",
  authDomain: "---",
  projectId: "---",
  storageBucket: "---",
  messagingSenderId: "---",
  appId: "---"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

//firebase 인증기능을 쓰기 위해서 export
const auth = firebase.auth();
export {auth};

3. 리덕스에서 signupFB 함수 만들기 - 이메일로 회원가입인증기능 만들기 (feat.firebase)

const signupFB = (id, pwd, user_name) => {
    return function ( dispatch, getState, { history }) {

      //원래는 아래 모양으로 쓰는데 위에서 { auth }를 export했기 때문에 아래처럼 사용함
       // firebase.auth().createUserWithEmailAndPassword(email, password)
        auth 
            .createUserWithEmailAndPassword(id, pwd)
            .then((user) => {
                // Signed in
                console.log(user);
                // ...
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;

                console.log(errorCode, errorMessage);
                // ..
            });

    }
}

4.Signup 컴포넌트에서 signupFB를 호출하기

//Signup.js
const [id, setId] = React.useState("");
    const [pwd, setPwd] = React.useState("");
    const [pwd_chk, setPwdChk] = React.useState("");
    const [user_name, setUserName] = React.useState("");

    const check = () => {
        if(!id || !pwd){
            alert('아이디 혹은 비밀번호를 입력하세요');
        }
        if(pwd !== pwd_chk){
            alert('비밀번호가 동일하지 않습니다. 확인해주세요');
        }
    }   
    const signId = (e) => {
        setId(e.target.value);
    }
    const signUserName = (e) => {
        setUserName(e.target.value);
    }
    const signPwd = (e) => {
        setPwd(e.target.value);
    }
    const signPwdCheck = (e) => {
        setPwdChk(e.target.value);
    }
    
return (
        <Wrap>
            <h1>Sign Up</h1>
                <div>
                    <div>
                        <label htmlFor="id">ID</label><br />
                        <Input id="id" type="text" placeholder="Please enter ID" 
                        _onChange={signId} // 여기서 _onChange인 이유는 element 쪼갤때 defaultProps로 그렇게 정했기 때문
                        ></Input><br />

                        <label htmlFor="nickname">Nickname</label><br />
                        <Input id="nickname" type="text" placeholder="Please enter Nickname"
                        _onChange = {signUserName}
                        ></Input><br />

                        <label htmlFor="pwd">Password</label><br />
                        <Input id="pwd" type="password" placeholder="Please enter Password"
                        _onChange={signPwd}
                        ></Input><br />

                        <label htmlFor="pwd_check">Confirm Password</label><br />
                        <Input id="pwd_check" type="password" placeholder=" Please enter password again to confirm"
                        _onChange={signPwdCheck}
                        ></Input><br />
                    </div>
                    <br />
                    <div>
                        <Button style={{width: "300px"}} 
                                variant="contained" color="secondary"
                                onClick={() => {dispatch(userActions.signupFB(id, pwd, user_name)); check(); }}>Sign Up</Button>
                    </div>
                </div>
        </Wrap>
    )
}

5. 가입한 후, display_name 바로 업데이트하기

//user.js
//signupFB()안에 createUserWithEmailAndPassword에서 signin 한 뒤 (.then)안에서 signin하면 user정보를 업데이트 해주는것임
updateProfile(auth.currentUser, {
                    displayName: user_name,
                }).then(() => { // Profile updated!
                    dispatch(setUser({id: id, user_name: user_name, user_profile: ''}));
                    history.push('/');
                }).catch((error) => { // An error occurred
                    console.log(error);
                });

6. 사용자 정보 업데이트 후에 메인 페이지로 이동하기
   위에서 dispatch 후에 history.push('/'); 넣어줘서 dispatch로 setUser한 뒤에 메인페이지로 바로 이동하게하기!