이메일·비밀번호 회원 인증

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

import { ConnectBase } from 'connectbase-client'

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()가 에러를 던지므로 catch에서 null 처리합니다.
  useEffect(() => {
    cb.auth
      .getMe()
      .then(setUser)
      .catch(() => setUser(null))
      .finally(() => setLoading(false))
  }, [])

  const signUp = async (email: string, password: string, nickname: string) => {
    // login_id로 이메일을 그대로 사용합니다
    await cb.auth.signUpMember({ login_id: email, password, nickname })
    setUser(await cb.auth.getMe())
  }

  const signIn = async (email: string, password: string) => {
    await cb.auth.signInMember({ login_id: email, password })
    setUser(await cb.auth.getMe())
  }

  const signOut = async () => {
    await cb.auth.signOut()
    setUser(null)
  }

  return { user, loading, signUp, signIn, signOut }
}

import { useState } from 'react'
import { ApiError } from 'connectbase-client'
import { useAuth } from '../hooks/useAuth'

export function AuthPage() {
  const { user, loading, signUp, signIn, signOut } = useAuth()
  const [mode, setMode] = useState<'signin' | 'signup'>('signin')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [nickname, setNickname] = useState('')
  const [error, setError] = useState('')

  if (loading) return <p>세션 확인 중...</p>

  // 로그인된 상태 — 보호 영역
  if (user) {
    return (
      <div>
        <h1>{user.nickname}님, 환영합니다 🎉</h1>
        <button onClick={signOut}>로그아웃</button>
      </div>
    )
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    try {
      if (mode === 'signup') await signUp(email, password, nickname)
      else await signIn(email, password)
    } catch (err) {
      // ApiError에는 statusCode가 들어있어 원인별로 분기할 수 있습니다
      if (err instanceof ApiError && err.statusCode === 401) {
        setError('이메일 또는 비밀번호가 올바르지 않습니다.')
      } else if (err instanceof ApiError && err.statusCode === 409) {
        setError('이미 가입된 이메일입니다.')
      } else {
        setError('문제가 발생했습니다. 잠시 후 다시 시도해주세요.')
      }
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <h1>{mode === 'signup' ? '회원가입' : '로그인'}</h1>
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="이메일" />
      <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="비밀번호" />
      {mode === 'signup' && (
        <input value={nickname} onChange={(e) => setNickname(e.target.value)} placeholder="닉네임" />
      )}
      <button type="submit">{mode === 'signup' ? '가입하기' : '로그인'}</button>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="button" onClick={() => setMode(mode === 'signup' ? 'signin' : 'signup')}>
        {mode === 'signup' ? '이미 계정이 있어요' : '계정 만들기'}
      </button>
    </form>
  )
}

npm run dev