소셜 로그인 한 줄로 붙이기

npm create vite@latest login-app -- --template react-ts
cd login-app
npm install connectbase-client

import ConnectBase from 'connectbase-client'

// ConnectBase SDK 인스턴스를 하나만 만들어 전체 앱에서 공유합니다
export const cb = new ConnectBase({
  publicKey: import.meta.env.VITE_CONNECT_BASE_PUBLIC_KEY
})

import { useState, useEffect } from 'react'
import type { MemberInfoResponse } from 'connectbase-client'
import { cb } from '../lib/connectbase'

export function useAuth() {
  const [user, setUser] = useState<MemberInfoResponse | null>(null)
  const [loading, setLoading] = useState(true)

  // 앱이 처음 로드될 때 저장된 토큰으로 본인 정보를 복원합니다
  // 토큰이 없거나 만료된 경우 getMe()가 에러를 던지므로 try/catch로 처리
  useEffect(() => {
    cb.auth
      .getMe()
      .then((me) => setUser(me))
      .catch(() => setUser(null))
      .finally(() => setLoading(false))
  }, [])

  // Google 로그인 — 호출하면 OAuth 팝업이 뜨고 완료 시 토큰이 자동 저장됩니다
  const signInWithGoogle = async () => {
    await cb.oauth.signInWithPopup('google')
    setUser(await cb.auth.getMe())
  }

  // Naver 로그인
  const signInWithNaver = async () => {
    await cb.oauth.signInWithPopup('naver')
    setUser(await cb.auth.getMe())
  }

  // 로그아웃
  const signOut = async () => {
    await cb.auth.signOut()
    setUser(null)
  }

  return { user, loading, signInWithGoogle, signInWithNaver, signOut }
}

import { useAuth } from '../hooks/useAuth'

export function LoginPage() {
  const { user, loading, signInWithGoogle, signInWithNaver, signOut } = useAuth()

  // 세션 확인 중일 때 로딩 표시
  if (loading) return <p>로딩 중...</p>

  // 이미 로그인된 상태
  // MemberInfoResponse 의 email 은 소셜 로그인 시에만 자동 채워집니다 (없으면 빈 문자열)
  if (user) {
    return (
      <div>
        <p>{user.email || user.nickname}님, 환영합니다!</p>
        <button onClick={signOut}>로그아웃</button>
      </div>
    )
  }

  // 로그인 전 — 소셜 로그인 버튼 표시
  return (
    <div>
      <h1>로그인</h1>
      <button onClick={signInWithGoogle}>Google로 계속하기</button>
      <button onClick={signInWithNaver}>Naver로 계속하기</button>
    </div>
  )
}

npm run dev