From 11e825c64f9275aecced19359839833730a9e20b Mon Sep 17 00:00:00 2001 From: klaas Date: Sun, 29 Sep 2024 02:53:40 +0200 Subject: [PATCH] Login mit jwt --- app/app/globals.css | 6 --- app/app/page.tsx | 2 + app/app/spiele/[id]/page.tsx | 5 +- app/app/spiele/page.tsx | 2 +- app/components/Login.tsx | 79 +++++++++++++++++++++------- app/middleware.ts | 19 +++++++ app/package.json | 13 +++-- server/app.js | 9 ++++ server/controllers/userController.js | 21 ++++---- server/package.json | 1 + 10 files changed, 111 insertions(+), 46 deletions(-) create mode 100644 app/middleware.ts diff --git a/app/app/globals.css b/app/app/globals.css index ac3a76c..2b58bca 100644 --- a/app/app/globals.css +++ b/app/app/globals.css @@ -7,12 +7,6 @@ --foreground: #171717; } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} body { color: var(--foreground); diff --git a/app/app/page.tsx b/app/app/page.tsx index 41039de..65d3cb3 100644 --- a/app/app/page.tsx +++ b/app/app/page.tsx @@ -1,4 +1,5 @@ import Counter from "@/components/Counter"; +import Login from "@/components/Login"; export default function Home() { @@ -6,6 +7,7 @@ export default function Home() { return (

My first Next App

+ < Counter /> diff --git a/app/app/spiele/[id]/page.tsx b/app/app/spiele/[id]/page.tsx index dbb09be..c93e1d9 100644 --- a/app/app/spiele/[id]/page.tsx +++ b/app/app/spiele/[id]/page.tsx @@ -1,7 +1,7 @@ import React from 'react' import Link from "next/link"; -type response = { +type res = { message: string; game: spiel; } @@ -20,8 +20,7 @@ async function spiel({params}:{params:{id:number}}) { const response = await fetch("http://localhost:2006/spiele/"+params.id); - const data:response[] = await response.json(); - console.log(data); + const data:res = await response.json(); const game: spiel = data.game; return (
diff --git a/app/app/spiele/page.tsx b/app/app/spiele/page.tsx index c80e662..ba3b6ad 100644 --- a/app/app/spiele/page.tsx +++ b/app/app/spiele/page.tsx @@ -15,7 +15,7 @@ type spiel = { async function spiele() { const response = await fetch("http://localhost:2006/spiele"); - const data:response[] = await response.json(); + const data:response = await response.json(); return (
diff --git a/app/components/Login.tsx b/app/components/Login.tsx index b052e5b..7f75c88 100644 --- a/app/components/Login.tsx +++ b/app/components/Login.tsx @@ -1,24 +1,65 @@ -import React from 'react' +'use client'; +import { useState } from 'react'; +import axios from 'axios'; +import Cookies from 'js-cookie'; + +export default function Login() { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + + const handleLogin = async (e: React.FormEvent) => { + e.preventDefault(); + + try { + const response = await fetch('http://localhost:2006/auth/login', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + email, + password, + }), + }); + + if (response.ok) { + const data= await response.json(); + console.log('Login successful:', data.token); + // Speichere das JWT im Cookie + Cookies.set('token', data.token); + + }else{ + console.error('Login failed:', response.statusText); + } + // Weiterleitung zur geschützten Route + } catch (error) { + console.error('Login error:', error); + alert(JSON.stringify({ + email, + password, + })); + alert(error); + } + }; -function Login() { return (
-
- - - -
- +

Login

+
+ setEmail(e.target.value)} + placeholder="E-Mail" + /> + setPassword(e.target.value)} + placeholder="Passwort" + /> + +
- ) + ); } - -export default Login \ No newline at end of file diff --git a/app/middleware.ts b/app/middleware.ts new file mode 100644 index 0000000..63ff4f8 --- /dev/null +++ b/app/middleware.ts @@ -0,0 +1,19 @@ +import { NextResponse } from 'next/server'; +import type { NextRequest } from 'next/server'; + +export function middleware(req: NextRequest) { + const token = req.cookies.get('token')?.value; + const loginUrl = new URL('/login', req.url); + + // Wenn kein Token vorhanden ist, leite zur Login-Seite um + if (!token) { + return NextResponse.redirect(loginUrl); + } + + return NextResponse.next(); +} + +// Definiere, für welche Routen das Middleware gelten soll +export const config = { + matcher: ['/protected'], +}; diff --git a/app/package.json b/app/package.json index 2a561e4..26ee789 100644 --- a/app/package.json +++ b/app/package.json @@ -9,18 +9,21 @@ "lint": "next lint" }, "dependencies": { + "axios": "^1.7.7", + "js-cookie": "^3.0.5", + "next": "14.2.13", "react": "^18", - "react-dom": "^18", - "next": "14.2.13" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", + "@types/js-cookie": "^3.0.6", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.13", "postcss": "^8", "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.13" + "typescript": "^5" } } diff --git a/server/app.js b/server/app.js index 02b1e28..5435f6c 100644 --- a/server/app.js +++ b/server/app.js @@ -5,6 +5,15 @@ const authRoutes = require("./routes/auth"); const memberRoutes = require("./routes/members"); const spieleRoutes = require("./routes/spiele"); const bodyParser = require("body-parser"); +const cors = require("cors"); + +// CORS für alle Routen aktivieren +app.use( + cors({ + origin: "http://localhost:3000", // Ersetze dies durch deine Next.js URL + credentials: true, // Falls du Cookies oder Auth-Headers verwendest + }) +); // Middleware app.use(express.json()); diff --git a/server/controllers/userController.js b/server/controllers/userController.js index d197f25..5268081 100644 --- a/server/controllers/userController.js +++ b/server/controllers/userController.js @@ -47,6 +47,7 @@ const registerUser = async (req, res) => { // Loginfunktion const loginUser = async (req, res) => { const { email, password } = req.body; + console.log(email, password); try { // Überprüfen, ob der Benutzer existiert const user = await pool.query("SELECT * FROM Users WHERE email = $1", [ @@ -84,19 +85,15 @@ const updateUser = async (req, res) => { "UPDATE users SET username = $1, password = $2, email = $3, role = $4 WHERE id = $5 RETURNING *", [username, password, email, role, id] ); - res - .status(200) - .json({ - message: "Benutzerdaten aktualisiert", - user: updateUser.rows[0], - }); + res.status(200).json({ + message: "Benutzerdaten aktualisiert", + user: updateUser.rows[0], + }); } catch (err) { - res - .status(500) - .json({ - message: "Fehler beim Aktualisieren der Benutzerdaten", - error: err.message, - }); + res.status(500).json({ + message: "Fehler beim Aktualisieren der Benutzerdaten", + error: err.message, + }); } }; diff --git a/server/package.json b/server/package.json index d57cae7..b8d3f5d 100644 --- a/server/package.json +++ b/server/package.json @@ -11,6 +11,7 @@ "description": "", "dependencies": { "bcryptjs": "^2.4.3", + "cors": "^2.8.5", "dotenv": "^16.4.5", "express": "^4.21.0", "jsonwebtoken": "^9.0.2",