Add Discord verification option for users without email

This commit is contained in:
openhands committed 2026-07-07 20:37:42 +02:00
1 parent eb01b14379
commit 43c0ba6614
6 files changed
+257 -56

No files matched your search

+55
View File
@@ -0,0 +1,55 @@
"use server";
import { prisma } from "@/lib/prisma";
import { auth } from "@/lib/auth";
export async function linkDiscordId(discordId: string): Promise<string | null> {
const session = await auth();
if (!session?.user?.id) return "Niet ingelogd";
const userId = Number(session.user.id);
if (!discordId || !/^\d{17,20}$/.test(discordId.trim())) {
return "Ongeldig Discord ID";
}
const discordIdClean = discordId.trim();
// Check if this Discord ID is already linked to another account.
try {
const existing = await prisma.socialAccounts.findUnique({
where: { provider_providerId: { provider: "discord", providerId: discordIdClean } },
select: { userId: true },
});
if (existing && Number(existing.userId) !== userId) {
return "Dit Discord ID is al gekoppeld aan een ander account";
}
} catch {
return "Fout bij controleren Discord ID";
}
try {
// Upsert: create or update the social_accounts entry.
await prisma.socialAccounts.upsert({
where: { provider_providerId: { provider: "discord", providerId: discordIdClean } },
create: {
userId: BigInt(userId),
provider: "discord",
providerId: discordIdClean,
createdAt: new Date(),
updatedAt: new Date(),
},
update: { userId: BigInt(userId), updatedAt: new Date() },
});
// Mark user as verified.
await prisma.user.update({
where: { id: userId },
data: { mailVerified: "1" },
});
return null; // success
} catch (e) {
console.error("[link-discord] Failed:", (e as Error).message);
return "Fout bij koppelen van Discord account";
}
}
+16 -7
View File
@@ -16,7 +16,7 @@ const registerSchema = z.object({
.min(3, "Username must be at least 3 characters") .min(3, "Username must be at least 3 characters")
.max(25, "Username must be at most 25 characters") .max(25, "Username must be at most 25 characters")
.regex(/^[A-Za-z0-9_\-=?!@:.,]+$/, "Username contains invalid characters"), .regex(/^[A-Za-z0-9_\-=?!@:.,]+$/, "Username contains invalid characters"),
mail: z.string().email("Enter a valid email address"), mail: z.string().email("Enter a valid email address").optional().or(z.literal("")),
password: z password: z
.string() .string()
.min(8, "Password must be at least 8 characters") .min(8, "Password must be at least 8 characters")
@@ -43,6 +43,7 @@ export async function register(prevState: string | null, formData: FormData): Pr
} }
const { username, mail, password, look } = parsed.data; const { username, mail, password, look } = parsed.data;
const hasEmail = !!mail;
const ip = await clientIp(); const ip = await clientIp();
// Throttle sign-ups per IP (5 per 10 minutes) to curb account spam. // Throttle sign-ups per IP (5 per 10 minutes) to curb account spam.
@@ -88,7 +89,7 @@ export async function register(prevState: string | null, formData: FormData): Pr
data: { data: {
username, username,
password: await hashPassword(password), password: await hashPassword(password),
mail, mail: hasEmail ? mail : null,
accountCreated: now, accountCreated: now,
ipRegister: ip, ipRegister: ip,
ipCurrent: ip, ipCurrent: ip,
@@ -97,14 +98,22 @@ export async function register(prevState: string | null, formData: FormData): Pr
select: { id: true }, select: { id: true },
}); });
try { if (hasEmail) {
await sendVerification(created.id, mail); try {
} catch { await sendVerification(created.id, mail);
// No-op: account is created; user can request a new link later. } catch {
// No-op: account is created; user can request a new link later.
}
} }
} catch { } catch {
return "Could not create the account (is the username unique?)"; return "Could not create the account (is the username unique?)";
} }
redirect("/login?registered=1"); if (hasEmail) {
redirect("/login?registered=1");
} else {
const { signIn } = await import("@/lib/auth");
await signIn("credentials", { username, password, redirect: false });
redirect("/verify?method=discord");
}
} }
+59 -37
View File
@@ -2,31 +2,43 @@ import Link from "next/link";
import { getTranslations } from "next-intl/server"; import { getTranslations } from "next-intl/server";
import { isValidVerificationToken } from "@/actions/email-verify"; import { isValidVerificationToken } from "@/actions/email-verify";
import { ContentCard, EmptyState } from "@/components/public/ui"; import { ContentCard, EmptyState } from "@/components/public/ui";
import { DiscordVerifyForm } from "@/components/auth/discord-verify-form";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma"; import { prisma } from "@/lib/prisma";
// Reads + writes the live users table — must never be statically rendered.
export const dynamic = "force-dynamic"; export const dynamic = "force-dynamic";
type Status = "verified" | "already" | "invalid" | "unavailable"; type Status = "verified" | "already" | "invalid" | "unavailable" | "discord";
export default async function VerifyPage({ export default async function VerifyPage({
searchParams, searchParams,
}: { }: {
searchParams: Promise<{ token?: string; email?: string }>; searchParams: Promise<{ token?: string; email?: string; method?: string; linked?: string }>;
}) { }) {
const t = await getTranslations("pages.verify"); const t = await getTranslations("pages.verify");
// Next 16: searchParams is a Promise. const { token = "", email = "", method = "", linked = "" } = await searchParams;
const { token = "", email = "" } = await searchParams;
const normalisedEmail = email.trim().toLowerCase(); const normalisedEmail = email.trim().toLowerCase();
let status: Status = "invalid"; let status: Status = "invalid";
let discordAlreadyLinked = false;
if (normalisedEmail && token) { if (method === "discord" || linked === "1") {
status = "discord";
const session = await auth();
if (session?.user?.id) {
const userId = Number(session.user.id);
try {
const linkedRow = await prisma.socialAccounts.findFirst({
where: { userId: BigInt(userId), provider: "discord" },
select: { id: true },
});
discordAlreadyLinked = !!linkedRow;
} catch {}
}
} else if (normalisedEmail && token) {
const ok = await isValidVerificationToken(normalisedEmail, token); const ok = await isValidVerificationToken(normalisedEmail, token);
if (ok) { if (ok) {
try { try {
// mail is VARCHAR(500) and not unique in the emulator schema, so match
// on the email and flip any matching unverified account(s).
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
where: { mail: normalisedEmail }, where: { mail: normalisedEmail },
select: { id: true, mailVerified: true }, select: { id: true, mailVerified: true },
@@ -38,55 +50,65 @@ export default async function VerifyPage({
} else { } else {
await prisma.user.update({ await prisma.user.update({
where: { id: user.id }, where: { id: user.id },
// users.mail_verified is a String flag ('0' / '1').
data: { mailVerified: "1" }, data: { mailVerified: "1" },
}); });
status = "verified"; status = "verified";
} }
} catch { } catch {
// DB unreachable — don't claim success.
status = "unavailable"; status = "unavailable";
} }
} else {
status = "invalid";
} }
} }
return ( return (
<main style={{ maxWidth: 480, margin: "2rem auto" }}> <main style={{ maxWidth: 480, margin: "2rem auto" }}>
{status === "verified" ? ( {status === "verified" && (
<ContentCard icon="✅" title={t("verifiedTitle")} subtitle={t("verifiedSubtitle")}> <ContentCard icon="✅" title={t("verifiedTitle")} subtitle={t("verifiedSubtitle")}>
<p className="muted" style={{ marginTop: 0 }}> <p className="muted" style={{ marginTop: 0 }}>{t("verifiedBody")}</p>
{t("verifiedBody")} <Link href="/login" className="btn btn-primary">{t("goToLogin")}</Link>
</p>
<Link href="/login" className="btn btn-primary">
{t("goToLogin")}
</Link>
</ContentCard> </ContentCard>
) : status === "already" ? ( )}
{status === "already" && (
<ContentCard icon="✅" title={t("alreadyTitle")} subtitle={t("alreadySubtitle")}> <ContentCard icon="✅" title={t("alreadyTitle")} subtitle={t("alreadySubtitle")}>
<p className="muted" style={{ marginTop: 0 }}> <p className="muted" style={{ marginTop: 0 }}>{t("alreadyBody")}</p>
{t("alreadyBody")} <Link href="/login" className="btn btn-primary">{t("goToLogin")}</Link>
</p>
<Link href="/login" className="btn btn-primary">
{t("goToLogin")}
</Link>
</ContentCard> </ContentCard>
) : status === "unavailable" ? ( )}
{status === "unavailable" && (
<ContentCard icon="⏳" title={t("unavailableTitle")} subtitle={t("unavailableSubtitle")}> <ContentCard icon="⏳" title={t("unavailableTitle")} subtitle={t("unavailableSubtitle")}>
<p className="muted" style={{ margin: 0 }}> <p className="muted" style={{ margin: 0 }}>{t("unavailableBody")}</p>
{t("unavailableBody")}
</p>
</ContentCard> </ContentCard>
) : ( )}
{status === "invalid" && (
<ContentCard icon="📧" title={t("invalidTitle")} subtitle={t("invalidSubtitle")}> <ContentCard icon="📧" title={t("invalidTitle")} subtitle={t("invalidSubtitle")}>
<EmptyState icon="🔗"> <EmptyState icon="🔗">{t("invalidBody")}</EmptyState>
{t("invalidBody")}
</EmptyState>
<div style={{ textAlign: "center" }}> <div style={{ textAlign: "center" }}>
<Link href="/login" className="btn btn-outline"> <Link href="/login" className="btn btn-outline">{t("backToLogin")}</Link>
{t("backToLogin")} </div>
</Link> </ContentCard>
)}
{status === "discord" && (
<ContentCard icon="🎮" title="Verifieer via Discord" subtitle="Koppel je Discord account">
{linked === "1" && (
<div className="rounded-md p-4 text-center mb-4" style={{ backgroundColor: "#14532d", color: "white" }}>
<p className="text-lg font-bold mb-1">Gelinkt!</p>
<p className="text-sm opacity-90">Je Discord account is gekoppeld. Je kunt nu verder.</p>
</div>
)}
{discordAlreadyLinked ? (
<div className="rounded-md p-4 text-center" style={{ backgroundColor: "#14532d", color: "white" }}>
<p className="text-lg font-bold mb-1">Al geverifieerd!</p>
<p className="text-sm opacity-90">Je Discord account is al gekoppeld aan dit account.</p>
</div>
) : (
<DiscordVerifyForm />
)}
<div style={{ textAlign: "center", marginTop: "1rem" }}>
<Link href="/" className="btn btn-primary">Naar home</Link>
</div> </div>
</ContentCard> </ContentCard>
)} )}
@@ -0,0 +1,78 @@
"use client";
import { useState } from "react";
import { linkDiscordId } from "@/actions/link-discord";
export function DiscordVerifyForm() {
const [discordId, setDiscordId] = useState("");
const [error, setError] = useState<string | null>(null);
const [isPending, setIsPending] = useState(false);
const [success, setSuccess] = useState(false);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
setSuccess(false);
setIsPending(true);
try {
const result = await linkDiscordId(discordId);
if (result === null) {
setSuccess(true);
} else {
setError(result);
}
} catch {
setError("Er is een fout opgetreden");
} finally {
setIsPending(false);
}
}
if (success) {
return (
<div className="rounded-md p-4 text-center" style={{ backgroundColor: "#14532d", color: "white" }}>
<p className="text-lg font-bold mb-1">Geverifieerd!</p>
<p className="text-sm opacity-90">Je Discord account is gekoppeld en je account is geverifieerd.</p>
</div>
);
}
return (
<form onSubmit={handleSubmit} className="flex flex-col gap-3">
{error && (
<div className="p-3 rounded-md text-sm" style={{ backgroundColor: "#ef4444", color: "white" }}>
{error}
</div>
)}
<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
Open Discord, ga naar <strong>Instellingen → Geavanceerd → Ontwikkelaarsmodus</strong> (aan).
Klik met rechts op je eigen naam en kies <strong>ID kopiëren</strong>. Plak dat hier:
</p>
<div className="flex gap-2">
<input
type="text"
placeholder="Plak je Discord ID hier"
value={discordId}
onChange={(e) => setDiscordId(e.target.value)}
className="flex-1 focus:ring-0 border-4 rounded text-sm px-3 py-2"
style={{
backgroundColor: "var(--color-background)",
color: "var(--color-text)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}}
required
/>
<button
type="submit"
disabled={isPending}
className="rounded px-4 py-2 text-white font-semibold whitespace-nowrap"
style={{ backgroundColor: "#5865F2", border: "2px solid #7983F5" }}
>
{isPending ? "Bezig..." : "Verifiëren"}
</button>
</div>
</form>
);
}
+3 -1
View File
@@ -99,10 +99,12 @@ export function RegisterForm({
color: "var(--color-text)", color: "var(--color-text)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
}} }}
required
/> />
</fieldset> </fieldset>
</div> </div>
<p className="text-xs mt-1" style={{ color: "var(--color-text-muted)" }}>
Geen e-mail? Je kunt later via Discord verifiëren.
</p>
</div> </div>
{/* Password & Confirm */} {/* Password & Confirm */}
+46 -11
View File
@@ -117,24 +117,38 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
callbacks: { callbacks: {
async signIn({ user, account }) { async signIn({ user, account }) {
if (account?.provider === "credentials") return true; if (account?.provider === "credentials") return true;
// OAuth: only allow if a hotel account with this email already exists. // OAuth: try to match by email first.
const email = user.email; const email = user.email;
if (!email) return "/login?error=NoEmail"; if (email) {
try { try {
const dbUser = await prisma.user.findFirst({ const dbUser = await prisma.user.findFirst({
where: { mail: email }, where: { mail: email },
select: { id: true }, select: { id: true },
}); });
return dbUser ? true : "/login?error=NoAccount"; if (dbUser) return true;
} catch { } catch {
return "/login?error=Unavailable"; return "/login?error=Unavailable";
}
} }
// If email didn't match, try Discord ID via SocialAccounts.
if (account?.provider === "discord" && account.providerAccountId) {
try {
const linked = await prisma.socialAccounts.findUnique({
where: { provider_providerId: { provider: "discord", providerId: account.providerAccountId } },
select: { userId: true },
});
if (linked) return true;
} catch {
return "/login?error=Unavailable";
}
}
return "/login?error=NoAccount";
}, },
async jwt({ token, user, account }) { async jwt({ token, user, account }) {
if (user && account?.provider === "credentials") { if (user && account?.provider === "credentials") {
token.rank = (user as { rank?: number }).rank; token.rank = (user as { rank?: number }).rank;
} else if (user?.email) { } else if (user?.email) {
// OAuth: bind the session to the matching hotel account. // OAuth with email: bind to matching hotel account.
try { try {
const dbUser = await prisma.user.findFirst({ const dbUser = await prisma.user.findFirst({
where: { mail: user.email }, where: { mail: user.email },
@@ -149,6 +163,27 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
// leave token as-is on lookup failure // leave token as-is on lookup failure
} }
} }
// OAuth without email match: try Discord ID via SocialAccounts.
if (!token.sub && account?.provider === "discord" && account.providerAccountId) {
try {
const linked = await prisma.socialAccounts.findUnique({
where: { provider_providerId: { provider: "discord", providerId: account.providerAccountId } },
});
if (linked) {
const dbUser = await prisma.user.findUnique({
where: { id: Number(linked.userId) },
select: { id: true, rank: true, username: true },
});
if (dbUser) {
token.sub = String(dbUser.id);
token.rank = dbUser.rank;
token.name = dbUser.username;
}
}
} catch {
// leave token as-is on lookup failure
}
}
return token; return token;
}, },
session({ session, token }) { session({ session, token }) {