[TIL] 프리온보딩 31일차 - 220602

Firebase Login

1️⃣ yarn으로 firebase 설치

yarn add firebase

 

2️⃣ firebase.ts 파일을 생성하여 아래와 같이 작성

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
}

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)
export { app, auth }

 

3️⃣ firebase 프로젝트를 생성하고 콘솔로 이동하여 작성되어 있는 firebase key들을 .env에 추가

 

4️⃣ 생성한 프로젝트에 들어가서 Authentication > 문서 들어가면 해야할 것들을 알려준다 ! (로그인, 사용자 계정 생성 등)

예를 들어, 로그인을 구현하고 싶은 경우 아래와 같이 하면 된다.

import { signInWithEmailAndPassword } from 'firebase/auth'
import { auth } from 'services/firebase'

const Login = () => {
	...
	const loginSubmitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const result = signInWithEmailAndPassword(auth, email, password)
    ...
  }
  ...
}

export default Login