[#330] Form URL not signed in redirect

apps/blade/src/app/_components/hero.tsx

@@ -2,12 +2,20 @@
 
 import Image from "next/image";
 import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 import { DiscordLogoIcon } from "@radix-ui/react-icons";
 
 import { signIn } from "@forge/auth";
 import { Button } from "@forge/ui/button";
 
 export function Hero() {
+  const searchParams = useSearchParams();
+  const requestedCallbackURL = searchParams.get("callbackURL");
+  const callbackURL =
+    requestedCallbackURL?.startsWith("/forms/") === true
+      ? requestedCallbackURL
+      : "/dashboard";
+
   return (
     <div className="dark:bg-dark relative h-screen w-screen bg-background">
       <div className="absolute bottom-0 left-0 right-0 top-0 hidden bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] dark:block"></div>
@@ -34,7 +42,7 @@ export function Hero() {
                     className="w-full"
                     formAction={async () => {
                       await signIn("discord", {
-                        redirectTo: "/dashboard",
+                        redirectTo: callbackURL,
                       });
                     }}
                   >

apps/blade/src/app/forms/[formName]/[responseId]/page.tsx

@@ -1,19 +1,43 @@
 import { redirect } from "next/navigation";
 
-import { auth } from "@forge/auth";
+import { auth } from "@forge/auth/server";
 
-import { SIGN_IN_PATH } from "~/consts";
 import { api, HydrateClient } from "~/trpc/server";
 import { FormReviewClient } from "../_components/form-view-edit-client";
 
+function serializeSearchParams(
+  searchParams: Record<string, string | string[] | undefined>,
+) {
+  const params = new URLSearchParams();
+
+  for (const [key, value] of Object.entries(searchParams)) {
+    if (value === undefined) continue;
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        params.append(key, entry);
+      }
+      continue;
+    }
+    params.set(key, value);
+  }
+
+  const queryString = params.toString();
+  return queryString ? `?${queryString}` : "";
+}
+
 export default async function FormResponderPage({
   params,
+  searchParams,
 }: {
   params: { responseId: string; formName: string };
+  searchParams: Record<string, string | string[] | undefined>;
 }) {
   const session = await auth();
   if (!session) {
-    redirect(SIGN_IN_PATH);
+    const callbackURL =
+      `/forms/${encodeURIComponent(params.formName)}/${encodeURIComponent(params.responseId)}` +
+      serializeSearchParams(searchParams);
+    redirect(`/?callbackURL=${encodeURIComponent(callbackURL)}`);
   }
 
   if (!params.responseId) {

apps/blade/src/app/forms/[formName]/page.tsx

@@ -4,22 +4,46 @@ import { stringify } from "superjson";
 
 import { appRouter } from "@forge/api";
 import { log } from "@forge/api/utils";
-import { auth } from "@forge/auth";
+import { auth } from "@forge/auth/server";
 import { Card } from "@forge/ui/card";
 
-import { SIGN_IN_PATH } from "~/consts";
 import { extractProcedures } from "~/lib/utils";
 import { api, HydrateClient } from "~/trpc/server";
 import { FormResponderClient } from "./_components/form-responder-client";
 
+function serializeSearchParams(
+  searchParams: Record<string, string | string[] | undefined>,
+) {
+  const params = new URLSearchParams();
+
+  for (const [key, value] of Object.entries(searchParams)) {
+    if (value === undefined) continue;
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        params.append(key, entry);
+      }
+      continue;
+    }
+    params.set(key, value);
+  }
+
+  const queryString = params.toString();
+  return queryString ? `?${queryString}` : "";
+}
+
 export default async function FormResponderPage({
   params,
+  searchParams,
 }: {
   params: { formName: string };
+  searchParams: Record<string, string | string[] | undefined>;
 }) {
   const session = await auth();
   if (!session) {
-    redirect(SIGN_IN_PATH);
+    const callbackURL =
+      `/forms/${encodeURIComponent(params.formName)}` +
+      serializeSearchParams(searchParams);
+    redirect(`/?callbackURL=${encodeURIComponent(callbackURL)}`);
   }
 
   if (!params.formName) {

packages/auth/src/callback-url.ts

@@ -0,0 +1,24 @@
+import { env } from "./env";
+
+const HOME_PATH = "/";
+
+export function sanitizeCallbackURL(callbackURL?: string | null): string {
+  if (!callbackURL) return HOME_PATH;
+
+  try {
+    const appURL = new URL(env.NEXT_PUBLIC_BLADE_URL);
+    const resolved = new URL(callbackURL, appURL);
+
+    if (resolved.origin !== appURL.origin) {
+      return HOME_PATH;
+    }
+
+    if (!resolved.pathname.startsWith("/")) {
+      return HOME_PATH;
+    }
+
+    return `${resolved.pathname}${resolved.search}`;
+  } catch {
+    return HOME_PATH;
+  }
+}

packages/auth/src/index.rsc.ts

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { NextResponse } from "next/server";
 import { toNextJsHandler } from "better-auth/next-js";
 
+import { sanitizeCallbackURL } from "./callback-url";
 import {
   auth as betterAuthInstance,
   invalidateSessionToken,
@@ -36,7 +37,7 @@ export const auth = async () => {
 export async function signInRoute(req: Request) {
   const url = new URL(req.url);
   const provider = url.searchParams.get("provider");
-  const callbackURL = url.searchParams.get("callbackURL") ?? "/dashboard";
+  const callbackURL = sanitizeCallbackURL(url.searchParams.get("callbackURL"));
 
   if (!provider) {
     return NextResponse.json(
@@ -45,6 +46,13 @@ export async function signInRoute(req: Request) {
     );
   }
 
+  if (provider !== "discord") {
+    return NextResponse.json(
+      { error: "Unsupported provider parameter" },
+      { status: 400 },
+    );
+  }
+
   // Call Better Auth API
   const res = await betterAuthInstance.api.signInSocial({
     body: {
@@ -75,6 +83,8 @@ export const signIn = (
   { redirectTo }: { redirectTo: string },
 ) => {
   redirect(
-    `${env.NEXT_PUBLIC_BLADE_URL}/api/auth/signin?provider=${provider}&callbackURL=${redirectTo}`,
+    `${env.NEXT_PUBLIC_BLADE_URL}/api/auth/signin?provider=${encodeURIComponent(
+      provider,
+    )}&callbackURL=${encodeURIComponent(sanitizeCallbackURL(redirectTo))}`,
   );
 };

packages/auth/src/index.ts

@@ -1,5 +1,6 @@
 import { createAuthClient } from "better-auth/react";
 
+import { sanitizeCallbackURL } from "./callback-url";
 import { env } from "./env";
 
 export const authClient = createAuthClient({
@@ -33,7 +34,7 @@ export const signIn = async (
 ) => {
   await authClient.signIn.social({
     provider: provider,
-    callbackURL: redirectTo,
+    callbackURL: sanitizeCallbackURL(redirectTo),
   });
 };