Add missing login page and fix auth loop
- /login route did not exist, so /admin redirected to /api/login -> /login -> 404 - /api/auth/user still ran the Replit-era deterministic UUID hash on the session id, so it never found the user; now reads the session directly - admin logout posts to /api/auth/logout and returns to /login
This commit is contained in:
parent
49d9c83201
commit
711fbdc92c
@ -13,6 +13,7 @@ import LivePage from "@/pages/LivePage";
|
|||||||
import PlayerPage from "@/pages/PlayerPage";
|
import PlayerPage from "@/pages/PlayerPage";
|
||||||
import KuenstlerPage from "@/pages/KuenstlerPage";
|
import KuenstlerPage from "@/pages/KuenstlerPage";
|
||||||
import AdminPage from "@/pages/admin";
|
import AdminPage from "@/pages/admin";
|
||||||
|
import LoginPage from "@/pages/login";
|
||||||
import PrivacyPolicy from "@/pages/PrivacyPolicy";
|
import PrivacyPolicy from "@/pages/PrivacyPolicy";
|
||||||
import TermsOfService from "@/pages/TermsOfService";
|
import TermsOfService from "@/pages/TermsOfService";
|
||||||
import Impressum from "@/pages/Impressum";
|
import Impressum from "@/pages/Impressum";
|
||||||
@ -29,6 +30,7 @@ function Router() {
|
|||||||
<Route path="/live" component={LivePage} />
|
<Route path="/live" component={LivePage} />
|
||||||
<Route path="/player" component={PlayerPage} />
|
<Route path="/player" component={PlayerPage} />
|
||||||
<Route path="/kuenstler" component={KuenstlerPage} />
|
<Route path="/kuenstler" component={KuenstlerPage} />
|
||||||
|
<Route path="/login" component={LoginPage} />
|
||||||
<Route path="/admin" component={AdminPage} />
|
<Route path="/admin" component={AdminPage} />
|
||||||
<Route path="/privacy" component={PrivacyPolicy} />
|
<Route path="/privacy" component={PrivacyPolicy} />
|
||||||
<Route path="/terms" component={TermsOfService} />
|
<Route path="/terms" component={TermsOfService} />
|
||||||
|
|||||||
@ -29,7 +29,7 @@ export default function AdminPage() {
|
|||||||
|
|
||||||
// Redirect if not admin
|
// Redirect if not admin
|
||||||
if (!authLoading && (!isAuthenticated || !isAdmin)) {
|
if (!authLoading && (!isAuthenticated || !isAdmin)) {
|
||||||
window.location.href = "/api/login";
|
window.location.href = "/login";
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -59,7 +59,7 @@ export default function AdminPage() {
|
|||||||
</Badge>
|
</Badge>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
onClick={() => window.location.href = "/api/logout"}
|
onClick={async () => { await fetch("/api/auth/logout", { method: "POST", credentials: "include" }); window.location.href = "/login"; }}
|
||||||
className="text-white border-white/20 hover:bg-white/10"
|
className="text-white border-white/20 hover:bg-white/10"
|
||||||
>
|
>
|
||||||
Logout
|
Logout
|
||||||
|
|||||||
89
client/src/pages/login.tsx
Normal file
89
client/src/pages/login.tsx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useLocation } from "wouter";
|
||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Loader2, LogIn } from "lucide-react";
|
||||||
|
|
||||||
|
export default function LoginPage() {
|
||||||
|
const [, navigate] = useLocation();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [password, setPassword] = useState("");
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
|
async function submit(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
setError("");
|
||||||
|
setBusy(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch("/api/auth/login", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
credentials: "include",
|
||||||
|
body: JSON.stringify({ email: email.trim(), password }),
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
const body = await res.json().catch(() => ({}));
|
||||||
|
throw new Error(body.error || "Anmeldung fehlgeschlagen");
|
||||||
|
}
|
||||||
|
await queryClient.invalidateQueries({ queryKey: ["/api/auth/user"] });
|
||||||
|
await queryClient.refetchQueries({ queryKey: ["/api/auth/user"] });
|
||||||
|
navigate("/admin");
|
||||||
|
} catch (err: any) {
|
||||||
|
setError(err?.message || "Anmeldung fehlgeschlagen");
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-[#2D1B69] to-[#6366f1] flex items-center justify-center px-4">
|
||||||
|
<Card className="w-full max-w-sm bg-white/10 border-white/20 text-white">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<LogIn className="w-5 h-5" />
|
||||||
|
<span>Anmeldung</span>
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form onSubmit={submit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<Label className="text-white/90">E-Mail</Label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
autoComplete="username"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
required
|
||||||
|
className="bg-white/10 border-white/20 text-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label className="text-white/90">Passwort</Label>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
autoComplete="current-password"
|
||||||
|
value={password}
|
||||||
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
|
required
|
||||||
|
className="bg-white/10 border-white/20 text-white"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <p className="text-sm text-red-300">{error}</p>}
|
||||||
|
|
||||||
|
<Button type="submit" disabled={busy} className="w-full">
|
||||||
|
{busy ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <LogIn className="w-4 h-4 mr-2" />}
|
||||||
|
{busy ? "Anmeldung läuft…" : "Anmelden"}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1684,28 +1684,12 @@ Sitemap: ${baseUrl}/sitemap.xml
|
|||||||
// ===== ADMIN ROUTES =====
|
// ===== ADMIN ROUTES =====
|
||||||
|
|
||||||
// Auth route to get current user
|
// Auth route to get current user
|
||||||
app.get('/api/auth/user', isAuthenticated, async (req: any, res) => {
|
app.get('/api/auth/user', authenticate, async (req, res) => {
|
||||||
try {
|
try {
|
||||||
// Import the generateDeterministicUUID function from replitAuth
|
const user = await storage.getUser(req.session.userId!);
|
||||||
const { createHash } = await import('crypto');
|
|
||||||
const generateDeterministicUUID = (replitId: string): string => {
|
|
||||||
const hash = createHash('sha256').update(`replit_${replitId}`).digest('hex');
|
|
||||||
return [
|
|
||||||
hash.substring(0, 8),
|
|
||||||
hash.substring(8, 12),
|
|
||||||
'4' + hash.substring(13, 16),
|
|
||||||
(parseInt(hash.substring(16, 17), 16) & 0x3 | 0x8).toString(16) + hash.substring(17, 20),
|
|
||||||
hash.substring(20, 32)
|
|
||||||
].join('-');
|
|
||||||
};
|
|
||||||
|
|
||||||
const userId = generateDeterministicUUID(req.user.claims.sub);
|
|
||||||
const user = await storage.getUser(userId);
|
|
||||||
if (!user) {
|
if (!user) {
|
||||||
return res.status(404).json({ message: "User not found" });
|
return res.status(404).json({ message: "User not found" });
|
||||||
}
|
}
|
||||||
|
|
||||||
// Remove sensitive data
|
|
||||||
const { passwordHash, ...userResponse } = user;
|
const { passwordHash, ...userResponse } = user;
|
||||||
res.json(userResponse);
|
res.json(userResponse);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user