@sayren/mcp 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sayren/mcp",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "bin": {
     "sayren-mcp": "./dist/index.mjs"
@@ -12,8 +12,8 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.22.0",
     "zod": "^4.6.5",
-    "@sayren/store-sdk": "^0.4.0",
-    "@sayren/storefront-sdk": "^0.5.0"
+    "@sayren/store-sdk": "^0.5.0",
+    "@sayren/storefront-sdk": "^0.6.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.14",

package/template/.template-meta.json

@@ -7,8 +7,8 @@
     "zod": "^4.6.5"
   },
   "versions": {
-    "@sayren/store-sdk": "0.4.0",
-    "@sayren/storefront-sdk": "0.5.0",
+    "@sayren/store-sdk": "0.5.0",
+    "@sayren/storefront-sdk": "0.6.0",
     "@sayren/ui": "0.1.0"
   }
 }

package/template/app/lib/social-login.server.ts

@@ -0,0 +1,38 @@
+import { createCookie } from "react-router";
+
+/**
+ * 소셜 로그인 왕복 상태 — 공급자로 보내기 전에 만든 state·PKCE verifier·돌아갈 곳을 HttpOnly 쿠키에 잠깐 둔다.
+ * 돌아오면 state를 비교하고 verifier로 1회용 code를 토큰으로 바꾼 뒤 지운다. 10분이 지나면 사라진다.
+ */
+export const socialLoginCookie = createCookie("sayren_social", {
+  httpOnly: true,
+  sameSite: "lax",
+  path: "/",
+  secure: process.env.NODE_ENV === "production",
+  maxAge: 60 * 10,
+});
+
+export interface SocialLoginState {
+  state: string;
+  codeVerifier: string;
+  redirectTo: string;
+}
+
+export async function readSocialLogin(request: Request): Promise<SocialLoginState | null> {
+  const value: unknown = await socialLoginCookie.parse(request.headers.get("cookie"));
+  if (!value || typeof value !== "object") return null;
+  const stored = value as Partial<SocialLoginState>;
+  if (typeof stored.state !== "string" || typeof stored.codeVerifier !== "string") return null;
+  return {
+    state: stored.state,
+    codeVerifier: stored.codeVerifier,
+    redirectTo: typeof stored.redirectTo === "string" ? stored.redirectTo : "/",
+  };
+}
+
+/** 공급자 표시 — 버튼 문구·색. 로고는 각 사 가이드의 공식 버튼 자산으로 바꿔 쓴다 */
+export const SOCIAL_BUTTONS = {
+  kakao: { label: "카카오로 시작하기", className: "bg-[#FEE500] text-[#191600]" },
+  naver: { label: "네이버로 시작하기", className: "bg-[#03A94D] text-white" },
+  google: { label: "구글로 시작하기", className: "border border-line bg-white text-ink" },
+} as const;

package/template/app/routes/auth-callback.tsx

@@ -0,0 +1,44 @@
+import { ApiError } from "@sayren/storefront-sdk";
+import { IdpCallbackError } from "@sayren/storefront-sdk/auth";
+import { redirect } from "react-router";
+import { authFor } from "../lib/api.server";
+import { cartCookie, readCartToken } from "../lib/cart-session.server";
+import { signInCookie } from "../lib/session.server";
+import { readSocialLogin, socialLoginCookie } from "../lib/social-login.server";
+import type { Route } from "./+types/auth-callback";
+
+/**
+ * 소셜 로그인에서 돌아오는 곳 — 쿠키에 둔 state·verifier로 1회용 code를 구매자 토큰으로 바꾸고 세션 쿠키를 심는다.
+ * 비회원 장바구니가 있으면 합친다. 실패하면 로그인 화면으로 이유를 들고 돌아간다.
+ */
+export async function loader({ request }: Route.LoaderArgs) {
+  const url = new URL(request.url);
+  const stored = await readSocialLogin(request);
+  const clearSocial = await socialLoginCookie.serialize("", { maxAge: 0 });
+  const fail = (reason: string) =>
+    redirect(`/login?error=${encodeURIComponent(reason)}`, {
+      headers: { "Set-Cookie": clearSocial },
+    });
+  if (!stored) return fail("state_mismatch");
+
+  const cartToken = await readCartToken(request);
+  try {
+    const tokens = await authFor(request).idpCallback({
+      code: url.searchParams.get("code"),
+      state: url.searchParams.get("state"),
+      error: url.searchParams.get("error"),
+      expectedState: stored.state,
+      codeVerifier: stored.codeVerifier,
+      cartToken: cartToken ?? undefined,
+    });
+    const headers = new Headers();
+    headers.append("Set-Cookie", await signInCookie(tokens));
+    headers.append("Set-Cookie", clearSocial);
+    if (cartToken) headers.append("Set-Cookie", await cartCookie.serialize("", { maxAge: 0 }));
+    return redirect(stored.redirectTo, { headers });
+  } catch (error) {
+    if (error instanceof IdpCallbackError) return fail(error.reason);
+    if (error instanceof ApiError) return fail("provider_error");
+    throw error;
+  }
+}

