diff --git a/examples/middleware/src/middleware.ts b/examples/middleware/src/middleware.ts
index f92b64d440..4854105cae 100644
--- a/examples/middleware/src/middleware.ts
+++ b/examples/middleware/src/middleware.ts
@@ -56,16 +56,27 @@ const validation = defineMiddleware(async (context, next) => {
 	} else if (context.request.url.endsWith('/api/login')) {
 		const response = await next();
 		// the login endpoint will return to us a JSON with username and password
-		const data = await response.json();
-		// we naively check if username and password are equals to some string
-		if (data.username === 'astro' && data.password === 'astro') {
-			// we store the token somewhere outside of locals because the `locals` object is attached to the request
-			// and when doing a redirect, we lose that information
-			loginInfo.token = 'loggedIn';
-			loginInfo.currentTime = new Date().getTime();
-			return context.redirect('/admin');
-		}
-	}
+    if (response.headers.get('content-type') === 'application/json') {
+      const data = await response.json();
+      // we naively check if username and password are equals to some string
+      if (data.username === 'astro' && data.password === 'astro') {
+        // we store the token somewhere outside of locals because the `locals` object is attached to the request
+        // and when doing a redirect, we lose that information
+        loginInfo.token = 'loggedIn';
+        loginInfo.currentTime = new Date().getTime();
+        return context.redirect('/admin');
+      }
+    }
+    return response;
+  } else if (context.request.url.endsWith('/api/logout')) {
+		const response = await next();
+    if (response.ok) {
+      loginInfo.token = undefined;
+      loginInfo.currentTime = undefined;
+      return context.redirect('/login');
+    }
+    return response;
+  }
 	return next();
 });
 
diff --git a/examples/middleware/src/pages/admin.astro b/examples/middleware/src/pages/admin.astro
index 028fd6b080..921758228d 100644
--- a/examples/middleware/src/pages/admin.astro
+++ b/examples/middleware/src/pages/admin.astro
@@ -1,11 +1,16 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
 const user = Astro.locals.user;
 ---
 
 <Layout title="Welcome back!!">
 	<main>
 		<h1>Welcome back <span class="text-gradient">{user.name} {user.surname}</span></h1>
+		{}
+		<ul role="list" class="link-card-grid">
+			<Card href="/api/logout" title="Logout" body="Logout now" />
+		</ul>
 	</main>
 </Layout>
 
diff --git a/examples/middleware/src/pages/api/login.ts b/examples/middleware/src/pages/api/login.ts
new file mode 100644
index 0000000000..24012444cf
--- /dev/null
+++ b/examples/middleware/src/pages/api/login.ts
@@ -0,0 +1,21 @@
+import type { APIRoute, APIContext } from "astro";
+
+export const POST: APIRoute = async (context: APIContext) => {
+  try {
+    const data = await context.request.formData();
+    return new Response(
+      JSON.stringify({
+        username: data.get("username"),
+        password: data.get("password"),
+      }),
+      {
+        headers: { "Content-Type": "application/json" },
+      }
+    );
+  } catch (e) {
+    if (e instanceof Error) {
+      console.error(e.message);
+    }
+  }
+  return new Response(null, { status: 400 });
+};
diff --git a/examples/middleware/src/pages/api/logout.ts b/examples/middleware/src/pages/api/logout.ts
new file mode 100644
index 0000000000..b6c6e9e060
--- /dev/null
+++ b/examples/middleware/src/pages/api/logout.ts
@@ -0,0 +1,5 @@
+import type { APIRoute, APIContext } from "astro";
+
+export const GET: APIRoute = async (_: APIContext) => {
+  return new Response(null, { status: 200 });
+};
diff --git a/examples/middleware/src/pages/index.astro b/examples/middleware/src/pages/index.astro
index ff77d4a152..bd934ff946 100644
--- a/examples/middleware/src/pages/index.astro
+++ b/examples/middleware/src/pages/index.astro
@@ -12,7 +12,7 @@ import Card from '../components/Card.astro';
 		</p>
 		{}
 		<ul role="list" class="link-card-grid">
-			<Card href="/login" title="Login" body="Try the login" />
+			<Card href="/login" title="Login" body="Try the login with astro/astro" />
 		</ul>
 	</main>
 </Layout>
diff --git a/examples/middleware/src/pages/login.astro b/examples/middleware/src/pages/login.astro
index 99cf4cc947..ec30d35442 100644
--- a/examples/middleware/src/pages/login.astro
+++ b/examples/middleware/src/pages/login.astro
@@ -14,6 +14,7 @@ if (status === 301) {
 		<p class="instructions">
 			To get started, open the directory <code>src/pages</code> in your project.<br />
 			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+      <strong>Login with:</strong> Username: <code>astro</code> Password: <code>astro</code>
 		</p>
 		{redirectMessage}
 		<form action="/api/login" method="POST">