@authon/react-native 0.3.3 → 0.3.4

package/README.ko.md

@@ -2,13 +2,7 @@
 
 # @authon/react-native
 
-[Authon](https://authon.dev)용 React Native SDK입니다. 아래 기능을 제공합니다.
-
-- 앱 전역 인증 상태를 위한 `AuthonProvider`
-- `useAuthon()`, `useUser()` 훅
-- storage adapter 기반 보안 토큰 저장
-- `SocialButton`, `SocialButtons`
-- 저수준 OAuth 헬퍼(`startOAuth`, `completeOAuth`, `client`)
+> React Native 모바일 인증 -- 보안 토큰 저장 -- 셀프 호스팅 Clerk 대안
 
 ## 설치
 
@@ -17,13 +11,10 @@ npm install @authon/react-native react-native-svg
 npx expo install expo-secure-store expo-web-browser
 ```
 
-Expo 앱에서는 `expo-secure-store`를 권장합니다.  
-`expo-web-browser`는 필수는 아니지만, Android에서 더 안정적인 OAuth UX가 필요하면 함께 설치하는 편이 좋습니다.
-
-## 설정
+## 빠른 시작
 
 ```tsx
-import { AuthonProvider } from '@authon/react-native';
+import { AuthonProvider, useAuthon } from '@authon/react-native';
 import * as SecureStore from 'expo-secure-store';
 
 const storage = {
@@ -35,218 +26,43 @@ const storage = {
 export default function App() {
   return (
     <AuthonProvider publishableKey="pk_live_..." storage={storage}>
-      <Navigation />
+      <HomeScreen />
     </AuthonProvider>
   );
 }
 ```
 
-storage adapter를 넣지 않으면 토큰은 메모리에만 남고 앱 재시작 시 사라집니다.
-
-## 훅
-
-### `useAuthon()`
-
-```ts
-const {
-  isLoaded,
-  isSignedIn,
-  userId,
-  accessToken,
-  user,
-  signIn,
-  signUp,
-  signOut,
-  getToken,
-  providers,
-  branding,
-  startOAuth,
-  completeOAuth,
-  on,
-  client,
-} = useAuthon();
-```
-
-### `useUser()`
-
-```ts
-const { isLoaded, isSignedIn, user } = useUser();
-```
-
-## 이메일 / 비밀번호 예제
-
-```tsx
-import { useState } from 'react';
-import { View, TextInput, Button, Text, ActivityIndicator } from 'react-native';
-import { useAuthon, useUser } from '@authon/react-native';
-
-export function LoginScreen() {
-  const { isLoaded } = useUser();
-  const { signIn, signOut, user, isSignedIn } = useAuthon();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSignIn = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      await signIn({ strategy: 'email_password', email, password });
-    } catch (err: any) {
-      setError(err.message ?? '로그인에 실패했습니다.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (!isLoaded) return <ActivityIndicator />;
-
-  if (isSignedIn) {
-    return (
-      <View style={{ padding: 24, gap: 12 }}>
-        <Text>Welcome, {user?.displayName ?? user?.email}</Text>
-        <Button title="로그아웃" onPress={signOut} />
-      </View>
-    );
-  }
-
-  return (
-    <View style={{ padding: 24, gap: 12 }}>
-      <TextInput placeholder="Email" value={email} onChangeText={setEmail} autoCapitalize="none" />
-      <TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
-      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
-      <Button title={loading ? '로그인 중...' : '로그인'} onPress={handleSignIn} disabled={loading} />
-    </View>
-  );
-}
-```
+## 주요 작업
 
-## 소셜 버튼
+### 이메일 로그인
 
 ```tsx
-import { SocialButtons } from '@authon/react-native';
-
-export function SocialLoginSection() {
-  return (
-    <SocialButtons
-      onSuccess={() => console.log('Signed in')}
-      onError={(error) => console.error(error)}
-    />
-  );
-}
+const { signIn } = useAuthon();
+await signIn({ strategy: 'email_password', email, password });
 ```
 
-완전히 커스텀한 버튼이 필요하면 `SocialButton`을 직접 쓰거나 `startOAuth()` / `completeOAuth()`를 수동으로 호출하면 됩니다.
-
-## 수동 OAuth 플로우
-
-가장 단순한 SDK 플로우는 아래와 같습니다.
+### OAuth 로그인
 
 ```tsx
-import { Linking } from 'react-native';
-import { useAuthon } from '@authon/react-native';
-
-export function GoogleButton() {
-  const { startOAuth, completeOAuth } = useAuthon();
-
-  const handlePress = async () => {
-    const { url, state } = await startOAuth('google');
-    await Linking.openURL(url);
-    await completeOAuth(state);
-  };
-
-  // ...
-}
+const { startOAuth, completeOAuth } = useAuthon();
+const { url, state } = await startOAuth('google');
+await Linking.openURL(url);
+await completeOAuth(state);
 ```
 
-이 방식은 가장 단순하지만, 브라우저 주도형이고 완료 감지는 polling 기반입니다.
-
-## 권장 Expo OAuth 플로우
-
-Android에서 더 자연스러운 브라우저 종료 UX가 필요하면 `flow=redirect`와 `returnTo`를 포함해 OAuth URL을 직접 요청하고 `expo-web-browser`로 여는 방식을 권장합니다.
+### 로그아웃
 
 ```tsx
-import * as WebBrowser from 'expo-web-browser';
-import { Button } from 'react-native';
-import { useAuthon } from '@authon/react-native';
-
-const API_URL = 'https://api.authon.dev';
-const PUBLISHABLE_KEY = 'pk_live_...';
-const APP_DEEP_LINK = 'myapp://oauth-callback';
-const RETURN_TO = 'https://auth.example.com/authon/mobile-callback';
-
-async function requestOAuthUrl(provider: 'google') {
-  const params = new URLSearchParams({
-    redirectUri: `${API_URL}/v1/auth/oauth/redirect`,
-    flow: 'redirect',
-    returnTo: RETURN_TO,
-  });
-
-  const response = await fetch(
-    `${API_URL}/v1/auth/oauth/${provider}/url?${params.toString()}`,
-    { headers: { 'x-api-key': PUBLISHABLE_KEY } },
-  );
-
-  if (!response.ok) {
-    throw new Error(await response.text());
-  }
-
-  return response.json() as Promise<{ url: string; state: string }>;
-}
-
-export function GoogleButton() {
-  const { completeOAuth, getToken } = useAuthon();
-
-  const handlePress = async () => {
-    const { url, state } = await requestOAuthUrl('google');
-    const pollPromise = completeOAuth(state);
-
-    await WebBrowser.openAuthSessionAsync(url, APP_DEEP_LINK);
-    await pollPromise;
-
-    const authonAccessToken = getToken();
-    // 앱이 자체 백엔드 세션도 가진다면 여기서 authonAccessToken을 교환하세요.
-  };
-
-  return <Button title="Google로 계속하기" onPress={handlePress} />;
-}
-```
-
-HTTPS 브리지 페이지 예제:
-
-```html
-<!doctype html>
-<html>
-  <body>
-    <script>
-      const params = new URLSearchParams(window.location.search);
-      const state = params.get('authon_oauth_state');
-      const error = params.get('authon_oauth_error');
-
-      const target = new URL('myapp://oauth-callback');
-      if (state) target.searchParams.set('state', state);
-      if (error) target.searchParams.set('error', error);
-
-      window.location.replace(target.toString());
-    </script>
-  </body>
-</html>
+const { signOut } = useAuthon();
+await signOut();
 ```
 
-## 중요한 주의사항
-
-- `myapp://...`를 OAuth 제공자 redirect URI로 직접 등록하지 마세요. 제공자 redirect URI는 항상 `{apiUrl}/v1/auth/oauth/redirect`여야 합니다.
-- 앱 복귀용 브리지는 `returnTo`에 넣습니다. `returnTo`는 HTTPS URL이어야 하며, 해당 origin은 `ALLOWED_REDIRECT_ORIGINS`에 포함돼야 합니다.
-- 커스텀 앱 스킴을 쓸 경우 HTTPS 브리지 페이지에서 `myapp://...`로 한 번 더 넘기세요.
-- Android에서는 이미 열린 Custom Tab을 `dismissAuthSession()`으로 확실하게 닫을 수 없습니다. `openAuthSessionAsync()`와 브리지 체인을 기준으로 설계하세요.
-- 앱이 자체 백엔드 세션도 운영한다면 `completeOAuth()` 직후 `getToken()`을 백엔드에 넘겨 자체 세션을 발급받으세요.
-
-## 문서
+## 환경 변수
 
-- [Authon docs](https://authon.dev/docs)
-- [Authon OAuth flow](https://authon.dev/docs)
+| 변수 | 필수 | 설명 |
+|------|------|------|
+| `AUTHON_PUBLISHABLE_KEY` | Yes | 퍼블리셔블 키 |
 
 ## 라이선스
 
-[MIT](../../LICENSE)
+MIT

package/README.md

@@ -2,13 +2,28 @@
 
 # @authon/react-native
 
-React Native SDK for [Authon](https://authon.dev). It provides:
+> Drop-in React Native authentication with secure token storage — Auth0 alternative
 
-- `AuthonProvider` for app-wide auth state
-- `useAuthon()` and `useUser()` hooks
-- secure token persistence through a storage adapter
-- `SocialButton` / `SocialButtons`
-- low-level OAuth helpers (`startOAuth`, `completeOAuth`, `client`)
+[![npm version](https://img.shields.io/npm/v/@authon/react-native?color=6d28d9)](https://www.npmjs.com/package/@authon/react-native)
+[![License](https://img.shields.io/badge/license-MIT-blue)](../../LICENSE)
+
+## Prerequisites
+
+Before installing the SDK, create an Authon project and get your API keys:
+
+1. **Create a project** at [Authon Dashboard](https://authon.dev/dashboard/overview)
+   - Click "Create Project" and enter your app name
+   - Select the authentication methods you want (Email/Password, OAuth providers, etc.)
+
+2. **Get your API keys** from Project Settings → API Keys
+   - **Publishable Key** (`pk_live_...`) — use in your frontend code
+   - **Test Key** (`pk_test_...`) — for development, enables Dev Teleport
+
+3. **Configure OAuth providers** (optional) in Project Settings → OAuth
+   - Add Google, Apple, GitHub, etc. with their respective Client ID and Secret
+   - Set the redirect URL to `https://api.authon.dev/v1/auth/oauth/redirect`
+
+> **Test vs Live keys:** Use `pk_test_...` during development. Switch to `pk_live_...` before deploying to production. Test keys use a sandbox environment with no rate limits.
 
 ## Install
 
@@ -17,13 +32,13 @@ npm install @authon/react-native react-native-svg
 npx expo install expo-secure-store expo-web-browser
 ```
 
-`expo-secure-store` is the recommended storage adapter for Expo apps.
-`expo-web-browser` is optional but recommended when you want a more controlled OAuth flow in Expo.
-
-## Setup
+## Quick Start
 
 ```tsx
-import { AuthonProvider } from '@authon/react-native';
+// App.tsx — complete working file
+import React, { useState } from 'react';
+import { View, Text, Button, TextInput, ActivityIndicator } from 'react-native';
+import { AuthonProvider, useAuthon, useUser } from '@authon/react-native';
 import * as SecureStore from 'expo-secure-store';
 
 const storage = {
@@ -32,81 +47,18 @@ const storage = {
   removeItem: (key: string) => SecureStore.deleteItemAsync(key),
 };
 
-export default function App() {
-  return (
-    <AuthonProvider publishableKey="pk_live_..." storage={storage}>
-      <Navigation />
-    </AuthonProvider>
-  );
-}
-```
-
-Without a storage adapter, tokens remain in memory only.
-
-## Hooks
-
-### `useAuthon()`
-
-```ts
-const {
-  isLoaded,
-  isSignedIn,
-  userId,
-  accessToken,
-  user,
-  signIn,
-  signUp,
-  signOut,
-  getToken,
-  providers,
-  branding,
-  startOAuth,
-  completeOAuth,
-  on,
-  client,
-} = useAuthon();
-```
-
-### `useUser()`
-
-```ts
-const { isLoaded, isSignedIn, user } = useUser();
-```
-
-## Email / Password Example
-
-```tsx
-import { useState } from 'react';
-import { View, TextInput, Button, Text, ActivityIndicator } from 'react-native';
-import { useAuthon, useUser } from '@authon/react-native';
-
-export function LoginScreen() {
-  const { isLoaded } = useUser();
-  const { signIn, signOut, user, isSignedIn } = useAuthon();
+function HomeScreen() {
+  const { isLoaded, isSignedIn, user, signIn, signOut } = useAuthon();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSignIn = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      await signIn({ strategy: 'email_password', email, password });
-    } catch (err: any) {
-      setError(err.message ?? 'Sign-in failed');
-    } finally {
-      setLoading(false);
-    }
-  };
 
   if (!isLoaded) return <ActivityIndicator />;
 
   if (isSignedIn) {
     return (
-      <View style={{ padding: 24, gap: 12 }}>
+      <View style={{ padding: 24 }}>
         <Text>Welcome, {user?.displayName ?? user?.email}</Text>
-        <Button title="Sign out" onPress={signOut} />
+        <Button title="Sign Out" onPress={signOut} />
       </View>
     );
   }
@@ -115,39 +67,32 @@ export function LoginScreen() {
     <View style={{ padding: 24, gap: 12 }}>
       <TextInput placeholder="Email" value={email} onChangeText={setEmail} autoCapitalize="none" />
       <TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
-      {error ? <Text style={{ color: 'red' }}>{error}</Text> : null}
-      <Button title={loading ? 'Signing in...' : 'Sign in'} onPress={handleSignIn} disabled={loading} />
+      <Button title="Sign In" onPress={() => signIn({ strategy: 'email_password', email, password })} />
     </View>
   );
 }
-```
 
-## Social Buttons
-
-```tsx
-import { SocialButtons } from '@authon/react-native';
-
-export function SocialLoginSection() {
+export default function App() {
   return (
-    <SocialButtons
-      onSuccess={() => console.log('Signed in')}
-      onError={(error) => console.error(error)}
-    />
+    <AuthonProvider
+      publishableKey="pk_live_YOUR_PUBLISHABLE_KEY"
+      storage={storage}
+    >
+      <HomeScreen />
+    </AuthonProvider>
   );
 }
 ```
 
-For fully custom buttons, use `SocialButton` or call `startOAuth()` / `completeOAuth()` yourself.
+## Common Tasks
 
-## Manual OAuth Flow
-
-The basic SDK flow looks like this:
+### Add Google OAuth Login
 
 ```tsx
 import { Linking } from 'react-native';
 import { useAuthon } from '@authon/react-native';
 
-export function GoogleButton() {
+function GoogleButton() {
   const { startOAuth, completeOAuth } = useAuthon();
 
   const handlePress = async () => {
@@ -156,97 +101,97 @@ export function GoogleButton() {
     await completeOAuth(state);
   };
 
-  // ...
+  return <Button title="Sign in with Google" onPress={handlePress} />;
 }
 ```
 
-This is the simplest option, but it is browser-driven and completion is polling-based.
-
-## Recommended Expo OAuth Flow
-
-If you want a cleaner Android experience with `expo-web-browser`, request the OAuth URL manually with `flow=redirect` and `returnTo`.
+### Add Google OAuth (Expo recommended)
 
 ```tsx
 import * as WebBrowser from 'expo-web-browser';
-import { Button } from 'react-native';
 import { useAuthon } from '@authon/react-native';
 
-const API_URL = 'https://api.authon.dev';
-const PUBLISHABLE_KEY = 'pk_live_...';
-const APP_DEEP_LINK = 'myapp://oauth-callback';
-const RETURN_TO = 'https://auth.example.com/authon/mobile-callback';
-
-async function requestOAuthUrl(provider: 'google') {
-  const params = new URLSearchParams({
-    redirectUri: `${API_URL}/v1/auth/oauth/redirect`,
-    flow: 'redirect',
-    returnTo: RETURN_TO,
-  });
-
-  const response = await fetch(
-    `${API_URL}/v1/auth/oauth/${provider}/url?${params.toString()}`,
-    { headers: { 'x-api-key': PUBLISHABLE_KEY } },
-  );
+function GoogleButton() {
+  const { startOAuth, completeOAuth } = useAuthon();
 
-  if (!response.ok) {
-    throw new Error(await response.text());
-  }
+  const handlePress = async () => {
+    const { url, state } = await startOAuth('google', {
+      flow: 'redirect',
+      returnTo: 'https://your-domain.com/mobile-callback',
+    });
+    const pollPromise = completeOAuth(state);
+    await WebBrowser.openAuthSessionAsync(url, 'myapp://oauth-callback');
+    await pollPromise;
+  };
 
-  return response.json() as Promise<{ url: string; state: string }>;
+  return <Button title="Sign in with Google" onPress={handlePress} />;
 }
+```
 
-export function GoogleButton() {
-  const { completeOAuth, getToken } = useAuthon();
+### Get Current User
 
-  const handlePress = async () => {
-    const { url, state } = await requestOAuthUrl('google');
-    const pollPromise = completeOAuth(state);
+```tsx
+import { useUser } from '@authon/react-native';
 
-    await WebBrowser.openAuthSessionAsync(url, APP_DEEP_LINK);
-    await pollPromise;
+function Profile() {
+  const { isLoaded, isSignedIn, user } = useUser();
+  if (!isLoaded) return <ActivityIndicator />;
+  if (!isSignedIn) return <Text>Not signed in</Text>;
+  return <Text>Email: {user?.email}</Text>;
+}
+```
 
-    const authonAccessToken = getToken();
-    // If your app also has its own backend session, exchange authonAccessToken here.
-  };
+### Add Email/Password Auth
 
-  return <Button title="Continue with Google" onPress={handlePress} />;
-}
+```tsx
+const { signIn } = useAuthon();
+await signIn({ strategy: 'email_password', email: 'user@example.com', password: 'MyP@ssw0rd' });
 ```
 
-Example HTTPS bridge page:
-
-```html
-<!doctype html>
-<html>
-  <body>
-    <script>
-      const params = new URLSearchParams(window.location.search);
-      const state = params.get('authon_oauth_state');
-      const error = params.get('authon_oauth_error');
-
-      const target = new URL('myapp://oauth-callback');
-      if (state) target.searchParams.set('state', state);
-      if (error) target.searchParams.set('error', error);
-
-      window.location.replace(target.toString());
-    </script>
-  </body>
-</html>
+### Handle Sign Out
+
+```tsx
+const { signOut } = useAuthon();
+await signOut();
 ```
 
-## Important Notes
+## Environment Variables
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `AUTHON_PUBLISHABLE_KEY` | Yes | Project publishable key (`pk_live_...` or `pk_test_...`) |
+| `AUTHON_API_URL` | No | Optional — defaults to `api.authon.dev` |
+
+## API Reference
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `<AuthonProvider>` | Provider with `publishableKey`, `apiUrl`, `storage` |
+| `<SocialButtons>` | Renders all enabled OAuth provider buttons |
+| `<SocialButton>` | Single OAuth provider button with icon |
+
+### Hooks
 
-- Do not register `myapp://...` directly as the provider redirect URI. Keep provider redirect URIs on `{apiUrl}/v1/auth/oauth/redirect`.
-- Use `returnTo` for your app callback bridge. `returnTo` should be an HTTPS URL you control, and its origin must be listed in `ALLOWED_REDIRECT_ORIGINS`.
-- If you need a custom app scheme, let the HTTPS bridge page redirect into `myapp://...`.
-- On Android, `dismissAuthSession()` cannot reliably close an already-open Custom Tab. Plan your flow around `openAuthSessionAsync()` and a proper bridge.
-- If your mobile app also maintains its own backend session, exchange `getToken()` with your backend immediately after `completeOAuth()`.
+| Hook | Returns |
+|------|---------|
+| `useAuthon()` | `{ isLoaded, isSignedIn, user, signIn, signUp, signOut, getToken, providers, branding, startOAuth, completeOAuth, on, client }` |
+| `useUser()` | `{ isLoaded, isSignedIn, user }` |
+| `useAuthonWeb3()` | Web3 wallet auth |
+| `useAuthonPasswordless()` | OTP and magic link |
+| `useAuthonPasskeys()` | Passkey registration and auth |
 
-## Docs
+## Comparison
 
-- [Authon docs](https://authon.dev/docs)
-- [Authon OAuth flow](https://authon.dev/docs)
+| Feature | Authon | Clerk | Auth0 |
+|---------|--------|-------|-------|
+| Pricing | Free | $25/mo+ | $23/mo+ |
+| React Native | Yes | Yes | Yes |
+| Secure token storage | Yes | Yes | Yes |
+| Web3 auth | Yes | No | No |
+| MFA/Passkeys | Yes | Yes | Yes |
 
 ## License
 
-[MIT](../../LICENSE)
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authon/react-native",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Authon React Native SDK — mobile authentication",
   "type": "module",
   "main": "./dist/index.cjs",