feat: redirect()

routes/account/display-name.tsx

@@ -14,6 +14,7 @@ import {
   type User,
 } from "@/utils/db.ts";
 import type { AccountState } from "./_middleware.ts";
+import { redirect } from "@/utils/http.ts";
 
 interface DisplayNamePageData {
   user: User;
@@ -37,19 +38,11 @@ export const handler: Handlers<DisplayNamePageData, AccountState> = {
       }
 
       await setUserDisplayName(ctx.state.session.user.id, displayName);
-      return new Response(null, {
-        headers: { location: "/account" },
-        status: 303,
-      });
+      return redirect("/account");
     } catch (error) {
-      return new Response(null, {
-        headers: {
-          location: `/account/display-name?error=${
-            encodeURIComponent(error.message)
-          }`,
-        },
-        status: 303,
-      });
+      return redirect(
+        `/account/display-name?error=${encodeURIComponent(error.message)}`,
+      );
     }
   },
 };

routes/account/manage.ts

@@ -3,6 +3,7 @@ import type { Handlers } from "$fresh/server.ts";
 import { stripe } from "@/utils/payments.ts";
 import type { AccountState } from "./_middleware.ts";
 import { getOrCreateUser } from "@/utils/db.ts";
+import { redirect } from "@/utils/http.ts";
 
 // deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, AccountState> = {
@@ -17,11 +18,6 @@ export const handler: Handlers<any, AccountState> = {
       return_url: new URL(req.url).origin + "/account",
     });
 
-    return new Response(null, {
-      headers: {
-        location: url,
-      },
-      status: 302,
-    });
+    return redirect(url);
   },
 };

routes/account/reset-password.tsx

@@ -8,6 +8,7 @@ import {
   INPUT_STYLES,
   NOTICE_STYLES,
 } from "@/utils/constants.ts";
+import { redirect } from "@/utils/http.ts";
 
 export const handler: Handlers = {
   async GET(request, ctx) {
@@ -16,10 +17,7 @@ export const handler: Handlers = {
       .auth.getSession();
 
     if (error) {
-      return new Response(null, {
-        headers: { location: `/reset-password?error=${error.message}` },
-        status: 302,
-      });
+      return redirect(`/reset-password?error=${error.message}`);
     }
 
     return ctx.render();

routes/account/upgrade.ts

@@ -3,6 +3,7 @@ import type { Handlers } from "$fresh/server.ts";
 import { stripe } from "@/utils/payments.ts";
 import type { AccountState } from "./_middleware.ts";
 import { getOrCreateUser } from "@/utils/db.ts";
+import { redirect } from "@/utils/http.ts";
 
 export const handler: Handlers<null, AccountState> = {
   async GET(req, ctx) {
@@ -27,11 +28,6 @@ export const handler: Handlers<null, AccountState> = {
       mode: "subscription",
     });
 
-    return new Response(null, {
-      headers: {
-        location: url!,
-      },
-      status: 302,
-    });
+    return redirect(url);
   },
 };

routes/forgot-password.tsx

@@ -8,6 +8,7 @@ import {
   NOTICE_STYLES,
 } from "@/utils/constants.ts";
 import type { State } from "./_middleware.ts";
+import { redirect } from "@/utils/http.ts";
 
 // deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, State> = {
@@ -23,20 +24,12 @@ export const handler: Handlers<any, State> = {
     );
 
     if (error) {
-      return new Response(null, {
-        headers: {
-          location: `/forgot-password?error=${
-            encodeURIComponent(error.message)
-          }`,
-        },
-        status: 302,
-      });
+      return redirect(
+        `/forgot-password?error=${encodeURIComponent(error.message)}`,
+      );
     }
 
-    return new Response(null, {
-      headers: { location: "/forgot-password?success=1" },
-      status: 302,
-    });
+    return redirect("/forgot-password?success=1");
   },
 };
 

routes/item/[id].tsx

@@ -22,6 +22,7 @@ import {
   type Item,
   type User,
 } from "@/utils/db.ts";
