@authon/js 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.ko.md +58 -149
  2. package/README.md +201 -368
  3. package/dist/index.cjs +673 -14
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +4 -0
  6. package/dist/index.d.ts +4 -0
  7. package/dist/index.js +669 -10
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/README.ko.md CHANGED
@@ -2,189 +2,98 @@
2
2
 
3
3
  # @authon/js
4
4
 
5
- [Authon](https://authon.dev)의 핵심 브라우저 SDK — ShadowDOM 로그인 모달, OAuth 플로우, 세션 관리를 제공합니다.
5
+ > 브라우저 인증 SDK -- 셀프 호스팅 Clerk 대안, Auth0 대안, 오픈소스 인증
6
6
 
7
7
  ## 설치
8
8
 
9
9
  ```bash
10
10
  npm install @authon/js
11
- # or
12
- pnpm add @authon/js
13
11
  ```
14
12
 
15
13
  ## 빠른 시작
16
14
 
17
- ```ts
18
- import { Authon } from '@authon/js';
19
-
20
- const authon = new Authon('pk_live_...');
21
-
22
- // 로그인 모달 열기
23
- await authon.openSignIn();
24
-
25
- // 인증 이벤트 구독
26
- authon.on('signedIn', (user) => {
27
- console.log('Signed in:', user.email);
28
- });
15
+ ```html
16
+ <!DOCTYPE html>
17
+ <html>
18
+ <head><title>My App</title></head>
19
+ <body>
20
+ <button id="sign-in-btn">로그인</button>
21
+ <div id="user-info"></div>
22
+
23
+ <script type="module">
24
+ import { Authon } from '@authon/js';
25
+
26
+ const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY', {
27
+ apiUrl: 'https://your-authon-server.com',
28
+ });
29
+
30
+ document.getElementById('sign-in-btn').addEventListener('click', () => {
31
+ authon.openSignIn();
32
+ });
33
+
34
+ authon.on('signedIn', (user) => {
35
+ document.getElementById('user-info').textContent = `안녕하세요, ${user.email}`;
36
+ });
37
+ </script>
38
+ </body>
39
+ </html>
40
+ ```
29
41
 
30
- authon.on('signedOut', () => {
31
- console.log('Signed out');
32
- });
42
+ ## 주요 작업
33
43
 
34
- // 이메일/비밀번호 로그인
35
- const user = await authon.signInWithEmail('user@example.com', 'password');
44
+ ### Google OAuth 로그인 추가
36
45
 
37
- // OAuth 로그인 (대시보드 기본 플로우 사용: auto | popup | redirect)
46
+ ```ts
38
47
  await authon.signInWithOAuth('google');
39
-
40
- // 런타임에서 플로우 방식 직접 지정 (선택 사항)
41
- await authon.signInWithOAuth('google', { flowMode: 'redirect' });
42
-
43
- // 현재 사용자 및 토큰 조회
44
- const currentUser = authon.getUser();
45
- const token = authon.getToken();
46
-
47
- // 로그아웃
48
- await authon.signOut();
48
+ // 지원 프로바이더: google, apple, github, discord, facebook,
49
+ // microsoft, kakao, naver, line, x
49
50
  ```
50
51
 
51
- ## 설정
52
+ ### 이메일/비밀번호 인증
52
53
 
53
54
  ```ts
