zdp-auth-ui

ZDP의 공통 인증 UI 패키지다.

이 저장소는 Astro 공개 사이트, SvelteKit 앱 셸, Tauri Svelte 셸에서 반복되는 로그인, 회원가입, 계정 복구, 패스키, OAuth provider 선택 화면을 같은 기준으로 묶는다.

현재 범위

• 로그인, 회원가입, 계정 복구, 패스키, provider 선택 UI 컴포넌트
• Korean/English active message catalog
• 12개 target locale 계획 계약
• zdp-design-system 기반 form, button, focus, surface 소비
• passkey browser ceremony helper boundary
• dist 기반 public package export와 소비 계약 검사

현재 제외

• 실제 로그인 서버
• session 발급
• refresh token 저장
• OAuth provider secret
• passkey challenge 생성과 검증
• 계정 DB 접근
• 권한, 이용권, 동의, 감사 로그의 최종 판단

Locale 계획

초기 active locale은 아래 2개다.

ko, en

완성 단계에서 추가할 planned locale은 아래 10개다.

zh, es, fr, hi, ja, vi, ru, id, ms, th

최종 target locale은 아래 12개다.

en, zh, es, fr, hi, ko, ja, vi, ru, id, ms, th

패키지 표면

<script lang="ts">
  import {
    AuthShell,
    PasswordField,
    ProviderButton,
    getAuthMessages
  } from 'zdp-auth-ui';

  const messages = getAuthMessages('ko');
</script>

<AuthShell locale="ko" mode="login" providers={[{ id: 'passkey', label: messages.providers.passkey }]}>
  <PasswordField
    id="password"
    name="password"
    label={messages.fields.password}
    autocomplete="current-password"
  />
</AuthShell>

공통 CSS는 앱의 전역 CSS entry에서 불러온다.

import 'zdp-auth-ui/styles.css';

zdp-auth-ui의 root Svelte compiler/type condition, JavaScript import, CSS entry는 모두 dist/ 산출물을 가리킨다. 순수 TypeScript subpath인 ./i18n, ./contract도 dist/*.d.ts와 dist/*.js를 사용한다. bun run build는 Vite library bundle을 만든 뒤 dist/styles.css, dist/index.d.ts, dist/i18n.d.ts, dist/contract.d.ts를 생성한다. 소비 앱은 src/ deep import를 쓰지 않고, npm clean consumer도 package source를 다시 컴파일하지 않는다. examples/clean-consumer/AuthUiCleanConsumer.svelte는 package root import, message-keyed provider labels, password label/help/error override, submit/provider/mode callbacks만 쓰는 최소 소비 fixture다.

경계

zdp-auth-ui는 화면 구조와 사용자가 누르는 표면만 제공한다. 실제 인증, 세션, 패스키 challenge, OAuth callback, 이메일 인증, 계정 생성, 추천 코드 적용은 zdp-core-platform과 API 계약이 소유한다.

소비 앱은 이 패키지에서 발생한 submit/provider/passkey 선택을 받아 자기 API 클라이언트나 SDK에 연결한다. 이 패키지는 fetch, cookie, localStorage, sessionStorage, DB, provider secret을 직접 다루지 않는다.

AuthShell은 submit callback이 있거나 명시적인 action이 없으면 브라우저 기본 form 제출을 막는다. 명시적인 native form fallback도 password가 URL과 로그에 남지 않도록 POST만 허용하고, required 같은 브라우저 constraint validation을 그대로 유지한다. 회원가입 화면에 referralCode를 넘기면 submit detail과 POST hidden field에만 포함하고, 이 패키지는 추천 코드 검증·보상·저장을 하지 않는다.

rodi-site-template-svelte에서 반영한 후보

• @simplewebauthn/browser: passkey 브라우저 ceremony helper 후보로 도입했다. 서버 검증과 credential 저장은 이 저장소가 소유하지 않는다.
• zdp-design-system: 인증 화면의 시각 기준이며 npm package range ^0.46.4로 소비한다.

better-auth, drizzle-orm, @libsql/client, server captcha, cookie consent, sitemap, markdown renderer는 인증 UI 패키지에 넣지 않는다.

검증

bun run build
bun run check

build는 npm package에 들어갈 dist surface를 만들고, check는 package export, locale 계약, service boundary, auth UI source boundary, clean consumer fixture, Svelte compile surface, 금지 dependency를 함께 확인한다.

이 저장소가 private 상태이면 GitHub Actions hosted runner가 account billing 또는 spending limit 상태 때문에 job 시작 전에 막힐 수 있다. 이 경우 실패한 Actions run은 코드 검증 실패가 아니라 CI 실행 환경 gate로 본다. 현재 package 변경 검증 증거는 workspace root에서 실행한 mf run zdp_auth_ui_build, mf run zdp_auth_ui_check, mf run zdp_auth_ui_npm_pack_dry_run receipt를 우선한다.

GitHub Actions CI는 zdp-auth-ui만 checkout하고 published zdp-design-system npm package를 bun install --frozen-lockfile로 해결한다. 그 다음 auth UI bun run build, bun run check를 실행한다.

디자인 시스템 검사는 버전이나 integrity를 검사 코드에 복사하지 않는다. package.json의 caret range, bun.lock registry tuple과 SHA-512 digest, node_modules의 실제 설치 버전을 순서대로 대조한다.