feat: add support for redirectUrl after signup (#2439)

* feat: add support for redirectUrl after signup

* pr review

* more fixes

* format

* another fix

4 files changed, 62 insertions, 14 deletions

diff --git a/apps/web/app/check-email/page.tsx b/apps/web/app/check-email/page.tsx
index 2fbc47fe..50eed4bd 100644
--- a/apps/web/app/check-email/page.tsx
+++ b/apps/web/app/check-email/page.tsx
@@ -15,6 +15,7 @@ import { useMutation } from "@tanstack/react-query";
 import { Loader2, Mail } from "lucide-react";
 
 import { useTRPC } from "@karakeep/shared-react/trpc";
+import { validateRedirectUrl } from "@karakeep/shared/utils/redirectUrl";
 
 export default function CheckEmailPage() {
   const api = useTRPC();
@@ -23,6 +24,8 @@ export default function CheckEmailPage() {
   const [message, setMessage] = useState("");
 
   const email = searchParams.get("email");
+  const redirectUrl =
+    validateRedirectUrl(searchParams.get("redirectUrl")) ?? "/";
 
   const resendEmailMutation = useMutation(
     api.users.resendVerificationEmail.mutationOptions({
@@ -39,7 +42,7 @@ export default function CheckEmailPage() {
 
   const handleResendEmail = () => {
     if (email) {
-      resendEmailMutation.mutate({ email });
+      resendEmailMutation.mutate({ email, redirectUrl });
     }
   };
 
diff --git a/apps/web/app/signup/page.tsx b/apps/web/app/signup/page.tsx
index ee77f65e..5c8b943e 100644
--- a/apps/web/app/signup/page.tsx
+++ b/apps/web/app/signup/page.tsx
@@ -3,10 +3,19 @@ import KarakeepLogo from "@/components/KarakeepIcon";
 import SignUpForm from "@/components/signup/SignUpForm";
 import { getServerAuthSession } from "@/server/auth";
 
-export default async function SignUpPage() {
+import { validateRedirectUrl } from "@karakeep/shared/utils/redirectUrl";
+
+export default async function SignUpPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ redirectUrl?: string }>;
+}) {
   const session = await getServerAuthSession();
+  const { redirectUrl: rawRedirectUrl } = await searchParams;
+  const redirectUrl = validateRedirectUrl(rawRedirectUrl) ?? "/";
+
   if (session) {
-    redirect("/");
+    redirect(redirectUrl);
   }
 
   return (
@@ -15,7 +24,7 @@ export default async function SignUpPage() {
         <div className="flex items-center justify-center">
           <KarakeepLogo height={80} />
         </div>
-        <SignUpForm />
+        <SignUpForm redirectUrl={redirectUrl} />
       </div>
     </div>
   );
diff --git a/apps/web/app/verify-email/page.tsx b/apps/web/app/verify-email/page.tsx
index 899c94d6..5044c63e 100644
--- a/apps/web/app/verify-email/page.tsx
+++ b/apps/web/app/verify-email/page.tsx
@@ -15,6 +15,10 @@ import { useMutation } from "@tanstack/react-query";
 import { CheckCircle, Loader2, XCircle } from "lucide-react";
 
 import { useTRPC } from "@karakeep/shared-react/trpc";
+import {
+  isMobileAppRedirect,
+  validateRedirectUrl,
+} from "@karakeep/shared/utils/redirectUrl";
 
 export default function VerifyEmailPage() {
   const api = useTRPC();
@@ -27,14 +31,26 @@ export default function VerifyEmailPage() {
 
   const token = searchParams.get("token");
   const email = searchParams.get("email");
+  const redirectUrl =
+    validateRedirectUrl(searchParams.get("redirectUrl")) ?? "/";
 
   const verifyEmailMutation = useMutation(
     api.users.verifyEmail.mutationOptions({
       onSuccess: () => {
         setStatus("success");
-        setMessage(
-          "Your email has been successfully verified! You can now sign in.",
-        );
+        if (isMobileAppRedirect(redirectUrl)) {
+          setMessage(
+            "Your email has been successfully verified! Redirecting to the app...",
+          );
+          // Redirect to mobile app after a brief delay
+          setTimeout(() => {
+            window.location.href = redirectUrl;
+          }, 1500);
+        } else {
+          setMessage(
+            "Your email has been successfully verified! You can now sign in.",
+          );
+        }
       },
       onError: (error) => {
         setStatus("error");
@@ -59,6 +75,8 @@ export default function VerifyEmailPage() {
     }),
   );
 
+  const isMobileRedirect = isMobileAppRedirect(redirectUrl);
+
   useEffect(() => {
     if (token && email) {
       verifyEmailMutation.mutate({ token, email });
@@ -70,12 +88,18 @@ export default function VerifyEmailPage() {
 
   const handleResendEmail = () => {
     if (email) {
-      resendEmailMutation.mutate({ email });
+      resendEmailMutation.mutate({ email, redirectUrl });
     }
   };
 
   const handleSignIn = () => {
-    router.push("/signin");
+    if (isMobileRedirect) {
+      window.location.href = redirectUrl;
+    } else if (redirectUrl !== "/") {
+      router.push(`/signin?redirectUrl=${encodeURIComponent(redirectUrl)}`);
+    } else {
+      router.push("/signin");
+    }
   };
 
   return (
@@ -109,7 +133,7 @@ export default function VerifyEmailPage() {
                 </AlertDescription>
               </Alert>
               <Button onClick={handleSignIn} className="w-full">
-                Sign In
+                {isMobileRedirect ? "Open App" : "Sign In"}
               </Button>
             </>
           )}
diff --git a/apps/web/components/signup/SignUpForm.tsx b/apps/web/components/signup/SignUpForm.tsx
index f758bfda..15b64fab 100644
--- a/apps/web/components/signup/SignUpForm.tsx
+++ b/apps/web/components/signup/SignUpForm.tsx
@@ -35,10 +35,15 @@ import { z } from "zod";
 
 import { useTRPC } from "@karakeep/shared-react/trpc";
 import { zSignUpSchema } from "@karakeep/shared/types/users";
+import { isMobileAppRedirect } from "@karakeep/shared/utils/redirectUrl";
 
 const VERIFY_EMAIL_ERROR = "Please verify your email address before signing in";
 
-export default function SignUpForm() {
+interface SignUpFormProps {
+  redirectUrl: string;
+}
+
+export default function SignUpForm({ redirectUrl }: SignUpFormProps) {
   const api = useTRPC();
   const form = useForm<z.infer<typeof zSignUpSchema>>({
     resolver: zodResolver(zSignUpSchema),
@@ -113,7 +118,10 @@ export default function SignUpForm() {
               }
               form.clearErrors("turnstileToken");
               try {
-                await createUserMutation.mutateAsync(value);
+                await createUserMutation.mutateAsync({
+                  ...value,
+                  redirectUrl,
+                });
               } catch (e) {
                 if (e instanceof TRPCClientError) {
                   setErrorMessage(e.message);
@@ -133,7 +141,7 @@ export default function SignUpForm() {
               if (!resp || !resp.ok || resp.error) {
                 if (resp?.error === VERIFY_EMAIL_ERROR) {
                   router.replace(
-                    `/check-email?email=${encodeURIComponent(value.email.trim())}`,
+                    `/check-email?email=${encodeURIComponent(value.email.trim())}&redirectUrl=${encodeURIComponent(redirectUrl)}`,
                   );
                 } else {
                   setErrorMessage(
@@ -147,7 +155,11 @@ export default function SignUpForm() {
                 }
                 return;
               }
-              router.replace("/");
+              if (isMobileAppRedirect(redirectUrl)) {
+                window.location.href = redirectUrl;
+              } else {
+                router.replace(redirectUrl);
+              }
             })}
             className="space-y-4"
           >