Firebase (signIn & signUp)

팀원의 pull request 에 대한 코드 리뷰 중, auth 관련 사항들을 redux에 적용시켰다.

다음은 간략한 개발 내역이다.

 

먼저 firebase.js에 관련 모듈을 모두 import 한다.

앱에서 쓸일이 있으면 참조만 만들어 export 한다.

import { initializeApp } from "firebase/app";
import { 
    getAuth,                        // authentication 설정
    signInWithPopup,                // google 로그인을 팝업창에 띄우기 위해
    GoogleAuthProvider,             // google login 기능
    signInWithEmailAndPassword,     // email 로그인
    createUserWithEmailAndPassword, // email 회원가입
  } from 'firebase/auth';

const firebaseConfig = {
  apiKey: "AIzaSyC-InRZiZLyM9MWenviGWknDuJR-XPbQH0",
  authDomain: "babil-1d129.firebaseapp.com",
  databaseURL: "https://babil-1d129-default-rtdb.firebaseio.com",
  projectId: "babil-1d129",
  storageBucket: "babil-1d129.appspot.com",
  messagingSenderId: "607027316130",
  appId: "1:607027316130:web:ba6c705f57801effc3defb",
  measurementId: "G-87B6KT8RG5"
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth();
export const createUserEmail = (auth, email, password) => createUserWithEmailAndPassword(auth, email, password);
export const signInEmail = (auth, email, password) => signInWithEmailAndPassword(auth, email, password);

 

firebase의 문서를 참고하여 액션을 만든다. 하단 액션 둘 다 Promise를 반환하는데, 마침 컴포넌트에서도 promise로 받아올 것을 가정하고 액션을 불러오고 있다. 다음은 관련 링크이다.

https://firebase.google.com/docs/reference/js/auth.md?authuser=0#signinwithemailandpassword

인증 패키지  |  Firebase

auth_action.js

import {
    SIGN_IN,
    SIGN_UP,
} from '../types';

import {
    auth,
    createUserEmail,
    signInEmail
} from '../../utils/firebase';

export const signIn = async (data) => {
    const request = await signInEmail(auth, data.email, data.password)
    .then((userCredential) => {
        return user = userCredential.user;
    }).catch((error) => {
        console.log(error)
        return false
    })
    return {
        type: SIGN_IN,
        payload: request
    }
}

export const signUp = async (data) => {
    const request = await createUserEmail(auth, data.email, data.password)
    .then((userCredential) => {
        return user = userCredential.user;
    }).catch((error) => {
        console.log(error)
        return false
    })
    return {
        type: SIGN_UP,
        payload: request
    }
}

 

다음은 리듀서인데, 이전 fs_app에서 axios로 해서 email을 받아왔던것과는 다르게, 그냥 response 로 user 가 있는지만 확인할거라 payload 자체만 받아온다.

 

auth_reducer.js

import {
    SIGN_IN,
    SIGN_UP
} from '../types';

// Define INITIAL_STATE, if needed.

export default function(state={}, action) {
    switch(action.type) {
        case SIGN_IN :
            return {
                ...state,
                user: action.payload || false
            }
        case SIGN_UP :
            return {
                ...state,
                user: action.payload || false
            }
        default :
            return state
    }
}