2026.07.02 / 동준상.넥스트플랫폼
(AWS SAA, AWS AIF, GCP GenAI Leader)
Add Google Login Feature using Firebase Auth
바이브코딩 입문자로서 내가 만든 어시스턴트 앱에 구글 로그인 기능을 추가하고 싶다면, Firebase Authentication을 활용하는 방법을 추천해요. 또 다른 방법인 OAuth 프로토콜을 직접 구현할 필요 없이, 구글이 제공하는 로그인 창을 그대로 가져다 쓸 수 있어요.
왜 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 콘솔의 “승인된 도메인” 설정을 찾아 고치는 과정을 통해 로그인 프로세스에 대한 이해 확장 가능
