@infoteam/account-web 0.0.0-stage → 0.6.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 GSA Infoteam
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,78 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @infoteam/account-web
+
+인포팀 계정(IdP) 로그인을 웹 앱에 붙인다. 특정 프레임워크에 의존하지 않는다. React 앱이라면 [`@infoteam/account-react`](../react)를 쓴다.
+
+## 설치
+
+```bash
+pnpm add @infoteam/account-web zod
+```
+
+## 사용
+
+```ts
+import { createAccountClient } from '@infoteam/account-web';
+
+// 라우터보다 먼저 만든다. callback 으로 열린 페이지면 여기서 주소를 로그인 전 위치로 바꾼다
+const account = createAccountClient({ issuer: 'production', clientId, api: apiUrl });
+
+await account.ready(); // callback 이면 백엔드 로그인을 마치고, 아니면 세션을 복구한다
+account.store.subscribe((state) => render(state));
+
+// 로그인 버튼
+await account.login({ returnTo: location.pathname });
+
+// 라우터 guard
+await account.requireAuth({ returnTo: nextUrl });
+
+// API 요청. 401 이면 토큰을 갱신한 뒤 다시 보낸다
+await account.fetch(`${apiUrl}/me`);
+```
+
+- 상태는 zustand의 vanilla store(`account.store`)에 있으므로, 어느 프레임워크에서든 구독할 수 있다.
+- API 요청에는 `account.fetch`, `@infoteam/account-web/openapi-fetch`, `@infoteam/account-web/axios` 중 하나를 쓴다.
+- 옵션, guard, 에러 코드, 로그아웃은 React와 같다. [`account-react` README](../react/README.md#사용)를 참고한다.
+
+## 백엔드 형식이 다를 때
+
+`api`는 백엔드가 [세션 프로토콜](../../README.md#세션-프로토콜)을 구현했다고 가정한다. 형식이 다르면 `api` 대신 `session`에 백엔드 호출을 직접
+구현해서 넘긴다. 둘 중 하나만 줄 수 있다.
+
+```ts
+import { createAccountClient, type Session } from '@infoteam/account-web';
+
+const session: Session = {
+  async start(credential) {
+    if ('ticket' in credential) throw new Error('this backend does not reject logins');
+    const res = await fetch(`${apiUrl}/oauth/callback`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        code: credential.code,
+        verifier: credential.codeVerifier,
+        redirectUri: credential.redirectUri,
+        nonce: credential.nonce,
+      }),
+    });
+    if (!res.ok) throw new Error(`login failed: ${res.status}`);
+    const { token } = await res.json();
+    return { tokens: { accessToken: token } };
+  },
+  async refresh() {
+    const res = await fetch(`${apiUrl}/token`, { method: 'POST', credentials: 'include' });
+    if (res.status === 401) return null; // 세션 없음
+    if (!res.ok) throw new Error(`refresh failed: ${res.status}`);
+    return { accessToken: (await res.json()).token };
+  },
+  async end() {
+    await fetch(`${apiUrl}/signout`, { method: 'POST', credentials: 'include' });
+  },
+};
+
+const account = createAccountClient({ issuer: 'production', clientId, session });
+```
+
+- `start`는 callback으로 받은 code, PKCE verifier, `redirectUri`, `nonce`를 받는다. 백엔드는 code를 교환할 때 이 `redirectUri`를 그대로 쓰고, id_token의 `nonce`를 확인해야 한다.
+- 로그인 전에 추가 입력을 받으려면 `start`가 `{ rejected: { error, ticket } }`를 돌려준다. 그러면 `retryLogin(body)`가 `start({ ticket }, body)`로 다시 부른다.
+- `refresh`는 세션이 없으면 `null`을 돌려준다. 다른 실패는 throw 한다.

package/dist/axios.d.ts

@@ -0,0 +1,6 @@
+import { t as AccountClient } from "./create-account-client-MB6AawN9.js";
+import { AxiosInstance } from "axios";
+//#region src/adapters/axios.d.ts
+/** 401이면 refresh 한 뒤 한 번 다시 시도한다. 돌려주는 함수를 부르면 interceptor를 제거한다. */
+export declare function attachAccount(instance: AxiosInstance, client: AccountClient): () => void;
+//#endregion

package/dist/axios.js

@@ -0,0 +1,28 @@
+import { AUTHORIZATION_HEADER, bearer, isUnauthorized, readBearer } from "@infoteam/account-core";
+//#region src/adapters/axios.ts
+/** 401이면 refresh 한 뒤 한 번 다시 시도한다. 돌려주는 함수를 부르면 interceptor를 제거한다. */
+function attachAccount(instance, client) {
+	const retried = /* @__PURE__ */ new WeakSet();
+	const request = instance.interceptors.request.use(async (config) => {
+		await client.ready();
+		const token = client.getAccessToken();
+		if (token) config.headers.set(AUTHORIZATION_HEADER, bearer(token));
+		return config;
+	});
+	const response = instance.interceptors.response.use(void 0, async (error) => {
+		const config = error.config;
+		if (!isUnauthorized(error.response?.status) || !config || retried.has(config)) throw error;
+		const stale = readBearer(String(config.headers.get(AUTHORIZATION_HEADER) ?? ""));
+		const token = await client.refresh(stale);
+		if (!token) throw error;
+		retried.add(config);
+		config.headers.set(AUTHORIZATION_HEADER, bearer(token));
+		return instance.request(config);
+	});
+	return () => {
+		instance.interceptors.request.eject(request);
+		instance.interceptors.response.eject(response);
+	};
+}
+//#endregion
+export { attachAccount };

package/dist/create-account-client-MB6AawN9.d.ts

@@ -0,0 +1,139 @@
+import { AccountError, Fetch, IssuerInput, Prompt } from "@infoteam/account-core";
+import * as z from "zod/mini";
+import { StoreApi } from "zustand/vanilla";
+//#region src/client/account-state.d.ts
+/** client가 세션 복구를 시도하기 전까지는 `loading`이다. */
+type AccountStatus = 'loading' | 'authenticated' | 'unauthenticated';
+interface AccountState {
+  status: AccountStatus;
+  /** 메모리에만 두고, 새로고침하면 세션 refresh로 복구한다. */
+  accessToken: string | null;
+  error: AccountError | null;
+  canRetryLogin: boolean;
+}
+//#endregion
+//#region src/session/session-adapter.d.ts
+type LoginCredential = {
+  code: string;
+  codeVerifier: string;
+  redirectUri: string;
+  nonce: string;
+  iss: string | undefined;
+} | {
+  ticket: string;
+};
+interface SessionTokens {
+  accessToken: string;
+  expiresIn?: number | undefined;
+}
+/** code는 한 번만 교환할 수 있어서, 재시도할 때는 백엔드가 이미 확인한 사용자를 담은 ticket을 쓴다. */
+interface SessionRejection {
+  error: AccountError;
+  ticket: string | undefined;
+}
+interface SessionPaths {
+  login?: string;
+  refresh?: string;
+  logout?: string;
+}
+interface Session {
+  start(credential: LoginCredential, body?: unknown): Promise<{
+    tokens: SessionTokens;
+  } | {
+    rejected: SessionRejection;
+  }>;
+  refresh(): Promise<SessionTokens | null>;
+  end(accessToken: string | null): Promise<void>;
+}
+//#endregion
+//#region src/client/options.d.ts
+declare const AccountClientOptionsSchema: z.ZodMiniObject<{
+  issuer: z.ZodMiniCustom<IssuerInput, IssuerInput>;
+  clientId: z.ZodMiniString<string>;
+  api: z.ZodMiniOptional<z.ZodMiniUnion<readonly [z.ZodMiniString<string>, z.ZodMiniObject<{
+    baseUrl: z.ZodMiniString<string>;
+    paths: z.ZodMiniOptional<z.ZodMiniObject<{
+      login: z.ZodMiniOptional<z.ZodMiniString<string>>;
+      refresh: z.ZodMiniOptional<z.ZodMiniString<string>>;
+      logout: z.ZodMiniOptional<z.ZodMiniString<string>>;
+    }, z.core.$strip>>;
+  }, z.core.$strip>]>>;
+  session: z.ZodMiniOptional<z.ZodMiniCustom<Session, Session>>;
+  redirectUri: z.ZodMiniOptional<z.ZodMiniString<string>>;
+  scopes: z.ZodMiniOptional<z.ZodMiniArray<z.ZodMiniEnum<{
+    email: "email";
+    profile: "profile";
+    name: "name";
+    picture: "picture";
+    phone_number: "phone_number";
+    student_id: "student_id";
+  }>>>;
+  silentLogin: z.ZodMiniOptional<z.ZodMiniBoolean<boolean>>;
+  fetch: z.ZodMiniOptional<z.ZodMiniCustom<typeof fetch, typeof fetch>>;
+  transactionStorage: z.ZodMiniOptional<z.ZodMiniCustom<Storage, Storage>>;
+  redirect: z.ZodMiniOptional<z.ZodMiniCustom<(url: string) => void, (url: string) => void>>;
+}, z.core.$strip>;
+type AccountClientOptions = z.input<typeof AccountClientOptionsSchema>;
+//#endregion
+//#region src/client/create-account-client.d.ts
+interface LoginOptions {
+  /** 다른 origin을 가리키면 버린다. */
+  returnTo?: string;
+  prompt?: Prompt;
+}
+interface LogoutOptions {
+  /** IdP 로그인 세션도 끝낸다. 공용 PC처럼 다음 사람이 같은 IdP 계정으로 자동 로그인되면 안 될 때 쓴다. */
+  idp?: boolean;
+  /** `idp: true`일 때만 쓴다. 같은 origin이어야 한다. */
+  returnTo?: string;
+}
+interface RequireAuthOptions {
+  /**
+   * 생략하면 현재 페이지를 쓰는데, 라우터 guard에서는 현재 페이지가 아직 이전 페이지다. 이동하려는 대상을 넘긴다.
+   * TanStack Router에서는 `location.href`, React Router에서는 `request.url`이 그 대상이다.
+   */
+  returnTo?: string;
+}
+interface AccountClient {
+  readonly store: StoreApi<AccountState>;
+  getAccessToken(): string | null;
+  /** 여러 번 불러도 초기화는 한 번만 한다. 실패해도 에러를 던지지 않고 `store`의 `error`에 남긴다. */
+  ready(): Promise<void>;
+  /** callback을 처리하거나 자동 로그인을 시도하는 중인지 알려 준다. 곧 떠날 화면이 깜빡이지 않게 가릴 때 쓴다. */
+  isHandlingRedirect(): boolean;
+  /**
+   * 세션이 없으면 사용자를 IdP로 보내고 끝나지 않는 Promise를 돌려줘서, 라우터가 이동 중 화면을 유지하게 한다.
+   *
+   * @throws {@link AccountError} 이 페이지의 callback이 실패했으면 그 에러를 던진다. 다시 IdP로 보내면 취소한 사용자가
+   * 빠져나갈 수 없게 되므로, 라우터의 에러 화면에서 `error.code`로 경우를 나눈다.
+   */
+  requireAuth(options?: RequireAuthOptions): Promise<void>;
+  /**
+   * `logout({ idp: false })`는 IdP 로그인 세션을 남기므로, 로그아웃 뒤 첫 로그인에는 `prompt=login`을 붙여
+   * 사용자가 계정을 바꿀 수 있게 한다.
+   */
+  login(options?: LoginOptions): Promise<void>;
+  /**
+   * `session_rejected`로 거절된 로그인을 body를 더해 다시 보낸다. 거절 응답의 ticket을 쓰므로 IdP를 다시
+   * 거치지 않는다.
+   */
+  retryLogin(body: unknown): Promise<void>;
+  /**
+   * 어차피 로컬에서는 로그아웃되므로 서버 쪽 실패는 조용히 넘긴다. IdP가 로그아웃을 지원하지 않으면 `idp: true`여도
+   * 서비스 세션만 끝낸다.
+   */
+  logout(options?: LogoutOptions): Promise<void>;
+  /** `staleToken`을 다른 호출이 이미 교체했다면 다시 refresh 하지 않고 그 새 토큰을 돌려준다. */
+  refresh(staleToken?: string | null): Promise<string | null>;
+  /** access token을 보내고, 401이면 refresh 한 뒤 한 번 다시 시도하는 `fetch`다. */
+  fetch: Fetch;
+}
+/**
+ * client를 라우터보다 먼저 만들어야 한다. 페이지가 callback으로 열렸으면 만드는 즉시 주소를 로그인 전 위치로 바꾸는데,
+ * 라우터는 만들어질 때 주소를 읽기 때문이다.
+ *
+ * @throws {@link AccountError} 옵션이 없거나 비어 있으면 `invalid_request`를 던진다.
+ */
+declare function createAccountClient(input: AccountClientOptions): AccountClient;
+//#endregion
+export { createAccountClient as a, LoginCredential as c, SessionRejection as d, SessionTokens as f, RequireAuthOptions as i, Session as l, AccountStatus as m, LoginOptions as n, AccountClientOptions as o, AccountState as p, LogoutOptions as r, AccountClientOptionsSchema as s, AccountClient as t, SessionPaths as u };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { a as createAccountClient, c as LoginCredential, d as SessionRejection, f as SessionTokens, i as RequireAuthOptions, l as Session, m as AccountStatus, n as LoginOptions, o as AccountClientOptions, p as AccountState, r as LogoutOptions, s as AccountClientOptionsSchema, t as AccountClient, u as SessionPaths } from "./create-account-client-MB6AawN9.js";
+import { AccountError, AccountErrorCode, ClientScope, Environment, IssuerInput, Prompt } from "@infoteam/account-core";
+export { type AccountClient, type AccountClientOptions, AccountClientOptionsSchema, AccountError, type AccountErrorCode, type AccountState, type AccountStatus, type ClientScope, type Environment, type IssuerInput, type LoginCredential, type LoginOptions, type LogoutOptions, type Prompt, type RequireAuthOptions, type Session, type SessionPaths, type SessionRejection, type SessionTokens, createAccountClient };

package/dist/index.js

@@ -0,0 +1,447 @@
+import { AUTHORIZATION_CODE_TTL_MS, AUTHORIZATION_HEADER, AccountError, AccountError as AccountError$1, CALLBACK_PATH, ClientScopeSchema, OPENID_SCOPE, SESSION_PATHS, SESSION_REJECTED, STORAGE_NAMESPACE, ScopeSchema, SessionTokensResponseSchema, bearer, createAuthorization, createLogoutUrl, discover, fetchClientRegistration, isAuthFailure, isCallbackUrl, isUnauthorized, parseCallback, readCallbackState } from "@infoteam/account-core";
+import { Mutex, attempt, attemptAsync, isFunction, isPlainObject, isString, trimEnd } from "es-toolkit";
+import * as z from "zod/mini";
+import { createStore } from "zustand/vanilla";
+//#region src/session/session-adapter.ts
+const SessionTokensSchema = z.pipe(SessionTokensResponseSchema, z.transform((raw) => ({
+	accessToken: raw.access_token,
+	expiresIn: raw.expires_in
+})));
+//#endregion
+//#region src/client/options.ts
+const nonEmpty = () => z.string().check(z.minLength(1));
+const SessionPathsSchema = z.object({
+	login: z.optional(nonEmpty()),
+	refresh: z.optional(nonEmpty()),
+	logout: z.optional(nonEmpty())
+});
+const isSession = (value) => typeof value === "object" && value !== null && [
+	"start",
+	"refresh",
+	"end"
+].every((key) => isFunction(Reflect.get(value, key)));
+const AccountClientOptionsSchema = z.object({
+	/** `'production'`, `'staging'`, 또는 다른 account-be 배포의 `https:` API origin이다. */
+	issuer: z.custom((value) => isString(value) && value.length > 0),
+	clientId: nonEmpty(),
+	/**
+	* [세션 프로토콜](../../README.md#세션-프로토콜)을 구현한 백엔드의 origin이나 `/api` 같은 기본 경로다. endpoint 경로가
+	* 다르면 `{ baseUrl, paths }`로 준다. `session`과 함께 줄 수 없다.
+	*/
+	api: z.optional(z.union([nonEmpty(), z.object({
+		baseUrl: nonEmpty(),
+		paths: z.optional(SessionPathsSchema)
+	})])),
+	/** 백엔드가 세션 프로토콜과 다른 형식이면 백엔드 호출을 직접 구현해서 준다. `api`와 함께 줄 수 없다. */
+	session: z.optional(z.custom(isSession)),
+	/** 기본값은 `/auth/callback`이다. client가 이 URL을 라우터보다 먼저 처리하므로 라우트를 만들지 않는다. */
+	redirectUri: z.optional(nonEmpty()),
+	/**
+	* 생략하면 IdP에 등록한 필수 scope와 선택 scope를 모두 요청한다. `openid`는 서비스 백엔드가 id_token으로
+	* 사용자를 확인하므로 항상 함께 요청한다.
+	*/
+	scopes: z.optional(z.array(ClientScopeSchema)),
+	/**
+	* 세션이 없으면 IdP에 `prompt=none`으로 한 번 다녀온다. 탭마다 한 번만 시도하고, 로그아웃한 뒤에는 시도하지
+	* 않는다.
+	*/
+	silentLogin: z.optional(z.boolean()),
+	fetch: z.optional(z.custom(isFunction)),
+	transactionStorage: z.optional(z.custom()),
+	redirect: z.optional(z.custom(isFunction))
+}).check(z.refine((options) => options.api === void 0 !== (options.session === void 0), { message: "give exactly one of api or session" }));
+//#endregion
+//#region src/session/request.ts
+function createRequester(baseUrl, fetch) {
+	const base = trimEnd(baseUrl, "/");
+	return async ({ path, accessToken, body }) => {
+		const headers = new Headers({ accept: "application/json" });
+		if (accessToken) headers.set(AUTHORIZATION_HEADER, bearer(accessToken));
+		if (body !== void 0) headers.set("content-type", "application/json");
+		const [error, response] = await attemptAsync(() => (fetch ?? globalThis.fetch)(`${base}${path}`, {
+			method: "POST",
+			headers,
+			body: body === void 0 ? void 0 : JSON.stringify(body),
+			credentials: "include"
+		}));
+		if (!response) throw new AccountError$1("network_error", {
+			description: `POST ${path}`,
+			cause: error
+		});
+		return response;
+	};
+}
+async function readTokens(response, path) {
+	const [, body] = await attemptAsync(() => response.json());
+	if (!response.ok) throw new AccountError$1(response.status >= 500 ? "server_error" : "unknown", {
+		description: `POST ${path}`,
+		status: response.status,
+		details: body
+	});
+	const parsed = SessionTokensSchema.safeParse(body);
+	if (!parsed.success) throw new AccountError$1("server_error", {
+		description: `POST ${path}: ${z.prettifyError(parsed.error)}`,
+		cause: parsed.error
+	});
+	return parsed.data;
+}
+//#endregion
+//#region src/session/api-session.ts
+const RejectionSchema = z.looseObject({
+	ticket: z.optional(z.string()),
+	details: z.optional(z.unknown())
+});
+function apiSession(baseUrl, paths, fetch) {
+	const request = createRequester(baseUrl, fetch);
+	const { login, refresh, logout } = {
+		...SESSION_PATHS,
+		...paths
+	};
+	return {
+		async start(credential, body) {
+			const extra = isPlainObject(body) ? body : {};
+			const protocol = "ticket" in credential ? { ticket: credential.ticket } : {
+				code: credential.code,
+				code_verifier: credential.codeVerifier,
+				redirect_uri: credential.redirectUri,
+				nonce: credential.nonce,
+				iss: credential.iss
+			};
+			const response = await request({
+				path: login,
+				body: {
+					...extra,
+					...protocol,
+					transport: "cookie"
+				}
+			});
+			if (response.status !== 403) return { tokens: await readTokens(response, login) };
+			const [, raw] = await attemptAsync(() => response.json());
+			const rejection = RejectionSchema.safeParse(raw);
+			return { rejected: {
+				error: new AccountError$1(SESSION_REJECTED, {
+					description: `POST ${login}`,
+					status: response.status,
+					details: rejection.success ? rejection.data.details : raw
+				}),
+				ticket: rejection.success ? rejection.data.ticket : void 0
+			} };
+		},
+		async refresh() {
+			const response = await request({ path: refresh });
+			if (isAuthFailure(response.status)) return null;
+			return readTokens(response, refresh);
+		},
+		async end(accessToken) {
+			await request({
+				path: logout,
+				accessToken: accessToken ?? void 0
+			});
+		}
+	};
+}
+//#endregion
+//#region src/storage/keys.ts
+const STORAGE_KEYS = {
+	transactionPrefix: `${STORAGE_NAMESPACE}:tx:`,
+	loggedOut: `${STORAGE_NAMESPACE}:logged-out`,
+	silentLoginTried: `${STORAGE_NAMESPACE}:silent-login-tried`,
+	logoutPrefix: `${STORAGE_NAMESPACE}:logout:`
+};
+//#endregion
+//#region src/storage/transactions.ts
+const PREFIX = STORAGE_KEYS.transactionPrefix;
+const StoredTransactionSchema = z.object({
+	state: z.string(),
+	codeVerifier: z.string(),
+	nonce: z.optional(z.string()),
+	redirectUri: z.string(),
+	scopes: z.array(ScopeSchema),
+	createdAt: z.number(),
+	returnTo: z.optional(z.string()),
+	silent: z.optional(z.boolean())
+});
+/** `state`를 키로 저장해야 여러 탭에서 동시에 로그인을 시작해도 서로의 verifier를 덮어쓰지 않는다. */
+function saveTransaction(storage, transaction, extra = {}) {
+	pruneExpired(storage);
+	const stored = {
+		...transaction,
+		...extra
+	};
+	storage.setItem(PREFIX + transaction.state, JSON.stringify(stored));
+}
+function takeTransaction(storage, state) {
+	if (!state) return null;
+	const raw = storage.getItem(PREFIX + state);
+	storage.removeItem(PREFIX + state);
+	if (!raw) return null;
+	const parsed = StoredTransactionSchema.safeParse(safeJson(raw));
+	if (!parsed.success || parsed.data.state !== state || isExpired(parsed.data)) return null;
+	return parsed.data;
+}
+function pruneExpired(storage) {
+	for (let i = storage.length - 1; i >= 0; i--) {
+		const key = storage.key(i);
+		if (!key?.startsWith(PREFIX)) continue;
+		const parsed = StoredTransactionSchema.safeParse(safeJson(storage.getItem(key)));
+		if (!parsed.success || isExpired(parsed.data)) storage.removeItem(key);
+	}
+}
+function isExpired(transaction) {
+	return Date.now() - transaction.createdAt > AUTHORIZATION_CODE_TTL_MS;
+}
+function safeJson(raw) {
+	if (raw === null) return void 0;
+	const [, value] = attempt(() => JSON.parse(raw));
+	return value;
+}
+//#endregion
+//#region src/client/create-account-client.ts
+/**
+* client를 라우터보다 먼저 만들어야 한다. 페이지가 callback으로 열렸으면 만드는 즉시 주소를 로그인 전 위치로 바꾸는데,
+* 라우터는 만들어질 때 주소를 읽기 때문이다.
+*
+* @throws {@link AccountError} 옵션이 없거나 비어 있으면 `invalid_request`를 던진다.
+*/
+function createAccountClient(input) {
+	const parsed = AccountClientOptionsSchema.safeParse(input);
+	if (!parsed.success) throw new AccountError$1("invalid_request", { description: `createAccountClient options: ${z.prettifyError(parsed.error)}` });
+	const options = parsed.data;
+	const { clientId, fetch } = options;
+	const session = options.session ?? sessionFromApi(options.api, fetch);
+	const transactions = options.transactionStorage ?? globalThis.sessionStorage;
+	const redirect = options.redirect ?? ((url) => window.location.assign(url));
+	const metadata = () => discover(options.issuer, { fetch });
+	const redirectUri = () => new URL(options.redirectUri ?? CALLBACK_PATH, window.location.origin).toString();
+	let registeredScopes;
+	const scopes = async () => {
+		if (options.scopes) return options.scopes;
+		registeredScopes ??= metadata().then((current) => fetchClientRegistration(current, clientId, { fetch })).then(({ scopes: required, optionalScopes }) => [...required, ...optionalScopes]);
+		return registeredScopes.catch((error) => {
+			registeredScopes = void 0;
+			throw error;
+		});
+	};
+	const store = createStore(() => ({
+		status: "loading",
+		accessToken: null,
+		error: null,
+		canRetryLogin: false
+	}));
+	const refreshMutex = new Mutex();
+	const callback = takeCallback(redirectUri(), transactions);
+	const trySilentLogin = options.silentLogin === true && callback === null && transactions.getItem(STORAGE_KEYS.silentLoginTried) === null && localStorage.getItem(STORAGE_KEYS.loggedOut) === null;
+	let callbackError = null;
+	let rejection = null;
+	let initializing;
+	let settled = false;
+	const authenticate = (accessToken) => {
+		rejection = null;
+		callbackError = null;
+		store.setState({
+			status: "authenticated",
+			accessToken,
+			error: null,
+			canRetryLogin: false
+		});
+	};
+	const unauthenticate = (error = null) => {
+		store.setState({
+			status: "unauthenticated",
+			accessToken: null,
+			error,
+			canRetryLogin: rejection?.ticket !== void 0
+		});
+	};
+	const startSession = async (credential, body) => {
+		const result = await session.start(credential, body);
+		if ("rejected" in result) {
+			rejection = result.rejected;
+			throw result.rejected.error;
+		}
+		localStorage.removeItem(STORAGE_KEYS.loggedOut);
+		authenticate(result.tokens.accessToken);
+	};
+	const finishCallback = async ({ url, transaction }) => {
+		try {
+			const params = parseCallback(await metadata(), url, {
+				clientId,
+				state: transaction?.state
+			});
+			if (!transaction?.nonce) throw new AccountError$1("state_mismatch");
+			const { codeVerifier, redirectUri: sentRedirectUri, nonce } = transaction;
+			await startSession({
+				code: params.code,
+				codeVerifier,
+				redirectUri: sentRedirectUri,
+				nonce,
+				iss: params.iss
+			});
+		} catch (error) {
+			const accountError = toAccountError(error);
+			if (transaction?.silent && SILENT_LOGIN_FAILURES.has(accountError.code)) {
+				unauthenticate();
+				return;
+			}
+			callbackError = accountError;
+			unauthenticate(callbackError);
+		}
+	};
+	const authorize = async (returnTo, prompt, silent) => {
+		const loggedOut = localStorage.getItem(STORAGE_KEYS.loggedOut) !== null;
+		const { url, transaction } = await createAuthorization(await metadata(), {
+			clientId,
+			redirectUri: redirectUri(),
+			scopes: [OPENID_SCOPE, ...await scopes()],
+			prompt: prompt ?? (loggedOut ? "login" : void 0)
+		});
+		saveTransaction(transactions, transaction, {
+			returnTo: sameOriginPath(returnTo),
+			silent
+		});
+		redirect(url);
+	};
+	const restoreSession = async () => {
+		try {
+			const tokens = await session.refresh();
+			if (tokens) return authenticate(tokens.accessToken);
+			if (trySilentLogin) {
+				transactions.setItem(STORAGE_KEYS.silentLoginTried, "1");
+				await authorize(window.location.href, "none", true);
+				return new Promise(() => void 0);
+			}
+			unauthenticate();
+		} catch (error) {
+			unauthenticate(toAccountError(error));
+		}
+	};
+	const client = {
+		store,
+		getAccessToken() {
+			return store.getState().accessToken;
+		},
+		ready() {
+			initializing ??= (callback ? finishCallback(callback) : restoreSession()).finally(() => {
+				settled = true;
+			});
+			return initializing;
+		},
+		isHandlingRedirect() {
+			return !settled && (callback !== null || trySilentLogin);
+		},
+		async requireAuth({ returnTo } = {}) {
+			await client.ready();
+			if (store.getState().status === "authenticated") return;
+			if (callbackError) throw callbackError;
+			await client.login({ returnTo });
+			return new Promise(() => void 0);
+		},
+		async login({ returnTo = window.location.href, prompt } = {}) {
+			await authorize(returnTo, prompt, false);
+		},
+		async retryLogin(body) {
+			if (rejection?.ticket === void 0) throw new AccountError$1("unauthenticated", { description: "no login to retry" });
+			try {
+				await startSession({ ticket: rejection.ticket }, body);
+			} catch (error) {
+				unauthenticate(toAccountError(error));
+				throw error;
+			}
+		},
+		async logout({ idp = false, returnTo = "/" } = {}) {
+			const { accessToken } = store.getState();
+			rejection = null;
+			localStorage.setItem(STORAGE_KEYS.loggedOut, "1");
+			unauthenticate();
+			await session.end(accessToken).catch(() => void 0);
+			if (!idp) return;
+			const logout = createLogoutUrl(await metadata(), {
+				clientId,
+				postLogoutRedirectUri: redirectUri()
+			});
+			if (!logout) return;
+			transactions.setItem(STORAGE_KEYS.logoutPrefix + logout.state, sameOriginPath(returnTo) ?? "/");
+			redirect(logout.url);
+		},
+		async refresh(staleToken = store.getState().accessToken) {
+			await refreshMutex.acquire();
+			try {
+				const { accessToken } = store.getState();
+				if (accessToken && accessToken !== staleToken) return accessToken;
+				const tokens = await session.refresh();
+				if (!tokens) {
+					unauthenticate();
+					return null;
+				}
+				authenticate(tokens.accessToken);
+				return tokens.accessToken;
+			} catch (error) {
+				unauthenticate(toAccountError(error));
+				return null;
+			} finally {
+				refreshMutex.release();
+			}
+		},
+		async fetch(input, init) {
+			await client.ready();
+			const send = (token) => {
+				const headers = new Headers(init?.headers ?? (input instanceof Request ? input.headers : void 0));
+				if (token) headers.set(AUTHORIZATION_HEADER, bearer(token));
+				const request = input instanceof Request ? input.clone() : input;
+				return (fetch ?? globalThis.fetch)(request, {
+					...init,
+					headers
+				});
+			};
+			const token = client.getAccessToken();
+			const response = await send(token);
+			if (!isUnauthorized(response.status)) return response;
+			const refreshed = await client.refresh(token);
+			return refreshed ? send(refreshed) : response;
+		}
+	};
+	return client;
+}
+function sessionFromApi(api, fetch) {
+	const { baseUrl, paths = {} } = isString(api) ? { baseUrl: api } : api;
+	return apiSession(baseUrl, paths, fetch);
+}
+/** 사용자가 직접 로그인하면 되는 자동 로그인 실패 코드다. 에러로 알리지 않는다. */
+const SILENT_LOGIN_FAILURES = /* @__PURE__ */ new Set([
+	"login_required",
+	"consent_required",
+	"interaction_required"
+]);
+/**
+* 동기로 처리해야 한다. 라우터가 만들어지기 전에 주소가 바뀌어 있어야 라우터가 callback 주소를 라우팅하지 않는다.
+* 같은 이유로 돌아갈 위치가 든 트랜잭션도 미리 꺼낸다.
+*/
+function takeCallback(redirectUri, transactions) {
+	const url = window.location.href;
+	if (new URL(url).pathname !== new URL(redirectUri).pathname) return null;
+	const logoutKey = STORAGE_KEYS.logoutPrefix + readCallbackState(url);
+	const afterLogout = transactions.getItem(logoutKey);
+	if (afterLogout !== null && !isCallbackUrl(url)) {
+		transactions.removeItem(logoutKey);
+		window.history.replaceState(null, "", afterLogout);
+		return null;
+	}
+	if (!isCallbackUrl(url)) return null;
+	const transaction = takeTransaction(transactions, readCallbackState(url));
+	window.history.replaceState(null, "", transaction?.returnTo ?? "/");
+	return {
+		url,
+		transaction
+	};
+}
+/** 로그인 뒤 사용자를 다른 사이트로 보내지 않도록 다른 origin은 버린다. */
+function sameOriginPath(value) {
+	const [, url] = attempt(() => new URL(value, window.location.origin));
+	if (url?.origin !== window.location.origin) return void 0;
+	return url.pathname + url.search + url.hash;
+}
+function toAccountError(error) {
+	return AccountError$1.is(error) ? error : new AccountError$1("unknown", { cause: error });
+}
+//#endregion
+export { AccountClientOptionsSchema, AccountError, createAccountClient };

package/dist/openapi-fetch.d.ts

@@ -0,0 +1,9 @@
+import { t as AccountClient } from "./create-account-client-MB6AawN9.js";
+import { Middleware } from "openapi-fetch";
+//#region src/adapters/openapi-fetch.d.ts
+/**
+ * 401이면 refresh 한 뒤 한 번 다시 시도한다. 재시도는 middleware를 거치지 않는 `options.fetch`로 보내므로
+ * 무한히 반복되지 않는다.
+ */
+export declare function createAccountMiddleware(client: AccountClient): Middleware;
+//#endregion

package/dist/openapi-fetch.js

@@ -0,0 +1,27 @@
+import { AUTHORIZATION_HEADER, bearer, isUnauthorized, readBearer } from "@infoteam/account-core";
+//#region src/adapters/openapi-fetch.ts
+/**
+* 401이면 refresh 한 뒤 한 번 다시 시도한다. 재시도는 middleware를 거치지 않는 `options.fetch`로 보내므로
+* 무한히 반복되지 않는다.
+*/
+function createAccountMiddleware(client) {
+	return {
+		async onRequest({ request }) {
+			await client.ready();
+			const token = client.getAccessToken();
+			if (token) request.headers.set(AUTHORIZATION_HEADER, bearer(token));
+			return request;
+		},
+		async onResponse({ request, response, options }) {
+			if (!isUnauthorized(response.status)) return response;
+			const stale = readBearer(request.headers.get(AUTHORIZATION_HEADER));
+			const token = await client.refresh(stale);
+			if (!token) return response;
+			const retry = new Request(request);
+			retry.headers.set(AUTHORIZATION_HEADER, bearer(token));
+			return options.fetch(retry);
+		}
+	};
+}
+//#endregion
+export { createAccountMiddleware };

package/package.json

@@ -1,6 +1,58 @@
 {
   "name": "@infoteam/account-web",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.6.1",
+  "description": "Browser client for the Infoteam account IdP: sign-in redirect, callback handling and service sessions",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gsainfoteam/account-sdk.git",
+    "directory": "packages/web"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": "./dist/index.js",
+    "./openapi-fetch": "./dist/openapi-fetch.js",
+    "./axios": "./dist/axios.js",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@infoteam/account-core": "^0.6.1",
+    "es-toolkit": "^1.52.0",
+    "zustand": "^5.0.15"
+  },
+  "peerDependencies": {
+    "axios": "^1.0.0",
+    "openapi-fetch": ">=0.13.0",
+    "zod": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "axios": {
+      "optional": true
+    },
+    "openapi-fetch": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "axios": "^1.20.0",
+    "happy-dom": "^20.14.5",
+    "openapi-fetch": "^0.17.0",
+    "tsdown": "^0.23.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.3",
+    "zod": "^4.6.5"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run"
+  }
 }