feat: link discord account to existing account

Foxnouns.Frontend/app/routes/auth.callback.discord/route.tsx

@@ -5,8 +5,8 @@ import {
 	LoaderFunctionArgs,
 	MetaFunction,
 } from "@remix-run/node";
-import { type ApiError, ErrorCode, firstErrorFor } from "~/lib/api/error";
-import serverRequest, { writeCookie } from "~/lib/request.server";
+import { type ApiError, ErrorCode } from "~/lib/api/error";
+import serverRequest, { getToken, writeCookie } from "~/lib/request.server";
 import { AuthResponse, CallbackResponse } from "~/lib/api/auth";
 import {
 	Form as RemixForm,
@@ -17,12 +17,13 @@ import {
 	useNavigate,
 } from "@remix-run/react";
 import { Trans, useTranslation } from "react-i18next";
-import { Form, Button, Alert } from "react-bootstrap";
-import ErrorAlert from "~/components/ErrorAlert";
+import { Form, Button } from "react-bootstrap";
 import i18n from "~/i18next.server";
 import { tokenCookieName } from "~/lib/utils";
 import { useEffect } from "react";
 import RegisterError from "~/components/RegisterError";
+import { AuthMethod } from "~/lib/api/user";
+import { errorCodeDesc } from "~/components/ErrorAlert";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [{ title: `${data?.meta.title || "Log in"} • pronouns.cc` }];
@@ -39,9 +40,43 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	const code = url.searchParams.get("code");
 	const state = url.searchParams.get("state");
 
+	const token = getToken(request);
+
 	if (!code || !state)
 		throw { status: 400, code: ErrorCode.BadRequest, message: "Missing code or state" } as ApiError;
 
+	if (token) {
+		try {
+			const resp = await serverRequest<AuthMethod>("POST", "/auth/discord/add-account/callback", {
+				body: { code, state },
+				token,
+				isInternal: true,
+			});
+
+			return json({
+				isLinkRequest: true,
+				meta: { title: t("log-in.callback.title.discord-link") },
+				error: null,
+				hasAccount: false,
+				user: null,
+				ticket: null,
+				remoteUser: null,
+				newAuthMethod: resp,
+			});
+		} catch (e) {
+			return json({
+				isLinkRequest: true,
+				meta: { title: t("log-in.callback.title.discord-link") },
+				error: e as ApiError,
+				hasAccount: false,
+				user: null,
+				ticket: null,
+				remoteUser: null,
+				newAuthMethod: null,
+			});
+		}
+	}
+
 	const resp = await serverRequest<CallbackResponse>("POST", "/auth/discord/callback", {
 		body: { code, state },
 		isInternal: true,
@@ -50,11 +85,14 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	if (resp.has_account) {
 		return json(
 			{
+				isLinkRequest: false,
 				meta: { title: t("log-in.callback.title.discord-success") },
+				error: null,
 				hasAccount: true,
 				user: resp.user!,
 				ticket: null,
 				remoteUser: null,
+				newAuthMethod: null,
 			},
 			{
 				headers: {
@@ -65,11 +103,14 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 	}
 
 	return json({
+		isLinkRequest: false,
 		meta: { title: t("log-in.callback.title.discord-register") },
+		error: null,
 		hasAccount: false,
 		user: null,
 		ticket: resp.ticket!,
 		remoteUser: resp.remote_username!,
+		newAuthMethod: null,
 	});
 };
 
@@ -122,6 +163,30 @@ export default function DiscordCallbackPage() {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
+	if (data.isLinkRequest) {
+		if (data.error) {
+			return (
+				<>
+					<h1>{t("log-in.callback.link-error")}</h1>
+					<p>{errorCodeDesc(t, data.error.code)}</p>
+				</>
+			);
+		}
+
+		const authMethod = data.newAuthMethod!;
+
+		return (
+			<>
+				<h1>{t("log-in.callback.discord-link-success")}</h1>
+				<p>
+					{t("log-in.callback.discord-link-success-hint", {
+						username: authMethod.remote_username ?? authMethod.remote_id,
+					})}
+				</p>
+			</>
+		);
+	}
+
 	if (data.hasAccount) {
 		const username = data.user!.username;