Sistema de Login y Registro con Autenticación JWT

backend/settings.py

@@ -44,11 +44,13 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-	'rest_framework',
+    'corsheaders',
+    'rest_framework',
     'api',
 ]
 
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware', # debe ir primero
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -58,6 +60,10 @@
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:5173",
+]
+
 REST_FRAMEWORK = {
     'DEFAULT_RENDERER_CLASSES': (
         'rest_framework.renderers.JSONRenderer',

package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "19.1.1",
-    "react-dom": "19.1.1"
+    "react-dom": "19.1.1",
+    "react-router-dom": "7.9.3"
   },
   "devDependencies": {
     "@eslint/js": "9.35.0",

requirements.txt

@@ -1,5 +1,6 @@
 asgiref==3.9.1
 Django==5.2.6
+django-cors-headers==4.9.0
 djangorestframework==3.16.1
 djangorestframework_simplejwt==5.5.1
 gunicorn==23.0.0

src/App.tsx

@@ -1,12 +1,24 @@
 import './styles/App.css'
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { ProtectedRoute } from './components/ProtectedRoute';
 import { StartPage } from './pages/StartPage';
+import { MainPage } from './pages/MainPage';
 import { Footer } from './components/Footer';
 
 export function App() {
-    return (
-        <div className="App">
-            <StartPage />
-            <Footer />
-        </div>
+     return (
+        <BrowserRouter basename="/Clontube/">
+            <div className="App">
+                <Routes>
+                    <Route path="/" element={<StartPage />} />
+                    <Route path="/main/" element={ 
+                        <ProtectedRoute>
+                            <MainPage />
+                        </ProtectedRoute>
+                    } />
+                </Routes>
+                <Footer />
+            </div>
+        </BrowserRouter>
     );
 };

src/components/FormLogin.test.tsx

@@ -1,13 +1,19 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import { FormLogin } from './FormLogin';
 import { LoginViewProvider } from '../providers/LoginViewProvider';
+import { AuthenticationProvider } from '../providers/AuthenticationProvider';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('FormLogin component', () => {
     function renderWithProvider() {
         return render(
-            <LoginViewProvider>
-                <FormLogin />
-            </LoginViewProvider>
+            <AuthenticationProvider>
+                <MemoryRouter>
+                    <LoginViewProvider>
+                        <FormLogin />
+                    </LoginViewProvider>
+                </MemoryRouter>
+            </AuthenticationProvider>
         );
     }
 

src/components/FormLogin.tsx

@@ -1,19 +1,31 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useLoginView } from '../hooks/useLoginView';
+import { useAuthentication } from '../hooks/useAuthentication';
 import { Input } from './Input';
 
 export function FormLogin() {
+    const navigate = useNavigate();
     const { LOGIN_VIEW_STATE, setLoginFields } = useLoginView();
+    const { login } = useAuthentication();
 
     const [identifier, setIdentifier] = useState(LOGIN_VIEW_STATE.loginFields.identifier || '');
     const [password, setPassword] = useState('');
 
+    const handleLogin = async (e: React.FormEvent) => {
+        e.preventDefault();
+        const success = await login(identifier, password);
+        if (success) {
+            navigate('/main/');
+        }
+    };
+
     useEffect(() => {
         setLoginFields({ identifier });
     }, [setLoginFields, identifier]);
 
     return (
-        <form className="login-form">
+        <form className="login-form" onSubmit={handleLogin}>
             <h2>Iniciar Sesión</h2>
             <Input type="USERNAME" label="Usuario / Correo Electrónico" field={identifier} onChange={setIdentifier} />
             <Input type="PASSWORD" label="Contraseña" field={password} onChange={setPassword} />

src/components/FormRegister.tsx

@@ -3,7 +3,7 @@ import { useLoginView } from '../hooks/useLoginView';
 import { Input } from './Input';
 
 export function FormRegister() {
-    const { LOGIN_VIEW_STATE, setRegisterFields } = useLoginView();
+    const { LOGIN_VIEW_STATE, showLogin, setRegisterFields, clearFields } = useLoginView();
 
     const [full_name, setFullName] = useState(LOGIN_VIEW_STATE.registerFields.full_name);
     const [username, setUsername] = useState(LOGIN_VIEW_STATE.registerFields.username);
@@ -19,6 +19,31 @@ export function FormRegister() {
         setRegisterFields({ full_name, username, email });
     }, [setRegisterFields, full_name, username, email]);
 
+    async function handleRegister(e: React.FormEvent) {
+        if (emailError || passwordError) return;
+
+        e.preventDefault();
+
+        try {
+            const res = await fetch('https://backend-9tcm.onrender.com/api/users/', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ full_name, username, email, password }),
+            });
+            const data = await res.json();
+            if (res.ok && data.success) {
+                clearFields();
+                // Registro exitoso, redirigir o mostrar mensaje
+                showLogin();
+
+            } else {
+                // Manejar error de registro
+            }
+        } catch {
+            // Manejar error de peticion
+        }
+    }
+
     function handleEmailBlur() {
         if (email && confirmEmail && email !== confirmEmail) {
             setEmailError(true);
@@ -52,7 +77,7 @@ export function FormRegister() {
     }
 
     return (
-        <form className="register-form">
+        <form className="register-form" onSubmit={handleRegister}>
             <h2>Registrarse</h2>
             <Input type="FULL_NAME" label="Nombre Completo" field={full_name} onChange={setFullName} />
             <Input type="USERNAME" label="Usuario" field={username} onChange={setUsername} />

src/components/LoginRegisterPanel.test.tsx

@@ -1,13 +1,19 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import { LoginRegisterPanel } from './LoginRegisterPanel';
 import { LoginViewProvider } from '../providers/LoginViewProvider';
+import { AuthenticationProvider } from '../providers/AuthenticationProvider';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('LoginRegisterPanel component', () => {
     function renderWithProvider() {
         return render(
-            <LoginViewProvider>
-                <LoginRegisterPanel />
-            </LoginViewProvider>
+            <AuthenticationProvider>
+                <MemoryRouter>
+                    <LoginViewProvider>
+                        <LoginRegisterPanel />
+                    </LoginViewProvider>
+                </MemoryRouter>
+            </AuthenticationProvider>
         );
     }
 

src/components/ProtectedRoute.tsx

@@ -0,0 +1,16 @@
+import { useNavigate } from "react-router-dom";
+import React, { useEffect } from "react";
+import { useAuthentication } from "../hooks/useAuthentication";
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+    const navigate = useNavigate();
+    const { AUTH_STATE } = useAuthentication();
+
+    useEffect(() => {
+        if (AUTH_STATE.isAuthenticated === false) {
+            navigate("/");
+        }
+    }, [AUTH_STATE.isAuthenticated, navigate]);
+
+    return <>{children}</>;
+};

src/contexts/AuthenticationContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import type { AuthContextType } from '../utils/types';
+
+export const AuthenticationContext = createContext<AuthContextType | undefined>(undefined);

src/hooks/useAuthentication.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AuthenticationContext } from '../contexts/AuthenticationContext';
+
+export function useAuthentication() {
+    const context = useContext(AuthenticationContext);
+    if (!context) {
+        throw new Error('useAuthentication must be used within a AuthenticationProvider');
+    }
+    return context;
+}

src/hooks/useLoginView.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { LoginViewContext } from '../contexts/loginViewContext';
+import { LoginViewContext } from '../contexts/LoginViewContext';
 
 export function useLoginView() {
     const context = useContext(LoginViewContext);

src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './styles/index.css'
 import { App } from './App.tsx'
+import { AuthenticationProvider } from './providers/AuthenticationProvider.tsx'
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+    <StrictMode>
+        <AuthenticationProvider>
+            <App />
+        </AuthenticationProvider>
+    </StrictMode>,
 )

src/pages/MainPage.tsx

@@ -0,0 +1,19 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuthentication } from '../hooks/useAuthentication';
+
+export function MainPage() {
+    const navigate = useNavigate();
+    const { AUTH_STATE, logout } = useAuthentication();
+
+    const handleLogout = () => {
+        logout();
+        navigate('/');
+    }
+    return (
+        <div>
+            <h2>Main Page</h2>
+            <p>Welcome, {AUTH_STATE.user ? AUTH_STATE.user.username : 'Guest'}!</p>
+            <button className="btn" onClick={handleLogout}>Logout</button>
+        </div>
+    )
+}