[23일차] firebase, glitch 서버 사용하기

h-a-n-a·2023년 9월 8일

💫Ed Sheeran

목록 보기

23/24

배포하게 되면서 깨달은 건데, json-server나 json-server-auth는 어디까지나 Mock Server였기 때문에 실제 프로덕션에는 사용할 수 없다는 것이었다!

다행히, JSON 서버를 호스팅할 수 있는 서비스인 Glitch를 발견했다.

Glitch

Glitch 서비스 자체가 A simple Node app built on Express to display and connect to JSON server endpoint. 라고 소개되어 있어 프로젝트하면서 간단한 json-server 정도는 glitch를 이용하면 좋을 것 같다.

방법은 크게 어렵지 않았다. 기존에 내가 사용했던 data.json을 glitch에 연동하면 된다!

Firebase

문제는 json-server-auth 였는데 glitch는 정말로 json-server 그 자체만 지원했기 때문에, 혹시나 하는 마음에 도전한 json-server-auth는 역시나 연동이 안되었다ㅠㅠ

결국 Firebase를 사용해 기존의 회원가입, 로그인 기능을 연동하기로 했다.
firebase 인증 기능을 사용하기 위해서는 initializeApp 함수를 실행하여 Firebase를 초기화해줘야 한다.

firebase.config.ts

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: '~~',,
  authDomain: 'sheerios-auth.firebaseapp.com',
  projectId: 'sheerios-auth',
  storageBucket: 'sheerios-auth.appspot.com',
  messagingSenderId: '~~',,
  appId: '~~',
  measurementId: '~~',,
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

을 적어주고, firebase에서 자기가 만든 앱 클릭해서 복붙해오면 된다!

Firebase auth

firebase auth 에서는 회원가입 및 로그인 등을 위한 인증 관련 메서드를 제공한다. 메서드를 사용하기 위해서 firebase/auth 에서 필요한 메서드만 import 해와서 사용하면 된다!

signInWithEmailAndPassword

 try {
      await signInWithEmailAndPassword(auth, email, password).then((res) =>
        setCookie(
          'accessToken',
          res.user.getIdTokenResult().then((data) => data.token)
        )
      );
      reset();
      dispatch(openToast('로그인하셨습니다'));
      navigate('/');
    } catch (err) {
      console.log(err);
    }

createUserWithEmailAndPassword

try {
      await createUserWithEmailAndPassword(auth, email, password).then((res) =>
        res.user
          .getIdTokenResult()
          .then((data) => setCookie('accessToken', data.token))
      );
      reset();

      dispatch(openToast('회원가입에 성공하셨습니다!'));
      navigate('/');
    } catch (error) {
      console.error(error);
    }