feat(auth-server): session security hardening (#148)

* fix: remove redundant NUXT_PUBLIC_APP_URL usage

* fix: auth server session security hardening

Author: JackHamer09

README.md

@@ -17,7 +17,7 @@ simplifying user authentication, session management, and transaction processing.
 - 🧩 Modular smart accounts based on
   [ERC-7579](https://eips.ethereum.org/EIPS/eip-7579#modules)
 - 🔑 Passkey authentication (no seed phrases)
-- ⏰ Sessions w/ easy configuration and management
+- ⏰ Sessions with easy configuration and management
 - 💰 Integrated paymaster support
 - ❤️‍🩹 Account recovery
 - 💻 Simple SDKs : JavaScript, iOS/Android _(Coming Soon)_
@@ -117,7 +117,8 @@ This monorepo is comprised of the following packages, products, and examples:
   session key management
 - `packages/contracts` are the on-chain smart contracts behind ZKsync SSO
   accounts
-- `examples/nft-quest` is an app demonstrating the use of ZKsync SSO w/ sessions
+- `examples/nft-quest` is an app demonstrating the use of ZKsync SSO with
+  sessions
 - `examples/nft-quest-contracts` are the smart contracts for `nft-quest`
 - `examples/demo-app` is a test app mostly used for CI testing
 - `examples/bank-demo` is an app demonstrating the fully embedded experience

examples/demo-app/pages/index.vue

@@ -14,7 +14,7 @@
       class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
       @click="address ? disconnectWallet() : connectWallet(true)"
     >
-      Connect w/ Session
+      Connect with Session
     </button>
     <div
       v-if="address"
@@ -42,7 +42,7 @@
       :disabled="isSendingEth"
       @click="sendTokens(true)"
     >
-      Send 0.1 ETH w/ Paymaster
+      Send 0.1 ETH with Paymaster
     </button>
 
     <div

examples/demo-app/tests/create-account.spec.ts

@@ -44,9 +44,9 @@ test.beforeEach(async ({ page }) => {
   await expect(page.getByText("ZKsync SSO Demo")).toBeVisible();
 });
 
-test("Create account w/ session and send ETH", async ({ page }) => {
+test("Create account with session and send ETH", async ({ page }) => {
   // Click the Connect button
-  await page.getByRole("button", { name: "Connect w/ Session", exact: true }).click();
+  await page.getByRole("button", { name: "Connect with Session", exact: true }).click();
 
   // Ensure popup is displayed
   await page.waitForTimeout(2000);
@@ -105,9 +105,9 @@ test("Create account w/ session and send ETH", async ({ page }) => {
     .toBeGreaterThan(endBalance + 0.1);
 });
 
-test("Create account w/ session and send ETH w/ paymaster", async ({ page }) => {
+test("Create account with session and send ETH with paymaster", async ({ page }) => {
   // Click the Connect button
-  await page.getByRole("button", { name: "Connect w/ Session", exact: true }).click();
+  await page.getByRole("button", { name: "Connect with Session", exact: true }).click();
 
   // Ensure popup is displayed
   await page.waitForTimeout(2000);
@@ -156,9 +156,9 @@ test("Create account w/ session and send ETH w/ paymaster", async ({ page }) =>
     .replace("Balance: ", "")
     .replace(" ETH", "");
 
-  // Send some eth w/ paymaster
-  await page.getByRole("button", { name: "Send 0.1 ETH w/ Paymaster", exact: true }).click();
-  await expect(page.getByRole("button", { name: "Send 0.1 ETH w/ Paymaster", exact: true })).toBeEnabled();
+  // Send some eth with paymaster
+  await page.getByRole("button", { name: "Send 0.1 ETH with Paymaster", exact: true }).click();
+  await expect(page.getByRole("button", { name: "Send 0.1 ETH with Paymaster", exact: true })).toBeEnabled();
   const endBalance = +(await page.getByText("Balance:").innerText())
     .replace("Balance: ", "")
     .replace(" ETH", "");
@@ -268,7 +268,7 @@ test("Create passkey account and send ETH", async ({ page }) => {
     .toBeGreaterThan(endBalance + 0.1);
 });
 
-test("Create passkey account and send ETH w/ paymaster", async ({ page }) => {
+test("Create passkey account and send ETH with paymaster", async ({ page }) => {
   // Click the Connect button
   await page.getByRole("button", { name: "Connect", exact: true }).click();
 
@@ -325,8 +325,8 @@ test("Create passkey account and send ETH w/ paymaster", async ({ page }) => {
     .replace("Balance: ", "")
     .replace(" ETH", "");
 
-  // Send some eth w/ paymaster
-  await page.getByRole("button", { name: "Send 0.1 ETH w/ Paymaster", exact: true }).click();
+  // Send some eth with paymaster
+  await page.getByRole("button", { name: "Send 0.1 ETH with Paymaster", exact: true }).click();
 
   // Wait for Auth Server to pop back up
   await page.waitForTimeout(2000);
@@ -362,7 +362,7 @@ test("Create passkey account and send ETH w/ paymaster", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   // Confirm transfer completed and balance updated
-  await expect(page.getByRole("button", { name: "Send 0.1 ETH w/ Paymaster", exact: true })).toBeEnabled();
+  await expect(page.getByRole("button", { name: "Send 0.1 ETH with Paymaster", exact: true })).toBeEnabled();
   const endBalance = +(await page.getByText("Balance:").innerText())
     .replace("Balance: ", "")
     .replace(" ETH", "");

packages/auth-server/components/account-recovery/guardian-flow/Step4ConfirmLater.vue

@@ -29,12 +29,10 @@
 </template>
 
 <script setup lang="ts">
-import { useRuntimeConfig } from "nuxt/app";
 import { computed } from "vue";
 
 import { useAccountStore } from "~/stores/account";
 
-const config = useRuntimeConfig();
 const { address } = useAccountStore();
 
 const props = defineProps<{
@@ -46,6 +44,6 @@ const emit = defineEmits<{
 }>();
 
 const recoveryUrl = computed(() => {
-  return `${config.public.appUrl}/recovery/guardian/confirm-guardian?accountAddress=${address}&guardianAddress=${props.guardianAddress}`;
+  return new URL(`/recovery/guardian/confirm-guardian?accountAddress=${address}&guardianAddress=${props.guardianAddress}`, window.location.origin).toString();
 });
 </script>

packages/auth-server/components/account-recovery/passkey-generation-flow/Step3ConfirmLater.vue

@@ -36,8 +36,6 @@
 import type { Address } from "viem";
 import type { RegisterNewPasskeyReturnType } from "zksync-sso/client/passkey";
 
-const runtimeConfig = useRuntimeConfig();
-
 const props = defineProps<{
   accountAddress: Address;
   newPasskey: RegisterNewPasskeyReturnType;
@@ -61,6 +59,6 @@ const recoveryUrl = computedAsync(async () => {
 
   queryParams.set("checksum", checksum);
 
-  return `${runtimeConfig.public.appUrl}/recovery/guardian/confirm-recovery?${queryParams.toString()}`;
+  return new URL(`/recovery/guardian/confirm-recovery?${queryParams.toString()}`, window.location.origin).toString();
 });
 </script>

packages/auth-server/components/common/Alert.vue

@@ -1,19 +1,60 @@
 <template>
-  <div class="rounded-xl bg-primary-50 dark:bg-primary-500/20 p-2">
+  <div
+    class="alert-container"
+    :class="`variant-${variant}`"
+  >
     <div class="flex">
       <div
         v-if="$slots.icon"
-        class="shrink-0 text-blue-400 size-5"
+        class="alert-icon-container"
       >
         <slot name="icon" />
       </div>
-      <div class="ml-3 text-primary-300 dark:text-primary-100">
+      <div class="alert-content-container">
         <slot />
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-
+<script lang="ts" setup>
+defineProps({
+  variant: {
+    type: String as PropType<"primary" | "error">,
+    default: "primary",
+  },
+});
 </script>
+
+<style lang="scss" scoped>
+.alert-container {
+  @apply rounded-xl p-2;
+  &.variant-primary {
+    @apply bg-primary-50 dark:bg-primary-500/20;
+
+    .alert-icon-container {
+      @apply text-blue-400;
+    }
+    .alert-content-container {
+      @apply text-primary-300 dark:text-primary-100;
+    }
+  }
+  &.variant-error {
+    @apply bg-error-50 dark:bg-error-500/20;
+
+    .alert-icon-container {
+      @apply text-red-400;
+    }
+    .alert-content-container {
+      @apply text-error-300 dark:text-error-100;
+    }
+  }
+
+  .alert-icon-container {
+    @apply shrink-0 size-5;
+  }
+  .alert-content-container {
+    @apply ml-3;
+  }
+}
+</style>

packages/auth-server/components/session/Metadata.vue

@@ -23,7 +23,7 @@
     </h1>
     <p
       v-if="domain"
-      class="text-sm w-fit text-center border border-neutral-800 bg-neutral-800/50 mt-3 mx-auto px-4 py-1 rounded-3xl"
+      class="text-sm w-fit text-center text-neutral-300 border border-neutral-800 bg-neutral-800/50 mt-3 mx-auto px-4 py-1 rounded-3xl"
     >
       {{ domain }}
     </p>

packages/auth-server/components/session/template.vue

@@ -6,7 +6,10 @@
     >
       <slot name="header" />
     </div>
-    <div class="flex-grow p-4 overflow-y-auto">
+    <div
+      id="sessionScrollableArea"
+      class="flex-grow p-4 overflow-y-auto"
+    >
       <slot />
     </div>
     <div class=" border-t border-neutral-800 p-4">

packages/auth-server/components/session/tokens.vue

@@ -15,7 +15,10 @@
             {{ formatPricePretty(totalUsd) }}
           </span>
         </div>
-        <div v-else>
+        <div
+          v-else
+          class="text-error-500"
+        >
           Unlimited
         </div>
       </div>
@@ -49,7 +52,30 @@
             :price="item.token.price"
             :icon-url="item.token.iconUrl"
             :amount="item.amount.toString()"
-          />
+          >
+            <template
+              v-if="item.amount === 'unlimited'"
+              #right
+            >
+              <ZkTooltip :label="`Unlimited ${item.token.symbol} spend limit requested`">
+                <div class="flex items-center gap-2 text-error-500">
+                  <span class="text-sm underline underline-offset-2 decoration-dotted">Attention</span>
+                  <ExclamationCircleIcon class="w-6 h-6 inline-block flex-shrink-0" />
+                </div>
+              </ZkTooltip>
+            </template>
+            <template
+              v-else-if="formatTokenPriceToNumber(item.amount, item.token.decimals, item.token.price || 0) > 1000"
+              #right
+            >
+              <ZkTooltip :label="`High ${item.token.symbol} spend limit requested`">
+                <div class="flex items-center gap-2 text-error-500">
+                  <span class="text-sm underline underline-offset-2 decoration-dotted">Attention</span>
+                  <ExclamationCircleIcon class="w-6 h-6 inline-block flex-shrink-0" />
+                </div>
+              </ZkTooltip>
+            </template>
+          </TokenAmount>
         </template>
         <div
           v-if="onchainActionsCount"
@@ -64,26 +90,14 @@
 </template>
 
 <script setup lang="ts">
-import { useNow } from "@vueuse/core";
-import type { SessionConfig } from "zksync-sso/utils";
+import { ExclamationCircleIcon } from "@heroicons/vue/24/outline";
 
-const props = defineProps<{
-  session: Omit<SessionConfig, "signer">;
+defineProps<{
+  onchainActionsCount: UseSessionConfigInfoReturn["onchainActionsCount"];
+  fetchTokensError: UseSessionConfigInfoReturn["fetchTokensError"];
+  tokensLoading: UseSessionConfigInfoReturn["tokensLoading"];
+  spendLimitTokens: UseSessionConfigInfoReturn["spendLimitTokens"];
+  hasUnlimitedSpend: UseSessionConfigInfoReturn["hasUnlimitedSpend"];
+  totalUsd: UseSessionConfigInfoReturn["totalUsd"];
 }>();
-
-const { requestChain } = storeToRefs(useRequestsStore());
-
-const now = useNow({ interval: 1000 });
-const {
-  onchainActionsCount,
-  fetchTokensError,
-  tokensLoading,
-  spendLimitTokens,
-  hasUnlimitedSpend,
-  totalUsd,
-} = useSessionConfigInfo(
-  computed(() => requestChain.value!.id),
-  props.session,
-  now,
-);
 </script>

packages/auth-server/components/token/TokenAmount.vue

@@ -18,7 +18,7 @@
             <span
               v-if="tokenPrice"
               class="text-neutral-500 text-sm"
-            >&nbsp;(~{{ tokenPrice }})</span>
+            >&nbsp;({{ tokenPrice }})</span>
           </div>
         </template>
         <template
@@ -81,8 +81,9 @@ const formattedAmount = computed(() => {
   return formatAmount(BigInt(props.amount), props.decimals);
 });
 const tokenPrice = computed(() => {
-  if (!props.price || isUnlimitedAmount.value) return;
-  return formatTokenPrice(BigInt(props.amount), props.decimals, props.price);
+  if (!props.price) return;
+  if (isUnlimitedAmount.value) return "∞";
+  return `~${formatTokenPrice(BigInt(props.amount), props.decimals, props.price)}`;
 });
 </script>