8. twitter clone 하기 - 파이어베이스 로그인 준비하기(2)

1. 파이어 베이스 인증 모듈 사용하기

• 파이어 베이스에서 필요한 것 찾아보는 방법
  • Authentication 모듈을 사용하기 위해서 Firebase auth 에서 찾아보면 됩니다.
• 인증 모듈을 사용할 때 알아야 하는 내용
  • 파이어베이스는 특정 모듈을 사용할 때 모듈을 추가로 불러와야 하는 규칙이 있습니다.
    => 인증 모듈을 사용하려면 firebase/auth 를 추가로 import 해야 합니다. auth 를 firebase.auth() 식으로 호출해줘야 합니다.

// ./src/fbase.js
import { initializeApp } from "firebase/app"
// import "firebase/auth" 가 에러가 나는 이유는 firebase에서 v9(Beta) 버전을 내놓았기 때문에 내용이 수정되어야 함
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,
  strageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId : process.env.REACT_APP_MESSAGIN_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
}
const app = initializeApp(firebaseConfig)

export const authService = getAuth() // 여러 모듈로 내보낼 수 있도록 named export 적용

• 파이어베이스 초기화를 이한 firebase.initializeApp(firebaseConfig)는 다른 파일에서는 참조할 필요가 없으므로 fbase.js 파일 안에서 실행하도록 코드를 변경합니다.
• 로그인을 위해서 사용할 firebase.auth() 는 다른 파일에서 참조할 것이므로 authService에 담아서 내보내도록 합니다.
• authService를 로그인을 햇는지 여부를 결정하는 isLoggedIn 이 있는 곳에서 사용합니다.
• console.log 로 authService 를 잘 받아 오는지 확인합니다.

// ./src/components/App.js
import { useState } from "react"
import AppRouter from "components/Router"
import { authService } from "fbase"

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false)
  console.log(authService.currentUser)
  return <div>
(... 생략 ...)

console.log(authService.currentUSer) 결과값

• authService 로 내보낸 auth 모듈에는 현재 로그인한 사람을 확인하는 currentUser 함수가 포함되어 있는데 이 함수는 로그인하지 않은 상태이면 null 을 반환하기 때문에 콘솔에 null 값이 출력됩니다.
• currentUser 에 따라서 로그인 상태를 변경해주기 위해서 authService.currentUser 의 값을 useState의 초기값으로 정의합니다. 

import { useState } from "react"
import AppRouter from "components/Router"
import { authService } from "fbase"

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(authService.currentUser)
  
  return <div>
(... 생략 ...)

이 글은 Nomad Coder의 "클론코딩 트위터" 책을 바탕으로 작성되었습니다.