+import { redirect } from "@/utils/http.ts";
 
 interface ItemPageData extends State {
   user: User;
@@ -62,13 +63,8 @@ export const handler: Handlers<ItemPageData, State> = {
   },
   async POST(req, ctx) {
     if (!ctx.state.session) {
-      return new Response(null, {
-        headers: {
-          /** @todo Figure out `redirect_to` query */
-          location: "/login",
-        },
-        status: 302,
-      });
+      /** @todo Figure out `redirect_to` query */
+      return redirect("/login");
     }
 
     const form = await req.formData();
@@ -84,10 +80,7 @@ export const handler: Handlers<ItemPageData, State> = {
       text,
     });
 
-    return new Response(null, {
-      headers: { location: `/item/${ctx.params.id}` },
-      status: 302,
-    });
+    return redirect(`/item/${ctx.params.id}`);
   },
 };
 

routes/login/index.tsx

@@ -7,6 +7,7 @@ import { NOTICE_STYLES } from "@/utils/constants.ts";
 import { REDIRECT_PATH_AFTER_LOGIN } from "@/utils/constants.ts";
 import type { State } from "@/routes/_middleware.ts";
 import { BUTTON_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
+import { redirect } from "@/utils/http.ts";
 
 // deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, State> = {
@@ -19,13 +20,7 @@ export const handler: Handlers<any, State> = {
       .getSession();
 
     if (session) {
-      return new Response(null, {
-        headers: {
-          location: "/",
-        },
-        /** @todo Confirm whether this HTTP redirect status code is correct */
-        status: 302,
-      });
+      return redirect("/");
     }
 
     return ctx.render();
@@ -44,10 +39,7 @@ export const handler: Handlers<any, State> = {
       redirectUrl = `/login?error=${encodeURIComponent(error.message)}`;
     }
 
-    return new Response(null, {
-      headers: { location: redirectUrl },
-      status: 302,
-    });
+    return redirect(redirectUrl);
   },
 };
 

routes/login/oauth.ts

@@ -2,6 +2,7 @@
 import type { Handlers } from "$fresh/server.ts";
 import type { Provider } from "@supabase/supabase-js";
 import { State } from "@/routes/_middleware.ts";
+import { redirect } from "@/utils/http.ts";
 
 // deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, State> = {
@@ -25,6 +26,6 @@ export const handler: Handlers<any, State> = {
 
     if (error) throw error;
 
-    return new Response(null, { headers: { location: data.url }, status: 302 });
+    return redirect(data.url);
   },
 };

routes/logout.ts

@@ -1,5 +1,6 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
 import type { Handlers } from "$fresh/server.ts";
+import { redirect } from "@/utils/http.ts";
 import type { State } from "./_middleware.ts";
 
 // deno-lint-ignore no-explicit-any
@@ -8,6 +9,6 @@ export const handler: Handlers<any, State> = {
     const { error } = await ctx.state.supabaseClient.auth.signOut();
     if (error) throw error;
 
-    return new Response(null, { headers: { location: "/" }, status: 302 });
+    return redirect("/");
   },
 };

routes/signup.tsx

