Abubaker779/ ( issue-#375 ) now persistent callback url across navigation.

components/auth/signin.tsx

@@ -21,12 +21,15 @@ import {
 import { SignInFormData, signInSchema } from "@/utils/form-schema";
 import { useSearchParams } from "next/navigation";
 import { useToggle } from "@/hooks/useToggle";
+import { useSignUpUrl } from "@/hooks/useSigningUrl";
 
 export default function SignIn() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  // for handling callback URL
   const searchParams = useSearchParams();
-  const callbackForDesktopApp = searchParams?.get("callback") ?? "";
+  const callbackForDesktopApp = searchParams?.get("callback") || "";
+  const [signupURL] = useSignUpUrl();
 
   const form = useForm<SignInFormData>({
     resolver: zodResolver(signInSchema),
@@ -212,7 +215,7 @@ export default function SignIn() {
             <div className="mt-6 text-center text-gray-600">
               Don&apos;t have an account?{" "}
               <Link
-                href="/signup"
+                href={signupURL}
                 className="text-gray-800 transition duration-150 ease-in-out hover:text-primary-800"
               >
                 Sign up

components/auth/signup.tsx

@@ -18,10 +18,10 @@ import {
 } from "@/components/ui/form";
 import { signUpSchema, SignUpFormData } from "@/utils/form-schema";
 import { toast, Toaster } from "sonner";
-import { useRouter } from "next/navigation";
 import { Label } from "@/components/ui/label";
 import { Checkbox } from "@/components/ui/checkbox";
 import { useToggle } from "@/hooks/useToggle";
+import { useSignInUrl } from "@/hooks/useSigningUrl";
 
 export default function SignUp() {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -35,7 +35,8 @@ export default function SignUp() {
       heard_about_us: "",
     },
   });
-  const router = useRouter();
+  // For handling the callback URL 
+  const [signinURL] = useSignInUrl();
 
   const handleSignUp = async (data: SignUpFormData) => {
     if (isSubmitting) return;
@@ -280,7 +281,8 @@ export default function SignUp() {
             <div className="mt-6 text-center text-gray-600">
               Already have an account?{" "}
               <Link
-                href="/signin"
+                // href={callbackForDesktopApp?`/signin?callback=${callbackForDesktopApp}`:"/signin"}
+                href={signinURL}
                 className="text-gray-800 underline transition duration-150 ease-in-out hover:text-primary-800"
               >
                 Sign in

components/ui/authbutton.tsx

@@ -10,6 +10,7 @@ import {
 } from "./dropdown-menu";
 import { AuthError, User } from "@supabase/supabase-js";
 import Link from "next/link";
+import { useSignInUrl, useSignUpUrl } from "@/hooks/useSigningUrl";
 
 export default function AuthButton({
   handleSignOut,
@@ -18,17 +19,20 @@ export default function AuthButton({
   handleSignOut: () => Promise<void>;
   user: User | null;
 }) {
+  const [signinUrl] = useSignInUrl();
+  const [signupUrl] = useSignUpUrl();
+
   return (
     <div className="flex items-center space-x-4">
       {!user ? (
         <div className="m-0 inline-flex rounded-lg border border-gray-300 p-0 dark:border-gray-100">
-          <Link href="/signin">
+          <Link href={signinUrl}>
             <Button variant="ghost" className="h-8 rounded-r-none px-3">
               Sign in
             </Button>
           </Link>
           <div className="w-[1px] self-stretch bg-gray-300 dark:bg-gray-100" />
-          <Link href="/signup">
+          <Link href={signupUrl}>
             <Button
               variant="ghost"
               className="h-8 rounded-l-none border-0 px-3"

components/ui/mobile-menu.tsx

@@ -21,6 +21,7 @@ import { useTheme } from "next-themes";
 import { MoonStar, Sun } from "lucide-react";
 import { User } from "@supabase/supabase-js";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useSignInUrl, useSignUpUrl } from "@/hooks/useSigningUrl";
 
 export default function MobileMenu({
   user,
@@ -32,6 +33,9 @@ export default function MobileMenu({
   const [isOpen, setIsOpen] = useState(false);
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const [signinUrl] = useSignInUrl();
+  const [signupUrl] = useSignUpUrl();
+
 
   useEffect(() => {
     setMounted(true);
@@ -119,7 +123,7 @@ export default function MobileMenu({
                   </>
                 ) : (
                   <>
-                    <Link href="/signin" onClick={() => setIsOpen(false)}>
+                    <Link href={signinUrl} onClick={() => setIsOpen(false)}>
                       <Button
                         variant="outline"
                         className="w-full justify-start"
@@ -128,7 +132,7 @@ export default function MobileMenu({
                         Sign in
                       </Button>
                     </Link>
-                    <Link href="/signup" onClick={() => setIsOpen(false)}>
+                    <Link href={signupUrl} onClick={() => setIsOpen(false)}>
                       <Button
                         variant="outline"
                         className="mt-4 w-full justify-start"

hooks/useSigningUrl.ts

@@ -0,0 +1,34 @@
+"use Client";
+
+import { useState, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+
+type UrlHookReturn = [string];
+// for handling signin URL
+export const useSignInUrl = (): UrlHookReturn => {
+  const searchParams = useSearchParams();
+  const [callbackForDesktopApp, setCallbackForDesktopApp] =
+    useState<string>("");
+
+  useEffect(() => {
+    const callback: string = searchParams.get("callback") ?? "";
+    setCallbackForDesktopApp(callback);
+  }, [searchParams]);
+
+  const signinUrl: string = `/signin${callbackForDesktopApp ? `?callback=${callbackForDesktopApp}` : ""}`;
+  return [signinUrl];
+};
+
+// for handling signup URL
+export const useSignUpUrl = (): UrlHookReturn => {
+  const searchParams = useSearchParams();
+  const [callbackForDesktopApp, setCallbackForDesktopApp] =
+    useState<string>("");
+
+  useEffect(() => {
+    const callback: string = searchParams.get("callback") ?? "";
+    setCallbackForDesktopApp(callback);
+  }, [searchParams]);
+  const signupUrl: string = `/signup${callbackForDesktopApp ? `?callback=${callbackForDesktopApp}` : ""}`;
+  return [signupUrl];
+};