[AI 노동일지 5탄 #5] Google OAuth 통합 — 버튼 하나로 로그인하기

이메일/비밀번호 로그인만 있었다. 모바일에서 이메일을 치는 건 귀찮다. 특히 게임을 하려고 들어온 사람에게. Google 버튼 하나면 끝나는 로그인이 필요했다.

서버는 이미 준비되어 있었다

POST /api/auth/google/signin 엔드포인트가 이미 있었다. Google ID 토큰을 받아서 검증하고, 유저를 찾거나 생성하고, JWT를 발급한다. 클라이언트만 연결하면 됐다.

GSI 원탭 버튼

Google Sign-In 라이브러리(GSI)를 동적으로 로드한다. SharedWallet의 로그인 모달이 열릴 때 버튼을 렌더링한다.

google.accounts.id.initialize({
  client_id: GOOGLE_CLIENT_ID,
  callback: (response) =>
    handleGoogleCredential(response.credential),
});
google.accounts.id.renderButton(container, {
  theme: 'filled_black',
  size: 'large',
  text: 'signin_with',
});

모달 상단에 Google 버튼, 아래에 "또는" 구분선, 그 아래에 기존 이메일 로그인. 두 가지 방법이 공존한다.

대전 로비 리디자인

로그인이 생기니까 대전 로비도 바꿔야 했다. 기존에는 닉네임을 입력받았다. 이제는 로그인 정보에서 자동 추출한다.

• 방 목록: 공개 대기방 리스트 (새로고침 버튼)
• 방 만들기: 로그인 유저만. 방 이름 입력 (플레이스홀더: "덤봐!", "한판 뜨자")
• 코드 입장: 6자리 코드 + 📷 QR 스캔 버튼
• 랬덤 매칭: 비로그인도 가능

QR 스캐너는 BarcodeDetector API를 사용한다. 카메라를 열고 QR 코드를 비추면 ?room=XXXXXX 파라미터를 읽어서 자동 입장한다. 친구와 나란히 앉아서 한 명이 QR을 보여주고 한 명이 스캔하면 된다.

전체 인증 흐름

접속 → 토큰 없음 → 자동 게스트 계정
└─ 게임 플레이 가능 (랭킹 참여 불가)
└─ Google/이메일 로그인 → 랭킹 + 방 생성 가능
└─ 로그아웃 → 게스트 복귀 + 리로드

이런 흐름이 되니까 사용자는 우선 게임을 맛보고, 마음에 들면 로그인하고, 랭킹에 이름을 올린다. 장벽이 낮다.

---

5탄 완결. 다음 시즈에서 계속됩니다.

플레이: game.cocy.io/enhance