9 files changed, 66 insertions, 27 deletions
diff --git a/examples/ssr/package.json b/examples/ssr/package.json
index e792eb3ae..21162e0fb 100644
--- 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
index 32b48e220..1be1f54f0 100644
--- 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
deleted file mode 100644
index a2812a8ad..000000000
--- a/examples/ssr/src/models/user.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import lightcookie from 'lightcookie';
-
-export function isLoggedIn(request: Request): boolean {
-	const cookie = request.headers.get('cookie');
-	const parsed = lightcookie.parse(cookie);
-	return 'user-id' in parsed;
-}
diff --git a/examples/ssr/src/pages/api/cart.ts b/examples/ssr/src/pages/api/cart.ts
index d8bfa31a0..80db01f16 100644
--- 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
index 68286ac61..d153e3ea9 100644
--- 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
index 1b3cb9ede..45643665e 100644
--- 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
new file mode 100644
index 000000000..f98b11cfe
--- /dev/null
+++ 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
deleted file mode 100644
index 134b0185f..000000000
--- a/examples/ssr/src/pages/login.form.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export function post(params, request) {
-	return new Response(null, {
-		status: 301,
-		headers: {
-			Location: '/',
-			'Set-Cookie': 'user-id=1; Path=/; Max-Age=2592000',
-		},
-	});
-}
diff --git a/examples/ssr/src/pages/login.form.ts b/examples/ssr/src/pages/login.form.ts
new file mode 100644
index 000000000..de75c8cb3
--- /dev/null
+++ 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: '/',
+		},
+	});
+}