Social Login Kit — React

무엇을 해결하나요

카카오·네이버·구글 소셜 로그인을 안전하게 붙이는 데 필요한 서버 코드와 React 프론트 컴포넌트를 바로 쓸 수 있는 형태로 제공합니다. 설치하면 내장 SQLite로 바로 동작하고, 나중에 고객사 회원 시스템(API 또는 DB)으로 전환할 수 있습니다.

이런 곳에 맞습니다

• React와 자체 서버로 서비스를 직접 개발해 운영하는 회사 (개발자 1명 이상)
• 소셜 로그인을 처음 붙이거나, 직접 만든 로그인 코드의 보안이 걱정되는 경우

이런 경우에는 맞지 않습니다

• 카페24·아임웹·Wix·식스샵 등 쇼핑몰·홈페이지 빌더를 쓰는 경우: 빌더에 들어 있는 소셜 로그인 기능을 켜서 사용하세요.
• 워드프레스 등 CMS 플러그인으로 운영하는 경우
• 다른 회사에 납품할 결과물에 넣으려는 경우(개발 외주사): 별도로 문의해 주세요.

보안 설계

• Authorization Code 흐름 + 서명된 state 쿠키, PKCE(카카오·구글) 적용, 토큰을 URL에 노출하지 않음
• Access token(15분)은 프론트 메모리, Refresh token은 HttpOnly 쿠키 + DB에는 해시만 저장
• Refresh token 회전과 재사용 감지(세션 묶음 전체 폐기), 다중 탭 동시 갱신 10초 유예
• /auth/refresh·/auth/logout Origin 검사(CSRF 방어), returnTo 상대 경로만 허용(오픈 리다이렉트 방지)
• provider가 인증한 이메일일 때만 기존 회원 자동 연결(계정 탈취 방지)

저장 모드

• 기본: 내장 SQLite (DB 서버·Docker 불필요)
• 방법 1: 고객사 회원 API 호출 (Spring, PHP 등 Node가 아닌 백엔드)
• 방법 2: 고객 DB 기존 회원 테이블 직접 연동 (PostgreSQL/MySQL 참고 구현)

다운로드와 지원

• 입금이 확인되면 라이선스가 발급되고, '내 다운로드'에서 바로 내려받을 수 있습니다(다운로드 주소는 10분 동안만 유효).
• 업데이트 이용 기간과 이슈 지원 기간은 플랜별로 다르며, 결제일부터 계산합니다.

포함 구성

• packages/core: provider 어댑터, 계정 연결 정책, 토큰 발급·회전
• packages/server: Fastify 플러그인, SQLite 저장소, 고객 API 어댑터, 마이그레이션 도구
• packages/client-core: 세션 복구, 토큰 자동 갱신, 탭 간 로그아웃 동기화
• packages/client-react: AuthProvider, useAuth, SocialLoginButton, AuthCallback, RequireAuth
• apps/api: 데모 서버와 운영 스크립트(check-env, migrate:api, verify:customer-api)
• examples/react-vite: 로그인·콜백·보호 화면·로그아웃 예제
• examples/direct-db-postgres: 방법 2 참고 구현
• docs: 셀프 설치 매뉴얼, React 연결 가이드, provider 콘솔 설정, 마이그레이션 가이드

설치 방법

1. 압축을 풀고 pnpm install
2. .env.example을 .env로 복사하고 provider 키 입력
3. pnpm check-env로 설정 점검 → pnpm dev
4. 예제 앱(examples/react-vite)에서 로그인 흐름 확인 후 자사 프론트에 컴포넌트 연결