@hfunlabs/hypurr-connect 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hfunlabs/hypurr-connect",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "type": "module",
   "packageManager": "pnpm@10.10.0",
   "main": "./dist/index.js",

package/src/HypurrConnectProvider.tsx

@@ -60,6 +60,9 @@ interface InternalConnectState extends HypurrConnectState {
 const TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-jwt";
 const LEGACY_TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-user";
 const TELEGRAM_AUTH_STATE_KEY = "hypurr-connect-auth-state";
+const TELEGRAM_AUTH_CODE_VERIFIER_PREFIX =
+  "hypurr-connect-auth-code-verifier:";
+const TELEGRAM_AUTH_RETURN_TO_PREFIX = "hypurr-connect-auth-return-to:";
 const TELEGRAM_AUTH_MESSAGE = "hypurr-connect:telegram-auth";
 const DEFAULT_AUTH_HUB_URL = "https://auth.hypurr.fun/login";
 const DEFAULT_MEDIA_URL = "https://media.hypurr.fun";
@@ -239,6 +242,9 @@ function withExpectedFrom(
 function currentReturnTo(): string {
   const url = new URL(window.location.href);
   for (const param of [
+    "code",
+    "error",
+    "error_description",
     "token",
     "token_type",
     "token_source",
@@ -250,6 +256,31 @@ function currentReturnTo(): string {
   return url.toString();
 }
 
+function cleanAuthCallbackUrl(): void {
+  const cleanUrl = new URL(window.location.href);
+  for (const param of [
+    "code",
+    "error",
+    "error_description",
+    "token",
+    "token_type",
+    "token_source",
+    "state",
+    "scope",
+  ]) {
+    cleanUrl.searchParams.delete(param);
+  }
+  window.history.replaceState({}, document.title, cleanUrl.toString());
+}
+
+function base64UrlEncode(bytes: Uint8Array): string {
+  let value = "";
+  for (const byte of bytes) {
+    value += String.fromCharCode(byte);
+  }
+  return btoa(value).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
 function randomState(): string {
   const bytes = new Uint8Array(16);
   crypto.getRandomValues(bytes);
@@ -258,6 +289,25 @@ function randomState(): string {
   );
 }
 
+function randomCodeVerifier(): string {
+  const bytes = new Uint8Array(64);
+  crypto.getRandomValues(bytes);
+  return base64UrlEncode(bytes);
+}
+
+async function createCodeChallenge(codeVerifier: string): Promise<string> {
+  if (!crypto.subtle) {
+    throw new Error(
+      "[HypurrConnect] Web Crypto API is required for Telegram auth.",
+    );
+  }
+  const digest = await crypto.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(codeVerifier),
+  );
+  return base64UrlEncode(new Uint8Array(digest));
+}
+
 function normalizeScopes(scope?: string | string[]): string {
   if (Array.isArray(scope)) return scope.join(" ");
   return scope?.trim() || DEFAULT_TELEGRAM_SCOPES.join(" ");
@@ -266,25 +316,185 @@ function normalizeScopes(scope?: string | string[]): string {
 function normalizeClientId(clientId: unknown): string {
   const normalized = typeof clientId === "string" ? clientId.trim() : "";
   if (!normalized) {
-    throw new Error("[HypurrConnect] config.client_id is required.");
+    throw new Error("[HypurrConnect] config.clientId is required.");
   }
   return normalized;
 }
 
+function codeVerifierStorageKey(state: string): string {
+  return `${TELEGRAM_AUTH_CODE_VERIFIER_PREFIX}${state}`;
+}
+
+function returnToStorageKey(state: string): string {
+  return `${TELEGRAM_AUTH_RETURN_TO_PREFIX}${state}`;
+}
+
+function storeTelegramAuthSession(
+  state: string,
+  codeVerifier: string,
+  returnTo: string,
+): void {
+  const previousState = sessionStorage.getItem(TELEGRAM_AUTH_STATE_KEY);
+  if (previousState) {
+    sessionStorage.removeItem(codeVerifierStorageKey(previousState));
+    sessionStorage.removeItem(returnToStorageKey(previousState));
+  }
+  sessionStorage.setItem(TELEGRAM_AUTH_STATE_KEY, state);
+  sessionStorage.setItem(codeVerifierStorageKey(state), codeVerifier);
+  sessionStorage.setItem(returnToStorageKey(state), returnTo);
+}
+
+function clearTelegramAuthSession(state: string): void {
+  sessionStorage.removeItem(TELEGRAM_AUTH_STATE_KEY);
+  sessionStorage.removeItem(codeVerifierStorageKey(state));
+  sessionStorage.removeItem(returnToStorageKey(state));
+}
+
+function takeTelegramAuthSession(state: string):
+  | {
+      codeVerifier: string | null;
+      returnTo: string | null;
+    }
+  | null {
+  const expectedState = sessionStorage.getItem(TELEGRAM_AUTH_STATE_KEY);
+  sessionStorage.removeItem(TELEGRAM_AUTH_STATE_KEY);
+  if (!expectedState || state !== expectedState) {
+    if (expectedState) {
+      sessionStorage.removeItem(codeVerifierStorageKey(expectedState));
+      sessionStorage.removeItem(returnToStorageKey(expectedState));
+    }
+    return null;
+  }
+
+  const codeVerifierKey = codeVerifierStorageKey(state);
+  const returnToKey = returnToStorageKey(state);
+  const codeVerifier = sessionStorage.getItem(codeVerifierKey);
+  const returnTo = sessionStorage.getItem(returnToKey);
+  sessionStorage.removeItem(codeVerifierKey);
+  sessionStorage.removeItem(returnToKey);
+  return { codeVerifier, returnTo };
+}
+
+function resolveAuthTokenUrl(authHubUrl?: string, tokenUrl?: string): string {
+  const configuredTokenUrl = tokenUrl?.trim();
+  if (configuredTokenUrl) return configuredTokenUrl;
+
+  const url = new URL(authHubUrl || DEFAULT_AUTH_HUB_URL);
+  const pathWithoutTrailingSlash = url.pathname.replace(/\/+$/, "");
+  const basePath = pathWithoutTrailingSlash.replace(/\/[^/]*$/, "");
+  url.pathname = `${basePath}/token`;
+  url.search = "";
+  url.hash = "";
+  return url.toString();
+}
+
+function getTokenFromExchangeResponse(data: unknown): string | null {
+  if (typeof data === "string") {
+    const token = data.trim();
+    return token || null;
+  }
+  if (typeof data !== "object" || data === null) return null;
+
+  const response = data as {
+    access_token?: unknown;
+    jwt?: unknown;
+    token?: unknown;
+  };
+  for (const token of [response.token, response.access_token, response.jwt]) {
+    if (typeof token === "string" && token.trim()) return token.trim();
+  }
+  return null;
+}
+
+async function exchangeTelegramAuthCode({
+  authHubUrl,
+  clientId,
+  code,
+  codeVerifier,
+  returnTo,
+  tokenUrl,
+}: {
+  authHubUrl?: string;
+  clientId: string;
+  code: string;
+  codeVerifier: string;
+  returnTo: string;
+  tokenUrl?: string;
+}): Promise<string> {
+  const body = new URLSearchParams({
+    client_id: clientId,
+    code,
+    code_verifier: codeVerifier,
+    grant_type: "authorization_code",
+    return_to: returnTo,
+  });
+
+  const response = await fetch(resolveAuthTokenUrl(authHubUrl, tokenUrl), {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      "content-type": "application/x-www-form-urlencoded",
+    },
+    body,
+  });
+  const responseText = await response.text();
+
+  if (!response.ok) {
+    const detail = responseText.trim();
+    throw new Error(
+      detail
+        ? `[HypurrConnect] Auth code exchange failed: ${detail}`
+        : `[HypurrConnect] Auth code exchange failed with HTTP ${response.status}.`,
+    );
+  }
+
+  let responseData: unknown = responseText;
+  if (responseText) {
+    try {
+      responseData = JSON.parse(responseText) as unknown;
+    } catch {
+      responseData = responseText;
+    }
+  }
+
+  const token = getTokenFromExchangeResponse(responseData);
+  if (!token) {
+    throw new Error("[HypurrConnect] Auth code exchange did not return a JWT.");
+  }
+  return token;
+}
+
+type TelegramAuthCallback = {
+  type?: typeof TELEGRAM_AUTH_MESSAGE;
+  state: string;
+  token?: string;
+  code?: string;
+  error?: string;
+};
+
 function isTelegramAuthMessage(data: unknown): data is {
   type: typeof TELEGRAM_AUTH_MESSAGE;
-  token: string;
   state: string;
+  token?: string;
+  code?: string;
+  error?: string;
 } {
+  if (typeof data !== "object" || data === null) return false;
+  if (!("type" in data) || !("state" in data)) return false;
+  const message = data as {
+    type: unknown;
+    state: unknown;
+    token?: unknown;
+    code?: unknown;
+    error?: unknown;
+  };
+  const hasToken = typeof message.token === "string";
+  const hasCode = typeof message.code === "string";
+  const hasError = typeof message.error === "string";
   return (
-    typeof data === "object" &&
-    data !== null &&
-    "type" in data &&
-    "token" in data &&
-    "state" in data &&
-    (data as { type: unknown }).type === TELEGRAM_AUTH_MESSAGE &&
-    typeof (data as { token: unknown }).token === "string" &&
-    typeof (data as { state: unknown }).state === "string"
+    message.type === TELEGRAM_AUTH_MESSAGE &&
+    typeof message.state === "string" &&
+    (hasToken || hasCode || hasError)
   );
 }
 
@@ -362,6 +572,58 @@ export function HypurrConnectProvider({
     localStorage.removeItem(LEGACY_TELEGRAM_STORAGE_KEY);
   }, []);
 
+  const handleTelegramAuthCallback = useCallback(
+    (callback: TelegramAuthCallback) => {
+      const authSession = takeTelegramAuthSession(callback.state);
+      if (!authSession) {
+        setTgError("Invalid auth callback state.");
+        return;
+      }
+
+      if (callback.error) {
+        setTgError(callback.error);
+        return;
+      }
+
+      if (callback.code) {
+        if (!authSession.codeVerifier) {
+          setTgError("Missing auth code verifier.");
+          return;
+        }
+
+        setTgLoading(true);
+        setTgError(null);
+        void exchangeTelegramAuthCode({
+          authHubUrl: config.telegram?.authHubUrl,
+          clientId: normalizeClientId(config.clientId),
+          code: callback.code,
+          codeVerifier: authSession.codeVerifier,
+          returnTo: authSession.returnTo || currentReturnTo(),
+          tokenUrl: config.telegram?.tokenUrl,
+        })
+          .then(acceptTelegramToken)
+          .catch((err) =>
+            setTgError(err instanceof Error ? err.message : String(err)),
+          )
+          .finally(() => setTgLoading(false));
+        return;
+      }
+
+      if (callback.token) {
+        acceptTelegramToken(callback.token);
+        return;
+      }
+
+      setTgError("Invalid auth callback.");
+    },
+    [
+      acceptTelegramToken,
+      config.clientId,
+      config.telegram?.authHubUrl,
+      config.telegram?.tokenUrl,
+    ],
+  );
+
   // Eagerly fetch the modal fonts on mount. They're declared via @import in the
   // injected stylesheet but browsers only fetch a webfont when visible text
   // first uses it — that lazy fetch makes scores/labels flash the system
@@ -382,66 +644,44 @@ export function HypurrConnectProvider({
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const token = params.get("token");
-    if (!token) {
+    const code = params.get("code");
+    const error =
+      params.get("error_description") || params.get("error") || undefined;
+    if (!token && !code && !error) {
       localStorage.removeItem(LEGACY_TELEGRAM_STORAGE_KEY);
       return;
     }
 
     const callbackState = params.get("state") ?? "";
+    const callback = {
+      code: code || undefined,
+      error,
+      state: callbackState,
+      token: token || undefined,
+      type: TELEGRAM_AUTH_MESSAGE,
+    } satisfies TelegramAuthCallback;
 
     if (window.opener && window.opener !== window) {
-      window.opener.postMessage(
-        {
-          type: TELEGRAM_AUTH_MESSAGE,
-          token,
-          state: callbackState,
-        },
-        window.location.origin,
-      );
+      window.opener.postMessage(callback, window.location.origin);
       window.close();
       return;
     }
 
-    const expectedState = sessionStorage.getItem(TELEGRAM_AUTH_STATE_KEY);
-    sessionStorage.removeItem(TELEGRAM_AUTH_STATE_KEY);
-    if (!expectedState || callbackState !== expectedState) {
-      setTgError("Invalid auth callback state.");
-      return;
-    }
-
-    acceptTelegramToken(token);
-
-    const cleanUrl = new URL(window.location.href);
-    for (const param of [
-      "token",
-      "token_type",
-      "token_source",
-      "state",
-      "scope",
-    ]) {
-      cleanUrl.searchParams.delete(param);
-    }
-    window.history.replaceState({}, document.title, cleanUrl.toString());
-  }, [acceptTelegramToken]);
+    cleanAuthCallbackUrl();
+    handleTelegramAuthCallback(callback);
+  }, [handleTelegramAuthCallback]);
 
   useEffect(() => {
     function onMessage(event: MessageEvent) {
       if (event.origin !== window.location.origin) return;
       if (!isTelegramAuthMessage(event.data)) return;
 
-      const expectedState = sessionStorage.getItem(TELEGRAM_AUTH_STATE_KEY);
-      sessionStorage.removeItem(TELEGRAM_AUTH_STATE_KEY);
-      if (!expectedState || event.data.state !== expectedState) {
-        setTgError("Invalid auth callback state.");
-        return;
-      }
-
-      acceptTelegramToken(event.data.token);
+      handleTelegramAuthCallback(event.data);
     }
 
     window.addEventListener("message", onMessage);
     return () => window.removeEventListener("message", onMessage);
-  }, [acceptTelegramToken]);
+  }, [handleTelegramAuthCallback]);
 
   useEffect(() => {
     if (!tgAuthToken || !telegramRpcOptions) return;
@@ -1361,28 +1601,21 @@ export function HypurrConnectProvider({
   // ── Auth actions ─────────────────────────────────────────────
   const loginTelegram = useCallback(() => {
     const state = randomState();
-    sessionStorage.setItem(TELEGRAM_AUTH_STATE_KEY, state);
+    const codeVerifier = randomCodeVerifier();
 
     const configuredReturnTo = config.telegram?.returnTo;
     const returnTo =
       typeof configuredReturnTo === "function"
         ? configuredReturnTo()
         : configuredReturnTo || currentReturnTo();
-
-    const authUrl = new URL(
-      config.telegram?.authHubUrl || DEFAULT_AUTH_HUB_URL,
-    );
-    authUrl.searchParams.set("client_id", normalizeClientId(config.client_id));
-    authUrl.searchParams.set("return_to", returnTo);
-    authUrl.searchParams.set("state", state);
-    authUrl.searchParams.set("scope", normalizeScopes(config.telegram?.scope));
+    storeTelegramAuthSession(state, codeVerifier, returnTo);
 
     const width = 520;
     const height = 720;
     const left = window.screenX + Math.max(0, (window.outerWidth - width) / 2);
     const top = window.screenY + Math.max(0, (window.outerHeight - height) / 2);
     const popup = window.open(
-      authUrl.toString(),
+      "about:blank",
       "hypurr_telegram_auth",
       [
         `width=${width}`,
@@ -1394,14 +1627,42 @@ export function HypurrConnectProvider({
       ].join(","),
     );
 
-    if (popup) {
-      popup.focus();
-      return;
-    }
+    void (async () => {
+      try {
+        const authUrl = new URL(
+          config.telegram?.authHubUrl || DEFAULT_AUTH_HUB_URL,
+        );
+        authUrl.searchParams.set(
+          "client_id",
+          normalizeClientId(config.clientId),
+        );
+        authUrl.searchParams.set("return_to", returnTo);
+        authUrl.searchParams.set("state", state);
+        authUrl.searchParams.set(
+          "scope",
+          normalizeScopes(config.telegram?.scope),
+        );
+        authUrl.searchParams.set(
+          "code_challenge",
+          await createCodeChallenge(codeVerifier),
+        );
+        authUrl.searchParams.set("code_challenge_method", "S256");
 
-    window.location.assign(authUrl.toString());
+        if (popup) {
+          popup.location.assign(authUrl.toString());
+          popup.focus();
+          return;
+        }
+
+        window.location.assign(authUrl.toString());
+      } catch (err) {
+        clearTelegramAuthSession(state);
+        if (popup && !popup.closed) popup.close();
+        setTgError(err instanceof Error ? err.message : String(err));
+      }
+    })();
   }, [
-    config.client_id,
+    config.clientId,
     config.telegram?.authHubUrl,
     config.telegram?.returnTo,
     config.telegram?.scope,

package/src/types.ts

@@ -21,7 +21,7 @@ import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
 
 export interface HypurrConnectConfig {
   /** Auth hub client identifier. Sent as `client_id` during Telegram login. */
-  client_id: string;
+  clientId: string;
   /** gRPC-web base URL. Defaults to https://grpc.hypurr.fun. */
   grpcUrl?: string;
   /** Media base URL for user-uploaded assets. Defaults to https://media.hypurr.fun. */
@@ -33,6 +33,8 @@ export interface HypurrConnectConfig {
   telegram?: {
     /** Auth hub login URL. Defaults to https://auth.hypurr.fun/login. */
     authHubUrl?: string;
+    /** Auth hub token exchange URL. Defaults to the auth hub login URL with `/login` replaced by `/token`. */
+    tokenUrl?: string;
     /** Optional callback URL. Defaults to the current page without auth query params. */
     returnTo?: string | (() => string);
     /** Requested hub scopes. Defaults to the scopes required by this SDK. */