oauth-btn

React OAuth Social Button

OAuth 소셜 로그인 버튼 컴포넌트 모음집
지원 플랫폼: GitHub / Google / Kakao / Naver
Tailwind 기반 + 커스터마이징 가능한 React 컴포넌트

VITE 기반으로 개발되었습니다.

설치

npm install oauth-btn

사용법

import { KakaoBtn, GoogleBtn, NaverBtn, GithubBtn } from 'oauth-btn';

<KakaoBtn shape="rect" />
<GoogleBtn shape="circle" />
<NaverBtn shape="square" />
<GithubBtn shape="rect" />

⚙️ Props 설명

prop	타입	기본값	설명
shape	string	'rect'	'rect', 'circle', 'square' 중 하나 선택
radius	string	—	Tailwind의 border-radius 클래스 (rounded-md)
bgColor	string	'transparent'	Tailwind 배경 색상 클래스
textColor	string	'text-white'	Tailwind 텍스트 색상 클래스
fontSize	string	'text-sm'	Tailwind 폰트 크기 클래스
onClick	func	—	클릭 이벤트 핸들러

🔐 OAuth 연동 방식

버튼 클릭 → provider의 인증 페이지로 리디렉션 → code 발급 → 백엔드에서 토큰 교환

https://provider.com/oauth2/authorize?
  client_id=YOUR_CLIENT_ID&
  redirect_uri=YOUR_CALLBACK_URL&
  response_type=code&
  state=SOME_RANDOM_STRING

• 버튼 컴포넌트는 위 URL로 이동하는 역할만 수행합니다.
• state는 CSRF 공격 방지를 위해 자동 생성됩니다 (crypto.randomUUID()).

보안 및 주의사항

• OAuth 앱 설정에서 redirect_uri 를 정확하게 등록하세요
• state 파라미터를 백엔드에서 검증하여 CSRF 방지
• client_id와 redirect_uri는 .env 파일에 보관
• .env 파일은 반드시 .gitignore 처리
• 이 라이브러리는 프론트엔드 UI 용도입니다 (access_token 처리는 백엔드에서!)

.env 설정 예시

.env.example:

VITE_KAKAO_CLIENT_ID=your_kakao_key
VITE_KAKAO_REDIRECT_URI=http://localhost:5173/auth/kakao/callback

VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_GOOGLE_REDIRECT_URI=http://localhost:5173/auth/google/callback

VITE_NAVER_CLIENT_ID=your_naver_id
VITE_NAVER_REDIRECT_URI=http://localhost:5173/auth/naver/callback

VITE_GITHUB_CLIENT_ID=your_github_id
VITE_GITHUB_REDIRECT_URI=http://localhost:5173/auth/github/callback

미리보기

()

라이선스

MIT

기여

버그 제보, PR 환영합니다! 패키지 이름은 oauth-btn, 레포는 github-repo에서 확인

Made by JadenMeister

--- ENGLISH ---

React OAuth Social Button

A customizable collection of OAuth social login buttons
Supported platforms: GitHub / Google / Kakao / Naver
Built with Tailwind CSS + customizable React components

Developed using VITE

📦 Installation

npm install oauth-btn

or

yarn add oauth-btn

Usage

import { KakaoBtn, GoogleBtn, NaverBtn, GithubBtn } from 'oauth-btn';

<KakaoBtn shape="rect" />
<GoogleBtn shape="circle" />
<NaverBtn shape="square" />
<GithubBtn shape="rect" />

Props

Prop	Type	Default	Description
shape	string	'rect'	One of 'rect', 'circle', or 'square'
radius	string	—	Tailwind border radius class (e.g. rounded-md)
bgColor	string	'transparent'	Tailwind background color class
textColor	string	'text-white'	Tailwind text color class
fontSize	string	'text-sm'	Tailwind font size class
onClick	func	—	Click event handler

OAuth Flow

Clicking a button will redirect the user to the provider's auth page:

https://provider.com/oauth2/authorize?
  client_id=YOUR_CLIENT_ID&
  redirect_uri=YOUR_CALLBACK_URL&
  response_type=code&
  state=SOME_RANDOM_STRING

• The button only redirects to the provider.
• state is generated using crypto.randomUUID() to prevent CSRF attacks.

🔒 Security & Notes

• Ensure that redirect_uri is properly registered in your OAuth app settings.
• Verify the state parameter in your backend to prevent CSRF.
• Keep your client_id and redirect_uri in a .env file.
• Always add your .env to .gitignore.
• This package is strictly for frontend UI use — token handling must be done on the backend.

📁 .env Example

.env.example:

VITE_KAKAO_CLIENT_ID=your_kakao_key
VITE_KAKAO_REDIRECT_URI=http://localhost:5173/auth/kakao/callback

VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_GOOGLE_REDIRECT_URI=http://localhost:5173/auth/google/callback

VITE_NAVER_CLIENT_ID=your_naver_id
VITE_NAVER_REDIRECT_URI=http://localhost:5173/auth/naver/callback

VITE_GITHUB_CLIENT_ID=your_github_id
VITE_GITHUB_REDIRECT_URI=http://localhost:5173/auth/github/callback

Preview

License

MIT

Contributing

Bug reports and pull requests are welcome! The package name is oauth-btn, and the repository can be found here: github-repo

Made by JadenMeister