fix auth

Dockerfile.local

@@ -4,10 +4,12 @@ RUN mkdir -p /app
 
 WORKDIR /app
 
-COPY package.json package-lock.json ./
-RUN npm ci
+COPY package.json ./
+
+RUN npm install
 
 COPY . .
+
 COPY next.config.ts ./next.config.ts
 
 EXPOSE 3000

app/(auth)/login/_components/DesktopForm.tsx

@@ -2,8 +2,8 @@
 import { useFormStatus } from 'react-dom';
 interface Props {
   setMode: (mode: string) => void;
-  registerAction: (e: React.FormEvent<HTMLFormElement>) => void;
-  loginAction: (e: React.FormEvent<HTMLFormElement>) => void;
+  registerAction: (payload: FormData) => void;
+  loginAction: (payload: FormData) => void;
 }
 
 export default function DesktopForm({ setMode, registerAction, loginAction }: Props) {
@@ -16,7 +16,7 @@ export default function DesktopForm({ setMode, registerAction, loginAction }: Pr
           </h1>
           <h2>Inicia sesión para acceder a tus salas</h2>
         </header>
-        <form className="flex flex-col gap-5 w-[80%]" onSubmit={loginAction}>
+        <form className="flex flex-col gap-5 w-[80%]" action={loginAction}>
           <div className="flex flex-col gap-1">
             <label htmlFor="email-login-desktop" className="font-bold">
               Tu correo
@@ -58,7 +58,7 @@ export default function DesktopForm({ setMode, registerAction, loginAction }: Pr
           <h1 className="text-2xl font-extrabold text-center">Regístrate y Conecta</h1>
           <h2>Podrás guardar tus conversaciones y salas</h2>
         </header>
-        <form className="flex flex-col gap-5 w-[80%]" onSubmit={registerAction}>
+        <form className="flex flex-col gap-5 w-[80%]" action={registerAction}>
           <div className="flex flex-col gap-1">
             <label htmlFor="user-register-desktop" className="font-bold">
               Tu usuario
@@ -113,7 +113,7 @@ export default function DesktopForm({ setMode, registerAction, loginAction }: Pr
 function SubmitButton({ text }: { text: string }) {
   const { pending } = useFormStatus();
   return (
-    <button disabled={pending} className="bg-purple rounded p-2">
+    <button disabled={pending} className="bg-purple rounded p-2 cursor-pointer">
       {pending ? 'Cargando...' : text}
     </button>
   );

app/(auth)/login/_components/MobileForm.tsx

@@ -2,8 +2,8 @@
 import { useState } from 'react';
 
 interface Props {
-  registerAction: (e: React.FormEvent<HTMLFormElement>) => void;
-  loginAction: (e: React.FormEvent<HTMLFormElement>) => void;
+  registerAction: (payload: FormData) => void;
+  loginAction: (payload: FormData) => void;
 }
 
 export default function MobileForm({ registerAction, loginAction }: Props) {
@@ -20,7 +20,7 @@ export default function MobileForm({ registerAction, loginAction }: Props) {
           </h1>
           <h2>Inicia sesión para acceder a tus salas</h2>
         </header>
-        <form className="flex flex-col gap-5 w-[80%]" onSubmit={loginAction}>
+        <form className="flex flex-col gap-5 w-[80%]" action={loginAction}>
           <div className="flex flex-col gap-1">
             <label htmlFor="email-login-mobile" className="font-bold">
               Tu correo
@@ -64,7 +64,7 @@ export default function MobileForm({ registerAction, loginAction }: Props) {
           <h1 className="text-2xl font-extrabold text-center">Regístrate y Conecta</h1>
           <h2>Podrás guardar tus conversaciones y salas</h2>
         </header>
-        <form className="flex flex-col gap-5 w-[80%]" onSubmit={registerAction}>
+        <form className="flex flex-col gap-5 w-[80%]" action={registerAction}>
           <div className="flex flex-col gap-1">
             <label htmlFor="user-register-mobile" className="font-bold">
               Tu ususuario

app/(auth)/login/_lib/_actions/session.ts

@@ -10,10 +10,8 @@ export async function createSession(token: string) {
     sameSite: 'lax',
     maxAge: 60 * 60 * 24 * 7, // 1 semana
   });
-  console.log('Session created with token:', token);
 }
 
 export async function deleteSession() {
   (await cookies()).delete('session');
-  console.log('Session deleted');
 }

app/(auth)/login/page.tsx

@@ -11,17 +11,13 @@ export default function Login() {
   const { login, register } = useAuth();
   const router = useRouter();
 
-  const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    await login(formData);
+  const handleLogin = async (payload: FormData) => {
+    await login(payload);
     router.push('/dashboard');
   };
 
-  const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    await register(formData);
+  const handleRegister = async (payload: FormData) => {
+    await register(payload);
     router.push('/dashboard');
   };
 

app/(protected)/layout.tsx

@@ -7,7 +7,7 @@ export default function ProtectedLayout({
 }>) {
   return (
     <div>
-      <main className="text-white flex flex-col-reverse lg:grid lg:grid-cols-[15rem_auto] h-screen w-screen bg-darkpurple">
+      <main className="text-white flex flex-col-reverse lg:grid lg:grid-cols-[15rem_auto] h-dvh w-screen bg-darkpurple">
         <AsideDashboard />
         {children}
       </main>

app/_apis/auth.ts

@@ -1,4 +1,4 @@
-'use server';
+'use client';
 import { RegisterUserData } from '../_lib/_interfaces/IAuth';
 import myAxios from './myAxios.config';
 

app/_apis/myAxios.config.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { getAuth } from 'firebase/auth';
+import { app } from '../_lib/_firebase/firebase.config';
 
 const myAxios = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
@@ -10,12 +11,13 @@ const myAxios = axios.create({
 
 myAxios.interceptors.request.use(
   async config => {
-    const user = getAuth().currentUser;
+    const user = getAuth(app).currentUser;
     if (user) {
       const token = await user.getIdToken();
       config.headers.Authorization = `Bearer ${token}`;
     }
     console.log(process.env.NEXT_PUBLIC_API_URL, 'URL API');
+    console.log(user);
     return config;
   },
   error => {

app/_hooks/useAuth.tsx

@@ -1,20 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { toast } from 'react-toastify';
 import { create } from 'zustand';
-import {
-  browserLocalPersistence,
-  setPersistence,
-  signInWithEmailAndPassword,
-  User,
-} from 'firebase/auth';
+import { signInWithEmailAndPassword, UserInfo } from 'firebase/auth';
 import { auth } from '../_lib/_firebase/firebase.config';
 import { loginSchema, registerSchema } from '../(auth)/login/_lib/_schemas/auth';
 import { registerUser } from '../_apis/auth';
 import { createSession, deleteSession } from '../(auth)/login/_lib/_actions/session';
 
 type Auth = {
-  user: User | null;
-  setUser: (user: User | null) => void;
+  user: UserInfo | null;
+  setUser: (user: UserInfo | null) => void;
   login: (formData: FormData) => Promise<void>;
   register: (formData: FormData) => Promise<void>;
   logout: () => Promise<void>;
@@ -40,8 +35,9 @@ export const useAuth = create<Auth>()(set => ({
 
       await createSession(token);
 
-      await setPersistence(auth, browserLocalPersistence);
-      set({ user });
+      set({ user: user.providerData[0] });
+      window.localStorage.setItem('user', JSON.stringify(user.providerData[0]));
+
       toast.success('Usuario logueado correctamente');
     } catch (error: any) {
       const mensaje =
@@ -72,6 +68,7 @@ export const useAuth = create<Auth>()(set => ({
   },
   logout: async () => {
     await auth.signOut();
+    window.localStorage.removeItem('user');
     await deleteSession();
     set({ user: null });
     toast.success('Usuario deslogueado correctamente');

app/_lib/_firebase/firebase.config.ts

@@ -11,5 +11,5 @@ const firebaseConfig = {
   measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
 };
 
-const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);
+export const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);
 export const auth = getAuth(app);

middleware.ts

@@ -5,8 +5,6 @@ const protectedRoutes = ['/dashboard'];
 const publicRoutes = ['/login', '/login-gest'];
 
 export default async function middleware(req: NextRequest) {
-  console.log('Middleware ejecutándose');
-
   const path = req.nextUrl.pathname;
   const isProtectedRoute = protectedRoutes.includes(path);
   const isPublicRoute = publicRoutes.includes(path);