@authon/js 0.4.0 → 0.4.2

package/README.ko.md

@@ -23,9 +23,7 @@ npm install @authon/js
   <script type="module">
     import { Authon } from '@authon/js';
 
-    const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY', {
-      apiUrl: 'https://your-authon-server.com',
-    });
+    const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY');
 
     document.getElementById('sign-in-btn').addEventListener('click', () => {
       authon.openSignIn();
@@ -80,7 +78,6 @@ await authon.signOut();
 
 | 변수 | 필수 | 설명 |
 |------|------|------|
-| `AUTHON_API_URL` | Yes | Authon 서버 URL |
 | `AUTHON_PUBLISHABLE_KEY` | Yes | 프로젝트 퍼블리셔블 키 |
 
 ## 비교

package/README.md

@@ -2,7 +2,7 @@
 
 # @authon/js
 
-> Drop-in browser authentication SDK — self-hosted Clerk alternative, Auth0 alternative, open-source auth
+> Drop-in browser authentication SDK — Auth0 alternative, open-source auth
 
 [![npm version](https://img.shields.io/npm/v/@authon/js?color=6d28d9)](https://www.npmjs.com/package/@authon/js)
 [![License](https://img.shields.io/badge/license-MIT-blue)](../../LICENSE)
@@ -16,8 +16,8 @@ Before installing the SDK, create an Authon project and get your API keys:
    - 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_...` or `pk_test_...`) — safe to use in client-side code
-   - **Secret Key** (`sk_live_...` or `sk_test_...`) — server-side only, never expose to clients
+   - **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
@@ -45,9 +45,7 @@ npm install @authon/js
   <script type="module">
     import { Authon } from '@authon/js';
 
-    const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY', {
-      apiUrl: 'https://your-authon-server.com',
-    });
+    const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY');
 
     document.getElementById('sign-in-btn').addEventListener('click', () => {
       authon.openSignIn();
@@ -69,9 +67,7 @@ npm install @authon/js
 ```ts
 import { Authon } from '@authon/js';
 
-const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY', {
-  apiUrl: 'https://your-authon-server.com',
-});
+const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY');
 
 // Opens popup, falls back to redirect if blocked
 await authon.signInWithOAuth('google');
@@ -88,9 +84,7 @@ await authon.signInWithOAuth('google', { flowMode: 'redirect' });
 ```ts
 import { Authon } from '@authon/js';
 
-const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY', {
-  apiUrl: 'https://your-authon-server.com',
-});
+const authon = new Authon('pk_live_YOUR_PUBLISHABLE_KEY');
 
 // Sign up
 const user = await authon.signUpWithEmail('user@example.com', 'MyP@ssw0rd', {
@@ -181,8 +175,8 @@ authon.on('tokenRefreshed', (token) => { /* update API client */ });
 
 | Variable | Required | Description |
 |----------|----------|-------------|
-| `AUTHON_API_URL` | Yes | Your Authon server URL (e.g. `https://your-authon-server.com`) |
 | `AUTHON_PUBLISHABLE_KEY` | Yes | Project publishable key (`pk_live_...` or `pk_test_...`) |
+| `AUTHON_API_URL` | No | Optional — defaults to `api.authon.dev` |
 
 ## API Reference
 
@@ -280,7 +274,6 @@ new Authon(publishableKey: string, config?: AuthonConfig)
 
 | Feature | Authon | Clerk | Auth.js |
 |---------|--------|-------|---------|
-| Self-hosted | Yes | No | Partial |
 | Pricing | Free | $25/mo+ | Free |
 | OAuth providers | 10+ | 20+ | 80+ |
 | ShadowDOM modal | Yes | No | No |

package/dist/index.cjs

@@ -155,11 +155,16 @@ var ModalRenderer = class {
   turnstileWidgetId = null;
   turnstileToken = "";
   turnstileWrapper = null;
+  // Dev Teleport (test mode)
+  isTestMode = false;
+  onDevTeleport = null;
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
     this.branding = { ...DEFAULT_BRANDING, ...options.branding };
     this.captchaSiteKey = options.captchaSiteKey || "";
+    this.isTestMode = options.isTestMode || false;
+    this.onDevTeleport = options.onDevTeleport || null;
     this.onProviderClick = options.onProviderClick;
     this.onEmailSubmit = options.onEmailSubmit;
     this.onClose = options.onClose;
@@ -445,7 +450,8 @@ var ModalRenderer = class {
               <span>${config.label}</span>
             </button>`;
     }).join("") : "";
-    const divider = showProviders && b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
+    const hasVisibleProviders = showProviders && this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).length > 0;
+    const divider = hasVisibleProviders && b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
     const emailForm = b.showEmailPassword !== false ? `<form class="email-form" id="email-form">
           <input type="email" placeholder="Email address" name="email" required class="input" autocomplete="email" />
           <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
@@ -503,6 +509,16 @@ var ModalRenderer = class {
       ${authMethods}
       <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
       ${footer}
+      ${this.isTestMode ? `<div class="dev-teleport">
+        <div class="dev-teleport-label">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+          Dev Teleport
+        </div>
+        <div class="dev-teleport-row">
+          <input type="email" placeholder="test@example.com" id="dev-teleport-email" class="dev-teleport-input" value="dev@test.com" />
+          <button type="button" id="dev-teleport-btn" class="dev-teleport-btn">Go</button>
+        </div>
+      </div>` : ""}
       ${b.showSecuredBy !== false ? `<div class="secured-by">Secured by <a href="https://authon.dev" target="_blank" rel="noopener noreferrer" class="secured-link">Authon</a></div>` : ""}
     `;
   }
@@ -679,6 +695,34 @@ var ModalRenderer = class {
       .secured-link { font-weight: 600; color: var(--authon-muted); text-decoration: none; }
       .secured-link:hover { text-decoration: underline; }
 
+      /* Dev Teleport */
+      .dev-teleport {
+        margin-top: 12px; padding: 10px;
+        border-radius: calc(var(--authon-radius) * 0.5);
+        background: rgba(251,191,36,0.06);
+        border: 1px dashed rgba(251,191,36,0.25);
+      }
+      .dev-teleport-label {
+        display: flex; align-items: center; gap: 4px;
+        font-size: 10px; font-weight: 600; color: #fbbf24;
+        margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em;
+      }
+      .dev-teleport-row { display: flex; gap: 6px; }
+      .dev-teleport-input {
+        flex: 1; padding: 6px 10px; font-size: 12px;
+        border-radius: calc(var(--authon-radius) * 0.4);
+        background: rgba(0,0,0,0.2); border: 1px solid rgba(251,191,36,0.2);
+        color: #fbbf24; outline: none; font-family: ui-monospace, monospace;
+      }
+      .dev-teleport-input:focus { border-color: rgba(251,191,36,0.5); }
+      .dev-teleport-btn {
+        padding: 6px 14px; font-size: 11px; font-weight: 700;
+        border-radius: calc(var(--authon-radius) * 0.4);
+        background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.3);
+        color: #fbbf24; cursor: pointer;
+      }
+      .dev-teleport-btn:hover { background: rgba(251,191,36,0.25); }
+
       /* Auth method buttons */
       .auth-methods { display: flex; flex-direction: column; gap: 8px; }
       .auth-method-btn {
@@ -1124,6 +1168,21 @@ var ModalRenderer = class {
       });
     }
     this.renderTurnstile();
+    const devTeleportBtn = this.shadowRoot.getElementById("dev-teleport-btn");
+    const devTeleportEmail = this.shadowRoot.getElementById("dev-teleport-email");
+    if (devTeleportBtn && devTeleportEmail && this.onDevTeleport) {
+      const handler = this.onDevTeleport;
+      devTeleportBtn.addEventListener("click", () => {
+        const email = devTeleportEmail.value.trim();
+        if (email) handler(email);
+      });
+      devTeleportEmail.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          const email = devTeleportEmail.value.trim();
+          if (email) handler(email);
+        }
+      });
+    }
     const backBtn = this.shadowRoot.getElementById("back-btn");
     if (backBtn) {
       backBtn.addEventListener("click", () => {
@@ -2078,6 +2137,17 @@ var Authon = class {
         containerId: this.config.containerId,
         branding: this.branding || void 0,
         captchaSiteKey: this.captchaEnabled ? this.turnstileSiteKey : void 0,
+        isTestMode: this.publishableKey.startsWith("pk_test_"),
+        onDevTeleport: this.publishableKey.startsWith("pk_test_") ? async (email) => {
+          this.modal?.clearError();
+          try {
+            await this.testing.signIn({ email });
+            this.modal?.close();
+          } catch (err) {
+            const msg = err instanceof Error ? err.message : String(err);
+            this.modal?.showError(msg || "Dev teleport failed");
+          }
+        } : void 0,
         onProviderClick: (provider) => this.startOAuthFlow(provider),
         onEmailSubmit: (email, password, isSignUp) => {
           this.modal?.clearError();