@@ -10,6 +10,7 @@ import type { State } from "./_middleware.ts";
 import { stripe } from "@/utils/payments.ts";
 import { createUser } from "@/utils/db.ts";
 import { BUTTON_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
+import { redirect } from "@/utils/http.ts";
 
 // deno-lint-ignore no-explicit-any
 export const handler: Handlers<any, State> = {
@@ -23,12 +24,7 @@ export const handler: Handlers<any, State> = {
       .auth.signUp({ email, password });
 
     if (error) {
-      return new Response(null, {
-        headers: {
-          location: `/signup?error=${encodeURIComponent(error.message)}`,
-        },
-        status: 302,
-      });
+      return redirect(`/signup?error=${encodeURIComponent(error.message)}`);
     }
 
     const { id } = await stripe.customers.create({ email });
@@ -40,10 +36,8 @@ export const handler: Handlers<any, State> = {
 
     const redirectUrl = new URL(req.url).searchParams.get("redirect_url") ??
       REDIRECT_PATH_AFTER_LOGIN;
-    return new Response(null, {
-      headers: { location: redirectUrl },
-      status: 302,
-    });
+
+    return redirect(redirectUrl);
   },
 };
 

routes/submit.tsx

@@ -5,17 +5,12 @@ import Layout from "@/components/Layout.tsx";
 import { BUTTON_STYLES, INPUT_STYLES } from "@/utils/constants.ts";
 import type { State } from "@/routes/_middleware.ts";
 import { createItem } from "@/utils/db.ts";
+import { redirect } from "@/utils/http.ts";
 
 export const handler: Handlers<State, State> = {
   GET(req, ctx) {
     if (!ctx.state.session) {
-      return new Response(null, {
-        headers: {
-          location: `/login?redirect_url=${encodeURIComponent(req.url)}`,
-        },
-        /** @todo Confirm whether this HTTP redirect status code is correct */
-        status: 302,
-      });
+      return redirect(`/login?redirect_url=${encodeURIComponent(req.url)}`);
     }
 
     return ctx.render(ctx.state);
@@ -47,10 +42,7 @@ export const handler: Handlers<State, State> = {
       url,
     });
 
-    return new Response(null, {
-      headers: { location: `/item/${item!.id}` },
-      status: 302,
-    });
+    return redirect(`/item/${item!.id}`);
   },
 };
 

utils/auth.ts

@@ -3,6 +3,7 @@ import type { MiddlewareHandlerContext } from "$fresh/server.ts";
 
 import { createServerSupabaseClient } from "@supabase/auth-helpers-shared";
 import { getCookies, setCookie } from "std/http/cookie.ts";
+import { redirect } from "./http.ts";
 
 export type SupabaseClient = ReturnType<typeof createSupabaseClient>;
 
@@ -37,13 +38,7 @@ export async function ensureLoggedInMiddleware(
   ctx: MiddlewareHandlerContext,
 ) {
   if (!ctx.state.session) {
-    return new Response(null, {
-      headers: {
-        location: `/login?redirect_url=${encodeURIComponent(req.url)}`,
-      },
-      /** @todo Confirm whether this HTTP redirect status code is correct */
-      status: 302,
-    });
+    return redirect(`/login?redirect_url=${encodeURIComponent(req.url)}`);
   }
 
   return await ctx.next();

utils/http.ts

@@ -0,0 +1,23 @@
+// Copyright 2023 the Deno authors. All rights reserved. MIT license.
+import type { RedirectStatus, Status } from "std/http/http_status.ts";
+
+/**
+ * This function is used rather than `Response.redirect()`.
+ * `Response.redirect()` will throw if `Response.headers` is modified.
+ * `Response.headers` is modified when setting session cookies for Supabase Auth.
+ *
+ * @param location A relative (to the request URL) or absolute URL.
+ * @param status HTTP status
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Location}
+ */
+export function redirect(
+  location: string,
+  status: Status.Created | RedirectStatus = 303,
+) {
+  return new Response(null, {
+    headers: {
+      location,
+    },
+    status,
+  });
+}

utils/http_test.ts

@@ -0,0 +1,24 @@
+// Copyright 2023 the Deno authors. All rights reserved. MIT license.
+import { redirect } from "./http.ts";
+import { assert, assertEquals } from "std/testing/asserts.ts";
+
+Deno.test("[http] redirect() defaults", () => {
+  const location = "/hello-there";
+
+  const response = redirect(location);
+  assert(!response.ok);
+  assertEquals(response.body, null);
+  assertEquals(response.headers.get("location"), location);
+  assertEquals(response.status, 303);
+});
+
+Deno.test("[http] redirect()", () => {
+  const location = "/hello-there";
+  const status = 302;
+
+  const response = redirect(location, status);
+  assert(!response.ok);
+  assertEquals(response.body, null);
+  assertEquals(response.headers.get("location"), location);
+  assertEquals(response.status, status);
+});