Merge pull request #154 from pedrolivaresanchez/fix/signin-redirect-t…

…o-card

fix: on click sign in button - you redirect to home page

.env.example

@@ -1,3 +1,5 @@
+NEXT_PUBLIC_BASE_URL=https://ajudadana.es
+NEXT_PUBLIC_NODE_ENV=production
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 SUPABASE_GOOGLE_AUTH_ID=

src/app/auth/page.tsx

@@ -1,25 +1,34 @@
 'use client';
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import Login from '../../components/auth/Login';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { authService } from '@/lib/service';
 
-export default function AuthPage() {
-  const router = useRouter();
+export default function AUthPage() {
+  return (
+    <Suspense>
+      <Auth />
+    </Suspense>
+  );
+}
 
+function Auth() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const redirect = searchParams.get('redirect') || '/';
   useEffect(() => {
     async function fetchSession() {
       const { data: session } = await authService.getSessionUser();
       if (session.user) {
-        router.push('/');
+        router.push(redirect);
       }
     }
     fetchSession();
   });
 
   return (
     <section className="mx-6 lg:m-16">
-      <Login onSuccessCallback={() => (window.location.href = '/')} />
+      <Login onSuccessCallback={() => router.push(redirect)} redirectUrl={redirect} />
     </section>
   );
 }

src/components/AsignarSolicitudButton.tsx

@@ -10,6 +10,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import Modal from '@/components/Modal';
 import { useModal } from '@/context/ModalProvider';
+import { useRouter } from 'next/navigation';
 
 type AsignarSolicitudButtonProps = {
   helpRequest: HelpRequestData;
@@ -20,6 +21,7 @@ export default function AsignarSolicitudButton({ helpRequest }: AsignarSolicitud
   const session = useSession();
   const userId = session.user?.id;
   const MODAL_NAME = `Solicitud-${helpRequest.id}`;
+  const router = useRouter();
 
   const {
     data: assignments,
@@ -89,12 +91,12 @@ export default function AsignarSolicitudButton({ helpRequest }: AsignarSolicitud
 
   if (!session || !session.user)
     return (
-      <Link
-        href="/auth"
+      <button
+        onClick={() => router.push(`/auth?redirect=${encodeURIComponent('/solicitudes/' + helpRequest.id)}`)}
         className="w-full text-center rounded-xl px-4 py-2 font-semibold text-white sm:w-auto transition-all bg-green-500 hover:bg-green-600"
       >
         Iniciar sesion para ayudar
-      </Link>
+      </button>
     );
 
   // Verifica el email dentro de additional_info utilizando un casting y encadenamiento opcional

src/components/auth/Login.tsx

@@ -7,6 +7,7 @@ import SocialButton from './SocialButton';
 
 type LoginProps = {
   onSuccessCallback: () => void;
+  redirectUrl?: string;
 };
 
 type Status = {
@@ -21,7 +22,7 @@ type FormData = {
   privacyPolicy: string;
 };
 
-export default function Login({ onSuccessCallback }: LoginProps) {
+export default function Login({ onSuccessCallback, redirectUrl }: LoginProps) {
   const [isSignUp, setIsSignUp] = useState<boolean>(false);
   const [formData, setFormData] = useState<FormData>({
     email: '',
@@ -198,7 +199,9 @@ export default function Login({ onSuccessCallback }: LoginProps) {
 
           <div className="p-2">
             <p className="text-center text-gray-700 mb-2">O prueba con estas opciones:</p>
-            <SocialButton provider="google">Inicia sesión con Google</SocialButton>
+            <SocialButton redirectUrl={redirectUrl} provider="google">
+              Inicia sesión con Google
+            </SocialButton>
           </div>
         </form>
       )}
@@ -207,6 +210,7 @@ export default function Login({ onSuccessCallback }: LoginProps) {
           onBackButtonClicked={() => {
             setIsSignUp(false);
           }}
+          callback={onSuccessCallback}
         />
       )}
     </>

src/components/auth/SignUp.tsx

@@ -24,9 +24,10 @@ type Status = {
 
 type SignUpProps = {
   onBackButtonClicked: () => void;
+  callback?: () => void;
 };
 
-export default function SignUp({ onBackButtonClicked }: SignUpProps) {
+export default function SignUp({ onBackButtonClicked, callback = () => {} }: SignUpProps) {
   const [formData, setFormData] = useState<FormData>({
     nombre: '',
     email: '',
@@ -122,7 +123,9 @@ export default function SignUp({ onBackButtonClicked }: SignUpProps) {
     // SIGN IN WITH NEW USER CREATED
     await authService.signIn(formData.email, formData.password);
     // REDIRECT USER TO HOME PAGE
-    window.location.href = '/';
+    if (typeof callback === 'function') {
+      callback();
+    }
   };
 
   return (

src/components/auth/SocialButton.tsx

@@ -6,17 +6,22 @@ import { ReactNode } from 'react';
 type SocialButtonProps = {
   provider: Provider;
   children: ReactNode;
+  redirectUrl?: string;
 };
-export default function SocialButton({ provider, children }: SocialButtonProps) {
+export default function SocialButton({ provider, redirectUrl, children }: SocialButtonProps) {
+  const baseUrl =
+    process.env.NEXT_PUBLIC_ENV === 'production' ? process.env.NEXT_PUBLIC_BASE_URL! : 'http://127.0.0.1:3000';
   const handleLogin = async (provider: Provider) => {
     const { data, error } = await supabase.auth.signInWithOAuth({
       provider,
+      options: {
+        redirectTo: `${baseUrl + redirectUrl}`,
+      },
     });
     if (error) {
       console.error('Error al iniciar sesión con proveedor:', error.message);
       return;
     }
-
     if (data?.url) {
       return redirect(data.url);
     }