@stacksjs/browser 0.70.182 → 0.70.184

package/dist/composables/csrf.d.ts

@@ -0,0 +1,29 @@
+/// <reference lib="dom" />
+/**
+ * Read the CSRF token the server planted, or null when there is none.
+ *
+ * Returns null rather than throwing outside a browser so server-side rendering
+ * and tests can call this freely.
+ */
+export declare function readCsrfToken(cookieSource?: string): string | null;
+/**
+ * Add the CSRF header to a set of request headers.
+ *
+ * A bearer token already exempts the request server-side, so the header is
+ * only added when there is a cookie to echo. Existing values win: an explicit
+ * caller-supplied token is never overwritten.
+ */
+export declare function withCsrfHeader(headers?: Record<string, string>, cookieSource?: string): Record<string, string>;
+/**
+ * CSRF token plumbing for browser requests.
+ *
+ * The framework's CSRF middleware is default-on for unsafe methods and uses a
+ * stateless double-submit cookie: the server sets a non-HttpOnly
+ * `X-CSRF-Token` cookie on safe responses, and the client is expected to echo
+ * that value back in the `X-CSRF-Token` header. Nothing in the browser package
+ * did the echoing, so every cookie-authenticated POST the framework itself
+ * issues — login, register, logout — came back 403 "CSRF token mismatch" on a
+ * stock install.
+ */
+/** Cookie (and header) name the CSRF middleware issues and checks. */
+export declare const CSRF_COOKIE_NAME: 'X-CSRF-Token';

package/dist/composables/csrf.js

@@ -0,0 +1,24 @@
+export const CSRF_COOKIE_NAME = "X-CSRF-Token";
+export function readCsrfToken(cookieSource) {
+  const raw = cookieSource ?? (typeof document < "u" ? document.cookie : "");
+  if (!raw)
+    return null;
+  for (const part of raw.split(";")) {
+    const separator = part.indexOf("=");
+    if (separator === -1)
+      continue;
+    if (part.slice(0, separator).trim() !== CSRF_COOKIE_NAME)
+      continue;
+    const value = part.slice(separator + 1).trim();
+    return value ? decodeURIComponent(value) : null;
+  }
+  return null;
+}
+export function withCsrfHeader(headers = {}, cookieSource) {
+  if (headers[CSRF_COOKIE_NAME])
+    return headers;
+  const token = readCsrfToken(cookieSource);
+  if (!token)
+    return headers;
+  return { ...headers, [CSRF_COOKIE_NAME]: token };
+}

package/dist/composables/index.d.ts

@@ -1,3 +1,4 @@
+export * from './csrf';
 export * from './useAuth';
 export * from './useApi';
 // Re-export browser-relevant composables from @stacksjs/composables

package/dist/composables/index.js

@@ -1,3 +1,4 @@
+export * from "./csrf";
 export * from "./useAuth";
 export * from "./useApi";
 export {

package/dist/composables/useAuth.js

@@ -1,5 +1,6 @@
 import { useStorage } from "@stacksjs/composables";
 import { ref } from "@stacksjs/stx";
+import { withCsrfHeader } from "./csrf";
 const token = useStorage("token", ""), stacksConfig = globalThis.__STACKS_CONFIG__ || {}, baseUrl = stacksConfig.API_URL || (typeof window < "u" ? window.location.origin : `http://localhost:${process.env.PORT_API || "3008"}`), user = ref(null), isAuthenticated = ref(!1);
 export function useAuth() {
   async function fetchAuthUser() {
@@ -44,9 +45,10 @@ export function useAuth() {
   async function register(user) {
     const url = `${baseUrl}/register`, data = await (await fetch(url, {
       method: "POST",
-      headers: {
+      credentials: "same-origin",
+      headers: withCsrfHeader({
         "Content-Type": "application/json"
-      },
+      }),
       body: JSON.stringify(user)
     })).json();
     if (isRegisterError(data))
@@ -67,9 +69,10 @@ export function useAuth() {
     try {
       const url = `${baseUrl}/login`, response = await fetch(url, {
         method: "POST",
-        headers: {
+        credentials: "same-origin",
+        headers: withCsrfHeader({
           "Content-Type": "application/json"
-        },
+        }),
         body: JSON.stringify(user)
       });
       if (!response.ok) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/browser",
   "type": "module",
   "sideEffects": false,
-  "version": "0.70.182",
+  "version": "0.70.184",
   "description": "Stacks core frontend/browser functionalities.",
   "author": "Chris Breuer",
   "contributors": [
@@ -52,7 +52,7 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@stacksjs/composables": "0.70.182",
+    "@stacksjs/composables": "0.70.184",
     "@stacksjs/stx": "^0.2.100",
     "bun-query-builder": "^0.1.59",
     "magic-regexp": "^0.11.0"
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "better-dx": "^0.2.17",
-    "@stacksjs/utils": "0.70.182",
+    "@stacksjs/utils": "0.70.184",
     "@stripe/stripe-js": "^9.10.0"
   }
 }