@checkstack/auth-frontend 0.5.31 → 0.5.33

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @checkstack/auth-frontend
 
+## 0.5.33
+
+### Patch Changes
+
+- Updated dependencies [50e5f5f]
+  - @checkstack/auth-common@0.6.5
+  - @checkstack/common@0.8.0
+  - @checkstack/ui@1.7.1
+  - @checkstack/frontend-api@0.4.2
+
+## 0.5.32
+
+### Patch Changes
+
+- 32d52c6: Fix and improve password reset flow + email branding:
+
+  - **Fix**: password reset emails were failing with "Malformed password reset URL: missing token parameter". Better-auth puts the reset token in the URL path (`/reset-password/{token}`), not as a `?token=` query param, so the previous URL-parsing logic always failed. Now uses the `token` argument better-auth passes to `sendResetPassword` directly.
+  - **UX**: the reset password page now validates the token on load via a new anonymous `validateResetToken` endpoint, so users see "Invalid Link" / "Link Expired" before typing a password rather than after submitting. Tokens are 24-char nanoid-style values (~143 bits of entropy), so exposing validity does not enable enumeration.
+  - **Fix**: transactional notifications were hardcoded to `importance: "critical"`, causing password reset emails to display a misleading "CRITICAL" badge. The `sendTransactional` contract now accepts an optional `importance` field that defaults to `"info"`.
+  - **Branding**: redesigned the email layout (`wrapInEmailLayout`) with a Checkstack-style engineering aesthetic — dark header with grid pattern, monospace importance badge, hardened CTA button (Outlook VML fallback + explicit text color), and force-light color scheme to prevent client auto-inversion from breaking text legibility.
+
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+  - @checkstack/frontend-api@0.4.1
+  - @checkstack/auth-common@0.6.4
+  - @checkstack/ui@1.7.0
+
 ## 0.5.31
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.5.31",
+  "version": "0.5.33",
+  "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -11,27 +12,27 @@
     "./api": "./src/api.ts"
   },
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsgo -b",
     "lint": "bun run lint:code",
     "lint:code": "eslint . --max-warnings 0",
     "test:e2e": "bunx playwright test"
   },
   "dependencies": {
-    "@checkstack/frontend-api": "0.3.11",
+    "@checkstack/frontend-api": "0.4.1",
     "@checkstack/common": "0.7.0",
-    "@checkstack/ui": "1.6.0",
+    "@checkstack/ui": "1.7.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "lucide-react": "^0.344.0",
     "better-auth": "^1.1.8",
-    "@checkstack/auth-common": "0.6.3"
+    "@checkstack/auth-common": "0.6.4"
   },
   "devDependencies": {
     "typescript": "^5.0.0",
     "@types/react": "^18.2.0",
     "@playwright/test": "^1.49.0",
     "@checkstack/test-utils-frontend": "0.0.4",
-    "@checkstack/tsconfig": "0.0.5",
+    "@checkstack/tsconfig": "0.0.6",
     "@checkstack/scripts": "0.1.2"
   }
 }

package/src/components/ResetPasswordPage.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { Link, useSearchParams, useNavigate } from "react-router-dom";
 import { Lock, ArrowLeft, CheckCircle, AlertCircle } from "lucide-react";
-import { authRoutes, passwordSchema } from "@checkstack/auth-common";
+import { AuthApi, authRoutes, passwordSchema } from "@checkstack/auth-common";
 import { resolveRoute, extractErrorMessage} from "@checkstack/common";
+import { usePluginClient } from "@checkstack/frontend-api";
 import {
   Button,
   Input,
@@ -18,6 +19,7 @@ import {
   AlertContent,
   AlertTitle,
   AlertDescription,
+  LoadingSpinner,
 } from "@checkstack/ui";
 import { getAuthClientLazy } from "../lib/auth-client";
 
@@ -33,6 +35,16 @@ export const ResetPasswordPage = () => {
   const [success, setSuccess] = useState(false);
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
   const authClient = getAuthClientLazy();
+  const authApiClient = usePluginClient(AuthApi);
+
+  // Pre-validate token on load so users see invalid/expired errors before
+  // entering a password. Token entropy is high enough that exposing validity
+  // does not enable enumeration.
+  const { data: tokenValidation, isLoading: validatingToken } =
+    authApiClient.validateResetToken.useQuery(
+      { token: token ?? "" },
+      { enabled: Boolean(token) },
+    );
 
   // Validate password on change
   useEffect(() => {
@@ -90,8 +102,11 @@ export const ResetPasswordPage = () => {
     }
   };
 
-  // No token - show error
-  if (!token) {
+  // No token, expired, or invalid - show error before user types a password.
+  const tokenInvalid =
+    !token || (tokenValidation && !tokenValidation.valid);
+  if (tokenInvalid) {
+    const isExpired = tokenValidation?.reason === "expired";
     return (
       <div className="min-h-[80vh] flex items-center justify-center">
         <Card className="w-full max-w-md">
@@ -99,10 +114,13 @@ export const ResetPasswordPage = () => {
             <div className="mx-auto w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mb-2">
               <AlertCircle className="h-6 w-6 text-destructive" />
             </div>
-            <CardTitle className="text-2xl font-bold">Invalid Link</CardTitle>
+            <CardTitle className="text-2xl font-bold">
+              {isExpired ? "Link Expired" : "Invalid Link"}
+            </CardTitle>
             <CardDescription>
-              This password reset link is invalid or has expired. Please request
-              a new one.
+              {isExpired
+                ? "This password reset link has expired. Please request a new one."
+                : "This password reset link is invalid. Please request a new one."}
             </CardDescription>
           </CardHeader>
           <CardFooter className="flex flex-col gap-4">
@@ -128,6 +146,16 @@ export const ResetPasswordPage = () => {
     );
   }
 
+  // While the token is being checked, show a spinner to avoid a flash of the
+  // password form before we know whether the link is valid.
+  if (validatingToken) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
   // Success state
   if (success) {
     return (

package/tsconfig.json

@@ -2,5 +2,22 @@
   "extends": "@checkstack/tsconfig/frontend.json",
   "include": [
     "src"
+  ],
+  "references": [
+    {
+      "path": "../auth-common"
+    },
+    {
+      "path": "../common"
+    },
+    {
+      "path": "../frontend-api"
+    },
+    {
+      "path": "../test-utils-frontend"
+    },
+    {
+      "path": "../ui"
+    }
   ]
-}
+}