root/sp
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: secure cookie name in middleware; drop TOTP (tailscale gates access)

Browse Source
This commit is contained in:
Semih
2026-05-13 10:04:52 +00:00
parent d906a6488f
commit b2f59420b5
5 changed files with 36 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/middleware.ts
View File

@@ -7,7 +7,9 @@ export function middleware(req: NextRequest) {
if (pathname.startsWith("/api/auth") || PUBLIC.has(pathname) || pathname === "/_next" || pathname.startsWith("/_next")) {
return NextResponse.next();
}
const hasSession = req.cookies.get("sp.session_token") || req.cookies.get("sp.session_token.sig");
const hasSession =
req.cookies.get("__Secure-sp.session_token") ||
req.cookies.get("sp.session_token");
if (!hasSession && pathname === "/") {
const url = req.nextUrl.clone();
url.pathname = "/login";

101
apps/web/src/app/login/page.tsx
View File

@@ -2,97 +2,58 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import { signIn, twoFactor } from "@/lib/auth-client";
import { signIn } from "@/lib/auth-client";
export default function LoginPage() {
const router = useRouter();
const [stage, setStage] = useState<"creds" | "totp">("creds");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [code, setCode] = useState("");
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
async function submitCreds(e: React.FormEvent) {
async function submit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setLoading(true);
const { data, error } = await signIn.email({ email, password });
const { error } = await signIn.email({ email, password });
setLoading(false);
if (error) return setError(error.message ?? "Login failed");
if ((data as { twoFactorRedirect?: boolean })?.twoFactorRedirect) {
setStage("totp");
return;
}
router.replace("/");
}
async function submitTotp(e: React.FormEvent) {
e.preventDefault();
setError(null);
setLoading(true);
const { error } = await twoFactor.verifyTotp({ code });
setLoading(false);
if (error) return setError(error.message ?? "Invalid code");
router.replace("/");
router.refresh();
}
return (
<main className="flex min-h-screen items-center justify-center px-4">
<div className="w-full max-w-sm rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-8">
<h1 className="text-xl font-semibold">Süper Panel</h1>
<p className="mt-1 text-sm text-[var(--color-muted)]">
{stage === "creds" ? "Sign in" : "Two-factor code"}
</p>
<p className="mt-1 text-sm text-[var(--color-muted)]">Sign in</p>
{stage === "creds" ? (
<form onSubmit={submitCreds} className="mt-6 space-y-3">
<input
type="email"
required
placeholder="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-sm outline-none focus:border-[var(--color-accent)]"
/>
<input
type="password"
required
minLength={12}
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-sm outline-none focus:border-[var(--color-accent)]"
/>
<button
type="submit"
disabled={loading}
className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black disabled:opacity-60"
>
{loading ? "…" : "Sign in"}
</button>
</form>
) : (
<form onSubmit={submitTotp} className="mt-6 space-y-3">
<input
inputMode="numeric"
pattern="[0-9]*"
required
maxLength={6}
placeholder="123456"
value={code}
onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-center text-lg tracking-[0.4em] outline-none focus:border-[var(--color-accent)]"
/>
<button
type="submit"
disabled={loading || code.length !== 6}
className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black disabled:opacity-60"
>
{loading ? "…" : "Verify"}
</button>
</form>
)}
<form onSubmit={submit} className="mt-6 space-y-3">
<input
type="email"
required
placeholder="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-sm outline-none focus:border-[var(--color-accent)]"
/>
<input
type="password"
required
minLength={12}
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-sm outline-none focus:border-[var(--color-accent)]"
/>
<button
type="submit"
disabled={loading}
className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black disabled:opacity-60"
>
{loading ? "…" : "Sign in"}
</button>
</form>
{error && <p className="mt-4 text-sm text-red-400">{error}</p>}
</div>

91
apps/web/src/app/setup-2fa/page.tsx
View File

@@ -1,91 +0,0 @@
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { twoFactor, useSession } from "@/lib/auth-client";
export default function Setup2FA() {
const router = useRouter();
const { data: session, isPending } = useSession();
const [password, setPassword] = useState("");
const [otpAuthUri, setOtpAuthUri] = useState<string | null>(null);
const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
const [code, setCode] = useState("");
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (!isPending && !session) router.replace("/login");
}, [isPending, session, router]);
async function enable(e: React.FormEvent) {
e.preventDefault();
setError(null);
const { data, error } = await twoFactor.enable({ password });
if (error) return setError(error.message ?? "Failed");
setOtpAuthUri(data?.totpURI ?? null);
setBackupCodes(data?.backupCodes ?? null);
}
async function verify(e: React.FormEvent) {
e.preventDefault();
setError(null);
const { error } = await twoFactor.verifyTotp({ code });
if (error) return setError(error.message ?? "Invalid code");
router.replace("/");
}
return (
<main className="flex min-h-screen items-center justify-center px-4">
<div className="w-full max-w-md rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-8">
<h1 className="text-xl font-semibold">Enable two-factor</h1>
<p className="mt-1 text-sm text-[var(--color-muted)]">Scan the URI in your authenticator</p>
{!otpAuthUri ? (
<form onSubmit={enable} className="mt-6 space-y-3">
<input
type="password"
required
placeholder="current password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-sm outline-none"
/>
<button type="submit" className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black">
Generate TOTP
</button>
</form>
) : (
<div className="mt-6 space-y-4">
<code className="block break-all rounded-md border border-[var(--color-border)] bg-black p-3 text-xs">
{otpAuthUri}
</code>
{backupCodes && (
<div>
<p className="text-xs uppercase tracking-wide text-[var(--color-muted)]">Backup codes</p>
<ul className="mt-1 grid grid-cols-2 gap-1 text-xs">
{backupCodes.map((c) => <li key={c} className="font-mono">{c}</li>)}
</ul>
</div>
)}
<form onSubmit={verify} className="space-y-3">
<input
inputMode="numeric"
required
maxLength={6}
placeholder="123456"
value={code}
onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
className="w-full rounded-md border border-[var(--color-border)] bg-black px-3 py-2 text-center text-lg tracking-[0.4em] outline-none"
/>
<button type="submit" className="w-full rounded-md bg-[var(--color-accent)] py-2 text-sm font-medium text-black">
Verify &amp; finish
</button>
</form>
</div>
)}
{error && <p className="mt-4 text-sm text-red-400">{error}</p>}
</div>
</main>
);
}

8
apps/web/src/lib/auth-client.ts
View File

@@ -1,10 +1,6 @@
"use client";
import { createAuthClient } from "better-auth/react";
import { twoFactorClient } from "better-auth/client/plugins";
export const authClient = createAuthClient({
plugins: [twoFactorClient()],
});
export const { signIn, signUp, signOut, useSession, twoFactor } = authClient;
export const authClient = createAuthClient();
export const { signIn, signOut, useSession } = authClient;

6
apps/web/src/lib/auth.ts
View File

@@ -1,6 +1,5 @@
import { betterAuth } from "better-auth";
import { prismaAdapter } from "better-auth/adapters/prisma";
import { twoFactor } from "better-auth/plugins";
import { prisma } from "./db";
export const auth = betterAuth({
@@ -22,9 +21,4 @@ export const auth = betterAuth({
cookiePrefix: "sp",
useSecureCookies: process.env.NODE_ENV === "production",
},
plugins: [
twoFactor({
issuer: "Süper Panel",
}),
],
});