Fix middleware example (#11742)

* Fix middelware example

* Update examples/middleware/src/pages/api/login.ts

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Update examples/middleware/src/pages/api/logout.ts

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Fix build check for unused by defined variables

---------

Co-authored-by: Raphael B <hephaistos@grewety.com>
Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

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();
 });
 

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>
 

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 });
+};

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 });
+};

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>

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">