Firebase - Firebase Auth 세팅 (React)

Firebase Authentication

• 쉽게 사용자 인증을 구현할 수 있도록 돕는 Firebase 서비스
• 이메일과 비밀번호 인증, 소셜 미디어 인증, 전화번호 인증
• 인증 번호 안전하게 저장
• 인증 정보 변경시 실시간으로 앱에 업데이트
• 인증 이메일 전송, 비밀번호 재설정 이메일 전송 등의 기능

장점

• 편의성
  • 복잡한 인증 과정을 Firebase가 대신 처리
  • 클라이언트 사이드 개발에만 집중
• 소셜 미디어 계정 인증
  • OAuth 2.0과 OpenID Connect 지원
  • 각종 소셜 미디어 계정 이용한 인증 쉽게 구현
• 보안
  • 사용자의 비밀번호 안전하게 암호화
  • HTTPS 이용해 데이터 전송 보안

언제 Firebase Authenticationd을 사용하는가?

• 로그인 시스템
• 사용자 프로필 시스템

 

Firebase Authentication 세팅 방법

참고 : https://firebase.google.com/docs/auth?hl=ko

1. 설정할 프로젝트에서 Authentication 시작하기

2. 로그인 제공업체 선택 : 기본 이메일/비밀번호 인증 선택하기

 

3. 회원가입된 유저는 Users 탭에서 정보 확인 가능

4. 코드 세팅

• firebaseApp.tsx 세팅

// initializeApp 함수는 Firebase 애플리케이션을 초기화하는 데 사용
// FirebaseApp은 Firebase 애플리케이션의 타입을 나타냄
// getApp 함수는 이미 초기화된 Firebase 애플리케이션을 가져옴

import { initializeApp, FirebaseApp, getApp } from "firebase/app";
import "firebase/auth";

export let app: FirebaseApp;

// Your web app's Firebase configuration
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_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_ID,
};


// try 블록에서 getApp("app") 함수를 사용하여 이미 초기화된 Firebase 애플리케이션을 가져오려고 시도
// import시 getApp을 하고, 그기 아니면 초기화시키기. import 할때마다 초기화시키는게 비효율적이기 때문
// 만약 가져오기에 실패하면 (catch 블록), initializeApp 함수를 사용하여 새로운 Firebase 애플리케이션을 초기화
try {
  app = getApp("app");
} catch (e) {
  app = initializeApp(firebaseConfig, "app");
}

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

export default firebase;

• App.tsx 세팅

import { useState } from "react";
import { app } from "firebaseApp";
import { getAuth } from "firebase/auth";
// app 변수는 초기화한 Firebase 애플리케이션을 가져옴
// getAuth 함수는 Firebase 인증 서비스를 초기화하고 해당 서비스를 사용할 수 있는 인증 객체(auth)를 반환함

import Router from "./components/Router";

function App() {
  // auth 변수는 Firebase에서 인증 서비스를 초기화하고, app에서 가져온 Firebase 애플리케이션 객체를 사용하여 인증 객체를 생성함
  const auth = getAuth(app);
  // currentUser 속성은 현재 인증된 사용자를 나타내며, 사용자가 로그인하지 않은 경우 null임
  // 따라서 !! 연산자를 사용하여 null을 불리언 값으로 변환하고, 사용자가 로그인한 경우 true, 로그아웃한 경우 false로 설정됨
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
    !!auth?.currentUser
  );
  return <Router isAuthenticated={isAuthenticated} />;
}

export default App;