테스팅

테스팅 모드 & Dev Teleport

Name: Authon
Author: Authon

E2E 테스트나 개발 환경에서 OAuth 팝업 없이 즉시 로그인할 수 있습니다. 테스트 키(pk_test_)로 SDK를 초기화하면 Dev Teleport가 자동 활성화됩니다.

작동 방식

Authon 대시보드에서 프로젝트의 테스트 API 키(pk_test_...)를 발급합니다.

개발 환경에서 SDK를 pk_test_ 키로 초기화합니다.

로그인 모달 하단에 Dev Teleport 영역이 자동으로 나타납니다. 이메일을 입력하고 Go를 클릭하면 OAuth 없이 즉시 로그인됩니다.

Dev Teleport는 pk_test_ 키에서만 동작합니다. pk_live_ 키에서는 Dev Teleport UI가 보이지 않으며, API 엔드포인트도 응답하지 않습니다. 프로덕션에서는 절대 작동하지 않습니다.

SDK 사용법

pk_test_ 키로 초기화하면 로그인 모달에 Dev Teleport가 자동 표시됩니다. 별도 설정이 필요 없습니다.

개발 환경 설정

import { Authon } from '@authon/js';

// Use pk_test_ key for development
const authon = new Authon(
  'pk_test_your_test_key_here',
  { theme: 'dark' }
);

// Open the login modal — Dev Teleport appears automatically
await authon.openSignIn();

프로그래밍 방식 사용

모달 UI 없이 코드에서 직접 테스트 로그인을 수행할 수도 있습니다.

testing.signIn()

const authon = new Authon('pk_test_xxx', { theme: 'dark' });

// testing is only available with pk_test_ keys
// With pk_live_ keys, authon.testing is undefined
const user = await authon.testing?.signIn({
  email: 'test@example.com',
  nickname: 'Tester'  // optional
});

console.log(user); // { id, email, displayName, ... }

해당 이메일의 유저가 프로젝트에 없으면 자동으로 생성됩니다. 이미 존재하면 기존 유저로 토큰이 발급됩니다.

E2E 테스트 연동

Playwright, Cypress 등 E2E 테스트 프레임워크에서 OAuth 팝업을 우회하고 즉시 인증된 상태로 테스트할 수 있습니다.

tests/auth.setup.ts

import { test } from '@playwright/test';

const API_URL = 'https:0
const TEST_KEY = 'pk_test_your_test_key_here';

test.beforeEach(async ({ page }) => {
  1
  const res = await fetch(6, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': TEST_KEY,
    },
    body: JSON.stringify({ email: 'e2e@test.com' }),
  });
  const { accessToken } = await res.json();

  2
  await page.goto('http://localhost:3000');
  await page.evaluate((token) => {
    localStorage.setItem('authon_token', token);
  }, accessToken);

  // 3. Reload to pick up the auth state
  await page.reload();
});

test('authenticated page works', async ({ page }) => {
  // Already logged in — test your app directly
  await page.goto('/dashboard');
  await page.waitForSelector('[data-testid="user-avatar"]');
});

API 레퍼런스

POST/v1/auth/testing/token

테스트 유저로 즉시 인증 토큰을 발급합니다. pk_test_ 키 전용입니다.

요청 헤더

x-api-key

pk_test_로 시작하는 Publishable Key

요청 본문

json

{
  "email": "test@example.com",
  "nickname": "Tester"          // optional
}

응답

json

{
  "accessToken": "eyJ...",
  "refreshToken": "rt_...",
  "expiresIn": 900,
  "user": {
    "id": "uuid",
    "email": "test@example.com",
    "displayName": "Tester",
    "emailVerified": true
  }
}

pk_live_ 키로 이 엔드포인트를 호출하면 400 에러가 반환됩니다. 테스트 키는 Authon 대시보드 > 프로젝트 > API Keys에서 발급할 수 있습니다.

환경 변수 설정

개발 환경과 프로덕션 환경에서 다른 키를 사용하도록 환경 변수를 분리하세요.

.env.development

# Development — Dev Teleport enabled
VITE_AUTHON_KEY=pk_test_your_test_key_here

이렇게 하면 코드 변경 없이 환경에 따라 Dev Teleport가 자동으로 켜지거나 꺼집니다.