파이어베이스 이용해서 회원가입 기능 구현하기

회원가입은 일단 어떻게 쓰는지 순서를 아는 것이 중요하다.

 

적용 순서

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

가입을 시키는 것 => 비동기작업

 

 

음 강의 보면서 따라했더니 에러가 나서..

파이어스토어 임포트를 아래와 같이 바꿔줬더니 에러가 사라졌다 !

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

파이어베이스 에러안나는 코드스니펫

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  apiKey: "AIzaSyCWdp1d93uVZ1eKHzHJktCe7hKYJq0AA_0",
  authDomain: "ryurim-97ae2.firebaseapp.com",
  projectId: "ryurim-97ae2",
  storageBucket: "ryurim-97ae2.appspot.com",
  messagingSenderId: "170453433446",
  appId: "1:170453433446:web:53a9710298dfb1d27c81a7",
  measurementId: "G-BWYWR09L52"
};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();

export {auth};

근데 강의랑..파이어베이스 버전이 새로나온거랑 달라서

강의버전 그대로 진행했다.

 

파이어베이스링크

 

회원가입 js

import React from "react";
import { Text, Input, Grid, Button } from "../elements/index";
import { useDispatch } from "react-redux";
import {actionCreateors as userActions} from "../redux/modules/user"

const Sign =(props)=>{
    const dispatch = useDispatch();

    const [id,setId]= React.useState("");
    const [pwd,setPwd]= React.useState("");
    const [pwd_check,setPwdCheck]= React.useState("");
    const [user_name,setUserName]= React.useState("");

    const signup =()=>{
        if(id==='' || pwd===''|| user_name===''){
            return;
        }
        if(pwd!==pwd_check){
            return;
        };
        dispatch(userActions.signupFB(id,pwd,user_name))
    };
    return(
        <React.Fragment>
            <Grid padding="16px">
                <Text size="32px" bold>
                    회원가입
                </Text>
                <Grid padding="16px 0px">
                    <Input 
                    label="아이디"
                    placeholder="아이디를 입력해주세요."
                    _onChange={(e)=>{
                        setId(e.target.value)
                    }}
                    />
                </Grid>
                <Grid padding="16px 0px">
                    <Input 
                    label="닉네임"
                    placeholder="닉네임을 입력해주세요."
                    _onChange={(e)=>{
                        setUserName(e.target.value)
                    }}
                    />
                </Grid>
                <Grid padding="16px 0px">
                    <Input 
                    label="비밀번호"
                    placeholder="비밀번호를 입력해주세요."
                    _onChange={(e)=>{
                        setPwd(e.target.value)
                    }}
                    />
                </Grid>
                <Grid padding="16px 0px">
                    <Input 
                    label="비밀번호 확인"
                    placeholder="비밀번호를 다시 한번 입력해주세요."
                    _onChange={(e)=>{
                        setPwdCheck(e.target.value)
                    }}
                    />
                </Grid>
               < Button
                    color="#C95757" bg
                    _onClick={signup}>
                    회원가입하기
                </Button>
            </Grid>
        </React.Fragment>
    )
};

export default Sign;

덕스구조

import {createAction,handleActions} from "redux-actions"; //액션을 편하게 만들어주는 것, 리듀서를 편하게 만들어주는 것.
import {produce} from "immer"; //불변성 관리

import {getCookie,setCookie,deleteCookie} from "../../shared/Cookie";

import { auth } from "../../shared/firebase";

//actions 로그인, 로그아웃, 유저정보가져오기
const LOG_OUT ="LOG_OUT";
const GET_USER ="GET_USER";
const SET_USER ="SET_USER";
const user_initial={
    user_name:'yurim',
};
//action creators
const logOut = createAction(LOG_OUT, (user)=>({user}));
const getUser = createAction(GET_USER, (user)=>({user}));
const setUser = createAction(SET_USER, (user)=>({user}));

//초기값
const initalState ={
    user:null,
    is_login:false,
};

//middleware actions
const loginAction =(user)=>{
    return function(dispatch,getState,{history}){
        console.log(history);
        dispatch(setUser(user));
        history.push('/')
    };
};
const signupFB =(id,pwd,user_name)=>{
    return function(dispatch,getState,{history}){

        auth
        .createUserWithEmailAndPassword(id, pwd)
        .then((user) => {
            console.log(user);
            auth.currentUser.updateProfile({
                displayName: user_name,
            }).then(()=>{
                dispatch(setUser({user_name:user_name, id:id, user_profile:''}));
                history.push('/')
            }).catch((error)=>{
                console.log(error)
            })
          // Signed in
          // ...
        })
        .catch((error) => {
          var errorCode = error.code;
          var errorMessage = error.message;

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

//리듀서
export default handleActions({
    [SET_USER] : (state,action)=>produce(state, (draft)=>{
        setCookie("is_login","success");
        draft.user = action.payload.user;
        draft.is_login=true;
    }),
    [LOG_OUT] : (state,action)=>produce(state, (draft)=>{
        deleteCookie("is_login");
        draft.user = null;
        draft.is_login=false;
    }),
    [GET_USER] : (state,action)=>produce(state, (draft)=>{
        
    }),
},initalState);
//action creators export
const actionCreateors ={
    logOut,
    getUser,
    loginAction,
    signupFB,
};
export {actionCreateors};

하핫 메인페이지로 넘어오는 것 까지 성공!

파이어베이스 회원가입에 있는 규칙을 어기면,

회원가입안되고 400이라는 에러가 뜬당,,

 

index.ts:114 POST https://identitytoolkit.googleapis.com/v1/accounts:lookup?key=AIzaSyCWdp1d93uVZ1eKHzHJktCe7hKYJq0AA_0 400

위의 메세지는 에러메시지다.

정신이 혼미해진다.