54
- const authon = new Authon('pk_live_...', {
55
- apiUrl: 'https://api.authon.dev', // 커스텀 API URL
56
- mode: 'popup', // 'popup' | 'embedded'
57
- theme: 'auto', // 'light' | 'dark' | 'auto'
58
- locale: 'en', // 모달 UI 언어
59
- containerId: 'auth-container', // 컨테이너 요소 ID (embedded 모드)
60
- appearance: { // 커스텀 브랜딩 덮어쓰기
61
- primaryColorStart: '#7c3aed',
62
- primaryColorEnd: '#4f46e5',
63
- borderRadius: 12,
64
- brandName: 'My App',
65
- },
66
- });
55
+ const user = await authon.signUpWithEmail('user@example.com', 'MyP@ssw0rd', { displayName: 'Alice' });
56
+ const user = await authon.signInWithEmail('user@example.com', 'MyP@ssw0rd');
67
57
  ```
68
58
 
69
- ## API 레퍼런스
70
-
71
- ### `Authon` 클래스
72
-
73
- | 메서드 | 반환값 | 설명 |
74
- |--------|---------|-------------|
75
- | `openSignIn()` | `Promise<void>` | 로그인 모달 열기 |
76
- | `openSignUp()` | `Promise<void>` | 회원가입 모달 열기 |
77
- | `signInWithEmail(email, password)` | `Promise<AuthonUser>` | 이메일/비밀번호로 로그인 |
78
- | `signUpWithEmail(email, password, meta?)` | `Promise<AuthonUser>` | 이메일/비밀번호로 회원가입 |
79
- | `signInWithOAuth(provider, options?)` | `Promise<void>` | OAuth 플로우 시작 (`auto`, `popup`, `redirect`) |
80
- | `signOut()` | `Promise<void>` | 로그아웃 및 세션 초기화 |
81
- | `getUser()` | `AuthonUser \| null` | 현재 사용자 조회 |
82
- | `getToken()` | `string \| null` | 현재 액세스 토큰 조회 |
83
- | `on(event, listener)` | `() => void` | 이벤트 구독 (구독 해제 함수 반환) |
84
- | `destroy()` | `void` | 리소스 정리 |
85
-
86
- ### 이벤트
87
-
88
- | 이벤트 | 페이로드 | 설명 |
89
- |-------|---------|-------------|
90
- | `signedIn` | `AuthonUser` | 사용자 로그인 완료 |
91
- | `signedOut` | 없음 | 사용자 로그아웃 완료 |
92
- | `tokenRefreshed` | `string` | 액세스 토큰 갱신됨 |
93
- | `error` | `Error` | 오류 발생 |
94
- | `mfaRequired` | `string` | MFA 인증 필요 (페이로드는 mfaToken) |
95
-
96
- ## 다단계 인증 (MFA)
97
-
98
- Authon은 Google Authenticator, Authy 등 다양한 인증 앱과 호환되는 TOTP 기반 MFA를 지원합니다.
99
-
100
- ### MFA 설정
59
+ ### 현재 사용자 가져오기
101
60
 
102
61
  ```ts
103
- import { Authon, generateQrSvg } from '@authon/js';
104
-
105
- const authon = new Authon('pk_live_...');
106
-
107
- // 1. MFA 설정 시작 (로그인 상태여야 함)
108
- const setup = await authon.setupMfa();
109
- // setup.secret — TOTP 시크릿 키
110
- // setup.qrCodeUri — 인증 앱용 otpauth:// URI
111
- // setup.backupCodes — 일회용 복구 코드
112
- // setup.qrCodeSvg — QR 코드 SVG 문자열 (바로 사용 가능)
113
-
114
- // UI에 QR 코드 표시
115
- document.getElementById('qr')!.innerHTML = setup.qrCodeSvg;
116
-
117
- // 2. 사용자가 QR 코드를 스캔하고 6자리 코드를 입력
118
- const verified = await authon.verifyMfaSetup('123456');
119
- ```
120
-
121
- ### MFA 로그인 플로우
122
-
123
- MFA가 활성화되어 있으면 `signInWithEmail` 호출 시 `AuthonMfaRequiredError`가 발생합니다.
124
-
125
- ```ts
126
- import { Authon, AuthonMfaRequiredError } from '@authon/js';
127
-
128
- try {
129
- await authon.signInWithEmail('user@example.com', 'password');
130
- } catch (err) {
131
- if (err instanceof AuthonMfaRequiredError) {
132
- // 사용자에게 TOTP 코드를 입력받아 인증
133
- const user = await authon.verifyMfa(err.mfaToken, '123456');
134
- }
135
- }
136
-
137
- // 이벤트 리스너 방식으로도 처리 가능
138
- authon.on('mfaRequired', async (mfaToken) => {
139
- const code = prompt('Enter your 2FA code');
140
- if (code) await authon.verifyMfa(mfaToken, code);
141
- });
62
+ const user = authon.getUser();
63
+ const token = authon.getToken();
142
64
  ```
143
65
 
144
- ### MFA 관리
66
+ ### 로그인 모달 열기
145
67
 
146
68
  ```ts
