[ReactJS] Firebase Auth #01

Firebase Auth

Firebase Auth를 사용하려면 먼저 import를 해야 한다

/src/fbase.js

import "firebase/auth";

/components/App.js

import firebase from "../fbase"

 

 

Absolute Imports

절대적인 경로로 import하려면 jsconfig.json 파일을 생성하여 아래의 형식 같이 코드를 작성하면 된다

참고: https://create-react-app.dev/docs/importing-a-component

jsconfig.json ( 파일 경로가 src로부터 시작되게 설정하는 코드 )

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

 

 

그리고 상대적 경로로 import되어 있던 코드를 절대적 경로로 수정하여 import한다

(ex) import AppRouter from "./Router"  →  import AppRouter from "components/Router"

 

 

Firebase 인증 모듈 사용

버전 업데이트에 따른 export 관련 오류가 생겨서 https://velog.io/@seondal/Firebase-v9부터-달라진-인증모듈-사용법 을 보고 해결하였다

 

fbase.js

import * as firebase 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_STROAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID
  };
  
firebase.initializeApp(firebaseConfig);
export const authService = getAuth();

 

components/App.js

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

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(authService.currentUser);
  return <AppRouter isLoggedIn={isLoggedIn}/>;
}

export default App;