[react]Google Firebaseを使用したEメール/パスワード認証会員登録機能の作成(feat.雑誌サイトの作成)

yarn add 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};

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);
                // ..
            });

    }
}

//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>
    )
}

//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);
                });