리액트에 파이어베이스 사용하기

마지막 프로젝트 였던 거기어때의 백엔드 서버가 닫혀 firebase를 이용해 서비스를 할수있도록 리펙토링 중입니다.

그중 파이어베이스 연동을 구현한 내용입니다.

 

 

Firebase

 

파이어베이스에 가입후 로그인하고 시작하기를 눌러줍니다.

 

새로운 프로젝트를 만들거나 본인의 프로젝트들을 확인 할수있습니다.

 

생성할 프로젝트의 이름을 작성합니다.

 

애널리틱스 사용여부를 체크합니다.

 

프로젝트가 생성이되면 파이어베이스를 사용할 앱을 등록해줍니다.

 

앱 이름을 등록합니다.

 

리액트에서 연동을 할거라 npm을 선택하고 config내용을 복사해 둡니다.

 

콘솔로 이동후 빌드 => FireStore Database를 선택하고 데이터베이스 만들기를 눌러 만들어줍니다.

 

데이터베이스 접근 권한에대한 보안규칙입니다.

테스트 모드로 시작하면 한달간 접근을 허용합니다.

규칙은 언제든 변경 가능합니다.

 

데이터베이스의 클라우드 위치를 지정합니다.

asia-northeast3(Seoul)을 선택합니다.

한번 설정하면 변경이 불가능하니 신중히 잘 선택해야 합니다.

 

새로고침을 하면 데이터베이스가 생성된것을 확인할 수 있습니다.

규칙으로 가면 접근권한에 대한 규칙을 설정할 수 있습니다.

 

npm install firebase

앱에서 파이어베이스 라이브러리를 설치해 줍니다.

 

-firbase.js-

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from "firebase/storage"

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FB_API_KEY,
    authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FB_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FB_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FB_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FB_API_ID,
    measurementId: process.env.REACT_APP_FB_MEASUREMENT_ID
};

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);
const storage = getStorage(app);

export {
    db,
    storage,
};

복사해 뒀던 config내용을 적어줍니다.

저는 파이어베이스 연결하는 부분을 인스턴스화 하여 사용했습니다.

 

 

리액트 카카오 소셜 로그인 인가 인증까지 하기

지난번 글에서 카카오 로그인후 사용자 정보까지 얻어오는것을 구현했었는데 이정보를 데이터베이스에 넣고 로그인을 구현 해보겠습니다.

 

-users.js-

import {
    doc,
    setDoc,
    getDoc,
    updateDoc,
} from 'firebase/firestore';
import { db } from "../firebase";

export const getUser = async (uid) => {
    return await getDoc(doc(db, "users", uid));
}

export const joinUser = async (uid, data) => {
    return await setDoc(doc(db, "users", uid), data);
}

export const updateUser = async (uid, userInfo) => {
    return await updateDoc(doc(db, "users", uid), userInfo);
}

유저모듈을 만들어줍니다.

 

useQuery(["getKakaoUserInfo"], getKakaoUserInfo,
		{
			refetchOnWindowFocus: false,
			onSuccess: async (res) => {
				const { id, kakao_account } = res.data;
				const { email, gender, profile } = kakao_account;
				const { nickname, profile_image_url } = profile;

				const haveUserInfo = (await getUser(`UID_${id}`))._document !== null;

				if (!haveUserInfo) {
					await joinUser(
						`UID_${id}`,
						{
							email,
							gender,
							nickname,
							profile_image_url
						}
					)
				}

				localStorage.setItem("uid", `UID_${id}`);
				window.location.replace("/mypage");
			},
			onError: error => {
				alert("로그인 실패 메인화면으로 돌아갑니다.");
				window.location.replace("/");
			}
		});

파이어베이스에 로그인한 정보가 없으면 저장하고 로컬스토리지에 유저아이디를 담고 마이페이지로 이동합니다.

 

파이어베이스에 데이터를 확인할수 있습니다.

 

 

Firebase Authentication을 통해 커스텀 토큰을 생성하여 로그인처리를 할까도 생각했지만 저는 리다이렉트 과정에서 인증정보를 받아와 db에 저장하고 페이지를 이동시기키기 때문에 불필요한 뎁스라 판단하여 이렇게 구현했습니다.