[Auth] Adding Firebase Auth to React

사용자 등록이 완료되었으니 블로그 Front End에 Firebase Auth를 추가하도록합니다.

왼쪽 메뉴에서 Project Overvie 메뉴를 클릭하면 다음과 같이 작성한 프로젝트 메인 페이지가 보입니다.

Get started by adding Firebase to your app이라는 문구가 보이면서 추가할 방법을 선택할수 있습니다. 여기서는 Web에 추가할 예정이므로 </>버튼을 클릭합니다.

Register App 설정이 보이고 App의 닉네임은 별도로 구분하기 위한 이름으로 적당한 이름으로 정한 후 Firebase hosting을 사용을 하지 않을 예정이므로 체크를 하지 않은 후에 Register app 버튼으로 진행합니다.

그 다음으로 이제 블로그 Front End에서 사용할수 있는 방법이 나옵니다. 

 

위의 방법대로 블로그 Front End에 적용시켜보겠습니다.

우선 npm명령어로 my blog front end에 firebase를 설치합니다.

Firebase 설치가 완료되면 React Blog와 Firebase를 연결하기 위해 위에 제시한 코드를 블로그 Front End의 렌더링이 시작되는 진입점인 index.js파일에 넣어줍니다. src폴더 안의 변경된 index.js페이지는 다음과 같습니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyC7Ol0_rD-bOCYdvNO8-Xxxxxxxxxxxx", // use your own key
  authDomain: "my-react-blog-66c49.firebaseapp.com",
  projectId: "my-react-blog-66c49",
  storageBucket: "my-react-blog-66c49.appspot.com",
  messagingSenderId: "885402350505",
  appId: "1:885402350505:web:3c8a0c1367c45e48128ab8"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Front End App을 시작(npm start run)하고 에러가 없는지 확인합니다. 에러가 발견되지 않는다면 이제 블로그 Front End에서 Firebase Auth를 사용할수 있게 되었습니다.