147
- // MFA 상태 조회
148
- const status = await authon.getMfaStatus();
149
- // status.enabled, status.backupCodesRemaining
150
-
151
- // MFA 비활성화 (현재 TOTP 코드 필요)
152
- await authon.disableMfa('123456');
153
-
154
- // 복구 코드 재생성 (현재 TOTP 코드 필요)
155
- const newCodes = await authon.regenerateBackupCodes('123456');
69
+ await authon.openSignIn();
70
+ await authon.openSignUp();
156
71
  ```
157
72
 
158
- ### QR 코드 생성기
159
-
160
- SDK에는 외부 의존성 없이 QR 코드 SVG를 생성하는 기능이 내장되어 있습니다.
73
+ ### 로그아웃
161
74
 
162
75
  ```ts
163
- import { generateQrSvg } from '@authon/js';
164
-
165
- const svg = generateQrSvg('otpauth://totp/MyApp:user@example.com?secret=JBSWY3DPEHPK3PXP&issuer=MyApp');
166
- document.getElementById('qr')!.innerHTML = svg;
76
+ await authon.signOut();
167
77
  ```
168
78
 
169
- ### MFA API 레퍼런스
170
-
171
- | 메서드 | 반환값 | 설명 |
172
- |--------|---------|-------------|
173
- | `setupMfa()` | `Promise<MfaSetupResponse & { qrCodeSvg: string }>` | MFA 설정 시작, 시크릿 및 QR 코드 반환 |
174
- | `verifyMfaSetup(code)` | `Promise<void>` | TOTP 코드 검증으로 설정 완료 |
175
- | `verifyMfa(mfaToken, code)` | `Promise<AuthonUser>` | 로그인 중 TOTP 코드 검증 |
176
- | `disableMfa(code)` | `Promise<void>` | MFA 비활성화 |
177
- | `getMfaStatus()` | `Promise<MfaStatus>` | 현재 MFA 상태 조회 |
178
- | `regenerateBackupCodes(code)` | `Promise<string[]>` | 복구 코드 재생성 |
179
-
180
- ## ShadowDOM 모달
79
+ ## 환경 변수
181
80
 
182
- 로그인 모달은 ShadowRoot 내부에 렌더링되어 애플리케이션의 CSS와 충돌하지 않습니다. 브랜딩(색상, 로고, 테두리 반경, 커스텀 CSS)은 Authon 프로젝트 설정에서 불러오며 `appearance` 설정으로 덮어쓸 수 있습니다.
81
+ | 변수 | 필수 | 설명 |
82
+ |------|------|------|
83
+ | `AUTHON_API_URL` | Yes | Authon 서버 URL |
84
+ | `AUTHON_PUBLISHABLE_KEY` | Yes | 프로젝트 퍼블리셔블 키 |
183
85
 
184
- ## 문서
86
+ ## 비교
185
87
 
186
- [authon.dev/docs](https://authon.dev/docs)
88
+ | 기능 | Authon | Clerk | Auth.js |
89
+ |------|--------|-------|---------|
90
+ | 셀프 호스팅 | Yes | No | 부분적 |
91
+ | 가격 | 무료 | $25/월+ | 무료 |
92
+ | OAuth 프로바이더 | 10+ | 20+ | 80+ |
93
+ | ShadowDOM 모달 | Yes | No | No |
94
+ | MFA/패스키 | Yes | Yes | 플러그인 |
95
+ | Web3 인증 | Yes | No | No |
187
96
 
188
97
  ## 라이선스
189
98
 
190
- [MIT](../../LICENSE)
99
+ MIT