여행 어시스턴트 앱에 구글 로그인 추가하기: Firebase Authentication

‎여행 어시스턴트 앱에 구글 로그인 추가하기- Firebase Authentication by NextPlatform.‎001
Views: 38

바이브코딩 입문자로서 내가 만든 어시스턴트 앱에 구글 로그인 기능을 추가하고 싶다면, Firebase Authentication을 활용하는 방법을 추천해요. 또 다른 방법인 OAuth 프로토콜을 직접 구현할 필요 없이, 구글이 제공하는 로그인 창을 그대로 가져다 쓸 수 있어요.

TravelCanvas by NextPlatform / https://github.com/junsang-dong/goorm-260630-travel-canvas-lite

왜 Firebase Authentication인가

  • 서버 코드 없이 프런트엔드(React/Vite) 코드만으로 구현 가능
  • 구글 클라우드 콘솔에서 복잡한 OAuth 설정을 직접 할 필요 없음 (Firebase가 대신 처리)
  • 무료 티어로 충분히 실습 가능

구현 4단계

1단계: Firebase 프로젝트 생성

  • Firebase 콘솔에서 새 프로젝트 생성
  • 왼쪽 메뉴 → Authentication → “시작하기” → 로그인 방법에서 Google 활성화

2단계: 웹앱 등록 후 설정 코드 복사

  • 프로젝트 설정 → “앱 추가” → 웹(</>) 선택
  • firebaseConfig 객체를 복사해둡니다 (apiKey, authDomain 등이 담긴 코드)

3단계: SDK 설치

npm install firebase

4단계: 로그인 코드 작성

// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";

const firebaseConfig = { /* 2단계에서 복사한 설정 */ };
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export const loginWithGoogle = async () => {
  const result = await signInWithPopup(auth, provider);
  return result.user; // 이름, 이메일, 프로필 사진 포함
};

// LoginButton.jsx
import { loginWithGoogle } from "./firebase";

function LoginButton() {
  const handleLogin = async () => {
    const user = await loginWithGoogle();
    console.log("로그인 성공:", user.displayName);
  };
  return <button onClick={handleLogin}>구글로 로그인</button>;
}

버튼 클릭 → 구글 팝업 → 로그인 완료 → user 객체에서 이름·이메일·프로필 사진을 바로 사용 가능

결론: 활용 포인트

  • PlayRank/HanBot 등 기존 프로젝트와 바로 연결: 이미 Vercel + Neon PostgreSQL 스택을 쓰고 있다면, Firebase Auth로 로그인만 처리하고 사용자 정보는 Neon DB에 저장하는 하이브리드 구조로 확장하는 다음 미션도 설계 가능
  • 디버깅이 학습 포인트: “인증되지 않은 도메인” 오류(로컬 개발 시 자주 발생)를 경험하고, Firebase 콘솔의 “승인된 도메인” 설정을 찾아 고치는 과정을 통해 로그인 프로세스에 대한 이해 확장 가능

답글 남기기

Related Posts