docs/src/components/mdx/jwt-viewer.tsx (2)

8-17: Enhance JWT parsing with proper error handling and validation.

The current implementation could be improved:

• Consider using a dedicated JWT library like jose for more robust parsing (I see it's already used elsewhere in the codebase)
• Add validation for malformed base64 padding
• Handle edge cases where base64 decoding might failSince the codebase already uses the jose library, I recommend using it for more robust JWT parsing instead of the custom implementation.

Consider replacing the custom JWT decoding with the jose library's decodeJwt function:

-// Simple JWT decoding
-const decodeJWT = (jwt: string) => {
-  const parts = jwt.split('.');
-  if (parts.length !== 3) throw new Error('Invalid JWT format');
-  
-  return {
-    header: JSON.parse(atob(parts[0].replace(/-/g, '+').replace(/_/g, '/'))),
-    payload: JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/'))),
-    signature: parts[2]
-  };
-};
+import { decodeJwt } from 'jose';
+
+const decodeJWT = (jwt: string) => {
+  const payload = decodeJwt(jwt);
+  // For header, we can decode it separately since jose doesn't expose header decoding directly
+  const parts = jwt.split('.');
+  if (parts.length !== 3) throw new Error('Invalid JWT format');
+  
+  const header = JSON.parse(atob(parts[0].replace(/-/g, '+').replace(/_/g, '/')));
+  
+  return {
+    header,
+    payload,
+    signature: parts[2]
+  };
+};

This provides better error handling and is consistent with the existing codebase that already uses jose.

---

26-26: Consider using proper TypeScript types instead of any.

The decoded state uses any type which reduces type safety. Consider defining a proper interface for the decoded JWT structure.

+interface DecodedJWT {
+  header: Record<string, any>;
+  payload: Record<string, any>;
+  signature: string;
+}

-  const [decoded, setDecoded] = useState<any>(null);
+  const [decoded, setDecoded] = useState<DecodedJWT | null>(null);

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

docs/src/components/mdx/jwt-viewer.tsx (5)

8-12: Consider Map over Record for key–value collections.

Guidelines prefer ES6 Map for KV collections. Here JSON parsing returns plain objects; switching to Map adds conversion overhead. If you adopt Map, adjust render loops accordingly.

-type DecodedJWT = {
-  header: Record<string, unknown>,
-  payload: Record<string, unknown>,
-  signature: string,
-};
+type DecodedJWT = {
+  header: Map<string, unknown>;
+  payload: Map<string, unknown>;
+  signature: string;
+};

And later:

-{Object.entries(decoded.header).map(([key, value]) => (
+{Array.from(decoded.header.entries()).map(([key, value]) => (
...
-{Object.entries(decoded.payload).map(([key, value]) => (
+{Array.from(decoded.payload.entries()).map(([key, value]) => (

If you keep Record (reasonable for JSON), please note the intentional deviation from the guideline.

---

133-135: Associate label with textarea and disable text helpers.

Improve a11y and avoid token mutations by IME/spellcheck/autocorrect.

-          <label className="text-sm font-medium text-fd-foreground">JWT Token</label>
+          <label htmlFor="jwt-token-input" className="text-sm font-medium text-fd-foreground">JWT Token</label>
@@
-          <textarea
+          <textarea
+            id="jwt-token-input"
             value={token}
             onChange={(e) => {
               setToken(e.target.value);
               handleDecode(e.target.value);
               setUserTokenLoaded(false);
             }}
             placeholder={user ? "Your token loads automatically, or paste another here..." : "Paste JWT token here..."}
+            autoComplete="off"
+            autoCorrect="off"
+            spellCheck={false}
             className={cn(

Also applies to: 150-165

---

177-191: Use an alert region for error messages.

Enable screen readers to announce decode errors.

-      {error && (
-        <div className={cn(
+      {error && (
+        <div role="alert" aria-live="assertive" className={cn(
           "p-3 rounded-lg border border-dashed",

---

112-127: Handle null explicitly; add ISO tooltip for time claims.

Minor robustness/readability.

-  const renderValue = (key: string, value: unknown) => {
+  const renderValue = (key: string, value: unknown) => {
     if (key === 'exp' || key === 'iat' || key === 'nbf') {
       return (
         <div className="space-y-1">
           <code className="text-fd-foreground">{String(value)}</code>
           {typeof value === 'number' && (
             <div>{formatTime(value, key)}</div>
           )}
         </div>
       );
     }
-    if (typeof value === 'object') {
+    if (value === null) {
+      return <code className="text-fd-foreground">null</code>;
+    }
+    if (typeof value === 'object') {
       return <code className="text-fd-foreground break-all">{JSON.stringify(value)}</code>;
     }
     return <code className="text-fd-foreground">{String(value)}</code>;
   };

---

89-110: Add ISO timestamp in title attribute for time claims.

Keeps UI locale-friendly while preserving precise value on hover.

-    return (
-      <span className={cn(
+    return (
+      <span
+        title={date.toISOString()}
+        className={cn(
         "text-xs",

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

docs/src/components/mdx/jwt-viewer.tsx (4)

4-4: Avoid deep-importing from dist; use a public export.

Deep paths are brittle across builds. Import runAsynchronously from a stable public path or re-export it.

Apply if available:

-import { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';
+import { runAsynchronously } from '@stackframe/stack-shared/utils/promises';

If not exported, please add a re-export at @stackframe/stack-shared and switch to it here.

---

119-121: Pass the function to runAsynchronously instead of invoking it.

This lets the helper wrap the call and errors consistently.

-              onClick={() => runAsynchronously(loadCurrentUserToken())}
+              onClick={() => runAsynchronously(loadCurrentUserToken)}

---

132-148: Minor privacy UX: disable spellcheck/autocomplete for token textarea.

Prevents accidental leakage via spellcheck/autofill and reduces noise.

           <textarea
             value={token}
             onChange={(e) => {
               setToken(e.target.value);
               handleDecode(e.target.value);
               setUserTokenLoaded(false);
             }}
             placeholder={user ? "Click 'Load My Token' to use your session token, or paste another here..." : "Paste JWT token here..."}
             className={cn(
               "w-full h-24 p-3 text-xs font-mono rounded-lg resize-vertical",
               "bg-fd-background border border-fd-border",
               "text-fd-foreground placeholder:text-fd-muted-foreground",
               "focus:outline-none focus:ring-2 focus:ring-fd-primary/20 focus:border-fd-primary",
               "transition-colors"
             )}
+            autoComplete="off"
+            spellCheck={false}
           />

---

176-246: Optional: sort claims for stable rendering.

Sorting header/payload keys improves readability across renders.

-              {Object.entries(decoded.header).map(([key, value]) => (
+              {Object.entries(decoded.header).sort(([a],[b]) => a.localeCompare(b)).map(([key, value]) => (
                 ...
               ))}

-              {Object.entries(decoded.payload).map(([key, value]) => (
+              {Object.entries(decoded.payload).sort(([a],[b]) => a.localeCompare(b)).map(([key, value]) => (
                 ...
               ))}

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

docs/src/components/mdx/jwt-viewer.tsx (3)

288-289: Improve a11y: associate label with textarea and announce errors.

Link the label to the textarea (htmlFor/id) and make the error region an alert with aria-live.

-          <label className="text-sm font-medium text-fd-foreground">JWT Token</label>
+          <label htmlFor="jwt-token-input" className="text-sm font-medium text-fd-foreground">JWT Token</label>
@@
-          <textarea
+          <textarea
+            id="jwt-token-input"
             value={token}
@@
-      {error && (
-        <div className={cn(
+      {error && (
+        <div role="alert" aria-live="polite" className={cn(
           "p-3 rounded-lg border border-dashed",

Also applies to: 320-335, 376-383

---

114-135: Handle ms vs s epoch values and show timezone explicitly.

Some JWTs emit ms epochs; add a heuristic and clarify timezone to reduce confusion.

-  const formatTime = (timestamp: number, field: string) => {
-    const date = new Date(timestamp * 1000);
+  const formatTime = (timestamp: number, field: string) => {
+    // Heuristic: treat large values as ms
+    const seconds = timestamp > 1_000_000_000_0 ? Math.floor(timestamp / 1000) : timestamp;
+    const date = new Date(seconds * 1000);
     const now = Date.now() / 1000;
@@
-        {date.toLocaleString()}
+        {date.toLocaleString(undefined, { timeZoneName: 'short' })}

If your tokens always use seconds, feel free to drop the heuristic.

---

5-5: Tighten types using jose’s JWTPayload/JWSHeaderParameters.

Reduces casting and improves editor hints.

-import { decodeProtectedHeader, decodeJwt as joseDecodeJwt } from 'jose';
+import { decodeProtectedHeader, decodeJwt as joseDecodeJwt, type JWTPayload, type JWSHeaderParameters } from 'jose';
@@
 type DecodedJWT = {
-  header: Record<string, unknown>,
-  payload: Record<string, unknown>,
+  header: JWSHeaderParameters,
+  payload: JWTPayload,
   signature: string,
 };
@@
   return {
-    header: decodeProtectedHeader(jwt) as Record<string, unknown>,
-    payload: joseDecodeJwt(jwt) as Record<string, unknown>,
+    header: decodeProtectedHeader(jwt),
+    payload: joseDecodeJwt(jwt),
     signature: parts[2]!,
   };

Also applies to: 9-13, 20-23

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

docs/src/components/mdx/jwt-viewer.tsx (4)

9-13: Use jose’s types for stronger safety; drop the casts.

Type payload/header as JWTPayload/JWSHeaderParameters and remove the Record<...> casts.

 import { decodeProtectedHeader, decodeJwt as joseDecodeJwt } from 'jose';
+import type { JWTPayload, JWSHeaderParameters } from 'jose';

 type DecodedJWT = {
-  header: Record<string, unknown>,
-  payload: Record<string, unknown>,
+  header: JWSHeaderParameters,
+  payload: JWTPayload,
   signature: string,
 };

   return {
-    header: decodeProtectedHeader(jwt) as Record<string, unknown>,
-    payload: joseDecodeJwt(jwt) as Record<string, unknown>,
+    header: decodeProtectedHeader(jwt),
+    payload: joseDecodeJwt(jwt),
     signature: parts[2]!,
   };

Also applies to: 20-22

---

51-66: Be lenient with inputs: strip “Bearer ” prefix before decoding.

This helps when users paste Authorization headers.

-  const handleDecode = useCallback((jwtString: string) => {
-    if (!jwtString.trim()) {
+  const handleDecode = useCallback((jwtString: string) => {
+    const trimmed = jwtString.trim();
+    if (!trimmed) {
       setDecoded(null);
       setError('');
       return;
     }
 
     try {
-      setDecoded(decodeJWT(jwtString));
+      const cleaned = trimmed.replace(/^Bearer\s+/i, '');
+      setDecoded(decodeJWT(cleaned));
       setError('');
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Invalid JWT');
       setDecoded(null);
     }
   }, []);

---

286-317: Add a quick “Clear” action for privacy.

Let users wipe the token from the UI in one click.

           <div className="flex flex-wrap items-center gap-2">
             {token && (
               <button
                 type="button"
                 onClick={() => runAsynchronously(() => handleCopy(token, 'token'))}
                 className={cn(
                   "px-3 py-1.5 text-xs font-medium rounded-md border",
                   "border-fd-border bg-fd-muted/40 text-fd-muted-foreground hover:bg-fd-muted/60",
                   "transition-colors"
                 )}
               >
                 {copiedKey === 'token' ? 'Copied' : 'Copy Token'}
               </button>
             )}
+            {token && (
+              <button
+                type="button"
+                onClick={() => { setToken(''); setDecoded(null); setError(''); setUserTokenLoaded(false); }}
+                className={cn(
+                  "px-3 py-1.5 text-xs font-medium rounded-md border",
+                  "border-fd-border bg-fd-muted/20 text-fd-muted-foreground hover:bg-fd-muted/40",
+                  "transition-colors"
+                )}
+              >
+                Clear
+              </button>
+            )}
             {user && (
               <button
                 type="button"
                 onClick={() => runAsynchronously(loadCurrentUserToken)}
                 className={cn(
                   "px-3 py-1.5 text-xs font-medium rounded-md transition-colors",

---

438-448: Optional: Map over a Map to align with the “prefer Map over Record” guideline.

Not required here, but if you want strict adherence, you could convert header/payload to ReadonlyMap and iterate via map.entries(). This is a larger change and may not be worth it given jose returns plain objects.

As per coding guidelines.

Also applies to: 462-474

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro