firebase authentication을 이용하여 회원가입 및 로그인을 구현하자

OAuth2.0을 사용한 회원가입 및 로그인은 거의 동일한 구조로 구현된다. 이 기능을 내가 직접 구현할 필요없이 firebase에서 제공하는 firebase authentication을 이용하면 간단하게 구현할수 있다.

 

당연히 firebase회원가입이 되어 있어야하고 로그인해서 프로젝트를 만들어보자

프로젝트 이름은 테스트용으로 대충 지어봤다

조금 시간이 걸린다

프로젝트가 만들어지면 들어가서 Authentication에 들어가서 "시작하기" 를 해보자

보다시피 다양한 로그인 방법을 추가할 수 있다. 나는 Google로그인만 추가해서 관리할 생각이다.

이렇게 "사용 설정" 토글을 on으로 해서 나머지 정보를 채워두면 된다. 이제 간단히 코드를 구성해서 회원가입을 할 수 있도록해보자.

웹용 코드를 생성할생각인데, 프로젝트 설정에 들어가보자.

태그 모양이 웹 전용 코드다.

호스팅은 지금 설정하지 않아도 된다.

이런식으로 필요한 firebaseConfig를 얻을수 있다. 나는 react로 간단히 구현해봤다.

import React, { useState } from "react"
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"
import { initializeApp } from "firebase/app"
import { getAuth } from "firebase/auth"

const firebaseConfig = {
  apiKey: "****",
  authDomain: "****",
  projectId: "****",
  storageBucket: "****",
  messagingSenderId: "****",
  appId: "****",
  measurementId: "****",
}

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

const App: React.FC = () => {
  const [user, setUser] = useState<any>(null)
  const [error, setError] = useState<string | null>(null)

  const handleGoogleSignIn = async () => {
    const provider = new GoogleAuthProvider()
    try {
      const result = await signInWithPopup(auth, provider)
      const credential = GoogleAuthProvider.credentialFromResult(result)
      const token = credential?.accessToken
      const user = result.user

      // 상태 업데이트
      setUser(user)
      setError(null)
      console.log("Token:", token)
      console.log("User:", user)
    } catch (error: any) {
      setError(error.message)
      console.error("Error during sign-in:", error)
    }
  }

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Firebase Authentication</h1>
      {!user ? (
        <button
          onClick={handleGoogleSignIn}
          style={{ padding: "10px 20px", fontSize: "16px" }}
        >
          Sign In with Google
        </button>
      ) : (
        <div>
          <h2>Welcome, {user.displayName}!</h2>
          <img
            src={user.photoURL}
            alt="User Avatar"
            style={{ borderRadius: "50%" }}
          />
          <p>Email: {user.email}</p>
        </div>
      )}
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  )
}

export default App

잘 동작하는것을 확인할수 있다.