package/template/app/routes/login.tsx

@@ -1,21 +1,57 @@
-import { ApiError } from "@sayren/storefront-sdk";
-import { Form, redirect } from "react-router";
-import { authFor } from "../lib/api.server";
+import { ApiError, type SocialProvider } from "@sayren/storefront-sdk";
+import { Form, redirect, useSearchParams } from "react-router";
+import { apiFor, authFor } from "../lib/api.server";
 import { cartCookie, readCartToken } from "../lib/cart-session.server";
 import { safeRedirect } from "../lib/safe-redirect";
 import { signInCookie } from "../lib/session.server";
+import { SOCIAL_BUTTONS, socialLoginCookie } from "../lib/social-login.server";
 import type { Route } from "./+types/login";
 
 export function meta() {
   return [{ title: "로그인" }];
 }
 
+/** 켜진 로그인 방법 — 셀러가 콘솔 설정 › 로그인에서 켠 것만 온다 */
+export async function loader({ request }: Route.LoaderArgs) {
+  const store = await apiFor(request).store.get();
+  return { loginMethods: store.loginMethods };
+}
+
+/**
+ * 소셜 로그인 시작 — state·PKCE verifier를 쿠키에 두고 공급자 로그인 화면으로 보낸다. 돌아오는 곳은 `/auth/callback`이고,
+ * 이 앱의 주소가 콘솔의 스토어프런트 도메인에 등록돼 있어야 한다.
+ */
+async function startSocial(request: Request, provider: SocialProvider, redirectTo: string) {
+  const origin = new URL(request.url).origin;
+  const started = await authFor(request).idp(provider, { redirectUri: `${origin}/auth/callback` });
+  return redirect(started.url, {
+    headers: {
+      "Set-Cookie": await socialLoginCookie.serialize({
+        state: started.state,
+        codeVerifier: started.codeVerifier,
+        redirectTo,
+      }),
+    },
+  });
+}
+
 /**
  * 로그인 — 화면은 이 앱이 그리고, 확인은 sayren이 한다. 비회원으로 담아 둔 장바구니 토큰을 함께 보내면
  * 회원 장바구니로 합쳐지고 그 토큰은 닫힌다. 그래서 장바구니 쿠키도 지운다.
  */
 export async function action({ request }: Route.ActionArgs) {
   const form = await request.formData();
+  const redirectTo = safeRedirect(
+    form.get("redirectTo") ?? new URL(request.url).searchParams.get("redirectTo"),
+  );
+  const social = form.get("social");
+  if (social === "kakao" || social === "naver" || social === "google") {
+    try {
+      return await startSocial(request, social, redirectTo);
+    } catch (error) {
+      return { error: loginErrorMessage(error) };
+    }
+  }
   const cartToken = await readCartToken(request);
   try {
     const tokens = await authFor(request).session({
@@ -26,9 +62,7 @@ export async function action({ request }: Route.ActionArgs) {
     const headers = new Headers();
     headers.append("Set-Cookie", await signInCookie(tokens));
     if (cartToken) headers.append("Set-Cookie", await cartCookie.serialize("", { maxAge: 0 }));
-    const redirectTo =
-      form.get("redirectTo") ?? new URL(request.url).searchParams.get("redirectTo");
-    return redirect(safeRedirect(redirectTo), { headers });
+    return redirect(redirectTo, { headers });
   } catch (error) {
     return { error: loginErrorMessage(error) };
   }
@@ -37,6 +71,7 @@ export async function action({ request }: Route.ActionArgs) {
 function loginErrorMessage(error: unknown): string {
   if (error instanceof ApiError) {
     if (error.code === "INVALID_CREDENTIALS") return "이메일이나 비밀번호가 맞지 않아요";
+    if (error.code === "PASSWORD_LOGIN_DISABLED") return "이 스토어는 소셜 로그인만 받아요";
     if (error.code === "ACCOUNT_LOCKED")
       return "로그인을 여러 번 실패해 잠시 잠겼어요. 10분 뒤에 다시 시도해 주세요";
     if (error.status === 400) return "이메일과 비밀번호를 확인해 주세요";
@@ -44,30 +79,74 @@ function loginErrorMessage(error: unknown): string {
   return "로그인하지 못했어요. 잠시 후 다시 시도해 주세요";
 }
 
-export default function Login({ actionData }: Route.ComponentProps) {
+const CALLBACK_ERRORS: Record<string, string> = {
+  access_denied: "로그인을 취소했어요",
+  state_mismatch: "로그인 요청이 만료됐어요. 다시 시도해 주세요",
+};
+
+export default function Login({ loaderData, actionData }: Route.ComponentProps) {
+  const [params] = useSearchParams();
+  const callbackError = params.get("error");
+  const social = loaderData.loginMethods.filter(
+    (method): method is SocialProvider => method !== "password",
+  );
+  const password = loaderData.loginMethods.includes("password");
+  const error =
+    actionData?.error ??
+    (callbackError
+      ? (CALLBACK_ERRORS[callbackError] ?? "로그인하지 못했어요. 다시 시도해 주세요")
+      : null);
+
   return (
     <div className="mx-auto max-w-sm space-y-5 py-10">
       <h1 className="font-bold text-2xl">로그인</h1>
-      <Form method="post" className="space-y-3">
-        <input
-          type="email"
-          name="email"
-          placeholder="이메일"
-          required
-          className="h-11 w-full rounded-md border border-line px-3"
-        />
-        <input
-          type="password"
-          name="password"
-          placeholder="비밀번호"
-          required
-          className="h-11 w-full rounded-md border border-line px-3"
-        />
-        {actionData?.error ? <p className="text-point text-sm">{actionData.error}</p> : null}
-        <button type="submit" className="h-12 w-full rounded-md bg-ink font-semibold text-white">
-          로그인
-        </button>
-      </Form>
+      {social.length ? (
+        <Form method="post" className="space-y-2">
+          {social.map((provider) => (
+            <button
+              key={provider}
+              type="submit"
+              name="social"
+              value={provider}
+              className={`h-12 w-full rounded-md font-semibold ${SOCIAL_BUTTONS[provider].className}`}
+            >
+              {SOCIAL_BUTTONS[provider].label}
+            </button>
+          ))}
+        </Form>
+      ) : null}
+      {social.length && password ? (
+        <div className="flex items-center gap-3 text-muted text-xs">
+          <span className="h-px flex-1 bg-line" />
+          또는 이메일로
+          <span className="h-px flex-1 bg-line" />
+        </div>
+      ) : null}
+      {password ? (
+        <Form method="post" className="space-y-3">
+          <input
+            type="email"
+            name="email"
+            placeholder="이메일"
+            required
+            className="h-11 w-full rounded-md border border-line px-3"
+          />
+          <input
+            type="password"
+            name="password"
+            placeholder="비밀번호"
+            required
+            className="h-11 w-full rounded-md border border-line px-3"
+          />
+          <button type="submit" className="h-12 w-full rounded-md bg-ink font-semibold text-white">
+            로그인
+          </button>
+        </Form>
+      ) : null}
+      {error ? <p className="text-point text-sm">{error}</p> : null}
+      {social.length ? (
+        <p className="text-center text-muted text-xs">처음 소셜 로그인하면 가입이 함께 돼요</p>
+      ) : null}
     </div>
   );
 }

package/template/app/routes.ts

@@ -12,6 +12,7 @@ export default [
   route("checkout", "routes/checkout.tsx"),
   route("checkout/complete", "routes/checkout-complete.tsx"),
   route("login", "routes/login.tsx"),
+  route("auth/callback", "routes/auth-callback.tsx"),
   route("orders", "routes/orders.tsx"),
   route("orders/:orderId", "routes/order-detail.tsx"),
 ] satisfies RouteConfig;