From 0725c0c8803ba9305eb33213fbcbb78f6f1bfb3c Mon Sep 17 00:00:00 2001
From: Abubaker779 <abubakaransari7798@gmail.com>
Date: Tue, 19 Nov 2024 19:38:07 +0530
Subject: [PATCH 1/2] issue-#375/now persists callback url across navigation

---
 components/auth/signin.tsx    |  7 +++++--
 components/auth/signup.tsx    |  8 +++++---
 components/ui/authbutton.tsx  |  8 ++++++--
 components/ui/mobile-menu.tsx |  8 ++++++--
 hooks/useSigningUrl.ts        | 37 +++++++++++++++++++++++++++++++++++
 5 files changed, 59 insertions(+), 9 deletions(-)
 create mode 100644 hooks/useSigningUrl.ts

diff --git a/components/auth/signin.tsx b/components/auth/signin.tsx
index 59c66c037..471cfb1dd 100644
--- a/components/auth/signin.tsx
+++ b/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
diff --git a/components/auth/signup.tsx b/components/auth/signup.tsx
index cf0043fee..e51377ee4 100644
--- a/components/auth/signup.tsx
+++ b/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
diff --git a/components/ui/authbutton.tsx b/components/ui/authbutton.tsx
index 94694e665..8fa97bae2 100644
--- a/components/ui/authbutton.tsx
+++ b/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"
diff --git a/components/ui/mobile-menu.tsx b/components/ui/mobile-menu.tsx
index 0fba202f4..e3a87e19c 100644
--- a/components/ui/mobile-menu.tsx
+++ b/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"
diff --git a/hooks/useSigningUrl.ts b/hooks/useSigningUrl.ts
new file mode 100644
index 000000000..3d3a44ec8
--- /dev/null
+++ b/hooks/useSigningUrl.ts
@@ -0,0 +1,37 @@
+"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=${encodeURIComponent(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=${encodeURIComponent(callbackForDesktopApp)}`:''}`
+    return [signupUrl]
+}
+
+
+
+

From ac8bf8716970c0cdd0b73a1695d59a69f59de8b9 Mon Sep 17 00:00:00 2001
From: Abubaker779 <abubakaransari7798@gmail.com>
Date: Tue, 19 Nov 2024 20:22:35 +0530
Subject: [PATCH 2/2] issue-#375/modified the useSigninUrl.ts to reduce the
 encoding

---
 hooks/useSigningUrl.ts | 61 ++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/hooks/useSigningUrl.ts b/hooks/useSigningUrl.ts
index 3d3a44ec8..0d9ac9a4a 100644
--- a/hooks/useSigningUrl.ts
+++ b/hooks/useSigningUrl.ts
@@ -1,37 +1,34 @@
 "use Client";
 
 import { useState, useEffect } from "react";
-import { useSearchParams } from "next/navigation";  
+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=${encodeURIComponent(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=${encodeURIComponent(callbackForDesktopApp)}`:''}`
-    return [signupUrl]
-}
-
-
-
-
+// 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];
+};