adding cookies to api route response [simple result] (#5060)

* adding cookies to the an api route response, also when returning a simple result * in dev server, convert a simple endpoint result into a response object Co-authored-by: AirBorne04 <unknown> Co-authored-by: AirBorne04 <> Co-authored-by: Matthew Phillips <matthew@skypack.dev>
withastro · Oct 18, 2022 · 5923dd7 · 5923dd7
1 parent 04ce7f4
commit 5923dd7
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 38 deletions.
diff --git a/.changeset/silent-cougars-run.md b/.changeset/silent-cougars-run.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+api routes: adding cookies to the response, also when returning a simple result
diff --git a/examples/ssr/package.json b/examples/ssr/package.json
@@ -11,14 +11,12 @@
     "astro": "astro",
     "server": "node dist/server/entry.mjs"
   },
-  "devDependencies": {},
   "dependencies": {
     "astro": "^1.5.0",
     "svelte": "^3.48.0",
     "@astrojs/svelte": "^1.0.2",
     "@astrojs/node": "^2.0.0",
     "concurrently": "^7.2.1",
-    "lightcookie": "^1.0.25",
     "unocss": "^0.15.6",
     "vite-imagetools": "^4.0.4"
   }

diff --git a/examples/ssr/src/api.ts b/examples/ssr/src/api.ts
@@ -28,6 +28,7 @@ async function get<T>(
 ): Promise<T> {
 	const response = await fetch(`${getOrigin(incomingReq)}${endpoint}`, {
 		credentials: 'same-origin',
+		headers: incomingReq.headers,
 	});
 	if (!response.ok) {
 		// TODO make this better...

diff --git a/examples/ssr/src/models/user.ts b/examples/ssr/src/models/user.ts
diff --git a/examples/ssr/src/pages/api/cart.ts b/examples/ssr/src/pages/api/cart.ts
@@ -1,10 +1,9 @@
 import { APIContext } from 'astro';
-import lightcookie from 'lightcookie';
 import { userCartItems } from '../../models/session';
 
-export function get({ request }: APIContext) {
-	let cookie = request.headers.get('cookie');
-	let userId = cookie ? lightcookie.parse(cookie)['user-id'] : '1'; // default for testing
+export function get({ cookies }: APIContext) {
+	let userId = cookies.get('user-id').value;
+
 	if (!userId || !userCartItems.has(userId)) {
 		return {
 			body: JSON.stringify({ items: [] }),
@@ -23,11 +22,10 @@ interface AddToCartItem {
 	name: string;
 }
 
-export async function post({ request }: APIContext) {
+export async function post({ cookies, request }: APIContext) {
 	const item: AddToCartItem = await request.json();
 
-	let cookie = request.headers.get('cookie');
-	let userId = lightcookie.parse(cookie)['user-id'];
+	let userId = cookies.get('user-id').value;
 
 	if (!userCartItems.has(userId)) {
 		userCartItems.set(userId, new Map());

diff --git a/examples/ssr/src/pages/cart.astro b/examples/ssr/src/pages/cart.astro
@@ -2,9 +2,8 @@
 import Header from '../components/Header.astro';
 import Container from '../components/Container.astro';
 import { getCart } from '../api';
-import { isLoggedIn } from '../models/user';
 
-if (!isLoggedIn(Astro.request)) {
+if (!Astro.cookies.get('user-id').value) {
 	return Astro.redirect('/');
 }
 

diff --git a/examples/ssr/src/pages/login.astro b/examples/ssr/src/pages/login.astro
@@ -11,6 +11,32 @@ import Container from '../components/Container.astro';
 				font-size: 36px;
 			}
 		</style>
+
+		<script type="module" is:inline>
+			document.addEventListener('DOMContentLoaded', () => {
+				console.log('loaded');
+				document.querySelector('form').addEventListener('submit', (e) => {
+					e.preventDefault();
+					const form = e.target;
+					const formData = new FormData(form);
+					const data = Object.fromEntries(formData);
+
+					fetch('/login.form.async', {
+						method: 'POST',
+						body: JSON.stringify(data),
+					})
+						.then((res) => res.json())
+						.then((data) => {
+              document.querySelector("#result").innerHTML = "Progressive login was successful! you will be redirected to the store in 3 seconds";
+              setTimeout(
+                () => location.href = "/",
+                3000
+              );
+
+						});
+				});
+			});
+		</script>
 	</head>
 	<body>
 		<Header />
@@ -26,6 +52,7 @@ import Container from '../components/Container.astro';
 
 				<input type="submit" value="Submit" />
 			</form>
+      <div id="result"></div>
 		</Container>
 	</body>
 </html>
diff --git a/examples/ssr/src/pages/login.form.async.ts b/examples/ssr/src/pages/login.form.async.ts
@@ -0,0 +1,16 @@
+import { APIContext, APIRoute } from 'astro';
+
+export const post: APIRoute = ({ cookies, params, request }: APIContext) => {
+	// add a new cookie
+	cookies.set('user-id', '1', {
+		path: '/',
+		maxAge: 2592000,
+	});
+
+	return {
+		body: JSON.stringify({
+			ok: true,
+			user: 1,
+		}),
+	};
+};
diff --git a/examples/ssr/src/pages/login.form.js b/examples/ssr/src/pages/login.form.js
diff --git a/examples/ssr/src/pages/login.form.ts b/examples/ssr/src/pages/login.form.ts
@@ -0,0 +1,16 @@
+import { APIContext } from 'astro';
+
+export function post({ cookies, params, request }: APIContext) {
+	// add a new cookie
+	cookies.set('user-id', '1', {
+		path: '/',
+		maxAge: 2592000,
+	});
+
+	return new Response(null, {
+		status: 301,
+		headers: {
+			Location: '/',
+		},
+	});
+}
diff --git a/packages/astro/src/core/app/index.ts b/packages/astro/src/core/app/index.ts
@@ -9,7 +9,7 @@ import type { LogOptions } from '../logger/core.js';
 import type { RouteInfo, SSRManifest as Manifest } from './types';
 
 import mime from 'mime';
-import { getSetCookiesFromResponse } from '../cookies/index.js';
+import { attachToResponse, getSetCookiesFromResponse } from '../cookies/index.js';
 import { call as callEndpoint } from '../endpoint/index.js';
 import { consoleLogDestination } from '../logger/console.js';
 import { error } from '../logger/core.js';
@@ -236,10 +236,14 @@ export class App {
 			}
 			const bytes = this.#encoder.encode(body);
 			headers.set('Content-Length', bytes.byteLength.toString());
-			return new Response(bytes, {
+
+			const response = new Response(bytes, {
 				status: 200,
 				headers,
 			});
+
+			attachToResponse(response, result.cookies);
+			return response;
 		}
 	}
 }
diff --git a/packages/astro/src/core/endpoint/index.ts b/packages/astro/src/core/endpoint/index.ts
@@ -13,6 +13,7 @@ type EndpointCallResult =
 			type: 'simple';
 			body: string;
 			encoding?: BufferEncoding;
+			cookies: AstroCookies;
 	  }
 	| {
 			type: 'response';
@@ -109,5 +110,6 @@ export async function call(
 		type: 'simple',
 		body: response.body,
 		encoding: response.encoding,
+		cookies: context.cookies,
 	};
 }
diff --git a/packages/astro/src/vite-plugin-astro-server/index.ts b/packages/astro/src/vite-plugin-astro-server/index.ts
@@ -5,7 +5,7 @@ import type { AstroSettings, ManifestData } from '../@types/astro';
 import { DevelopmentEnvironment, SSROptions } from '../core/render/dev/index';
 
 import { Readable } from 'stream';
-import { getSetCookiesFromResponse } from '../core/cookies/index.js';
+import { attachToResponse, getSetCookiesFromResponse } from '../core/cookies/index.js';
 import { call as callEndpoint } from '../core/endpoint/dev/index.js';
 import {
 	collectErrorMetadata,
@@ -378,8 +378,14 @@ async function handleRoute(
 			if (computedMimeType) {
 				contentType = computedMimeType;
 			}
-			res.writeHead(200, { 'Content-Type': `${contentType};charset=utf-8` });
-			res.end(result.body);
+      const response = new Response(result.body, {
+        status: 200,
+        headers: {
+          'Content-Type': `${contentType};charset=utf-8`,
+        },
+      });
+      attachToResponse(response, result.cookies);
+      await writeWebResponse(res, response);
 		}
 	} else {
 		const result = await renderPage(options);

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml