From 106b0fda4a2c4ed62409a1bf8fb1b68755082135 Mon Sep 17 00:00:00 2001 From: Andrew Bates Date: Mon, 4 Dec 2023 00:46:21 -0600 Subject: [PATCH] Fix discord linking --- app/routes/oauth.success.tsx | 108 +++++++++++++++++++++++------------ 1 file changed, 71 insertions(+), 37 deletions(-) diff --git a/app/routes/oauth.success.tsx b/app/routes/oauth.success.tsx index f0d4611..b0213a1 100644 --- a/app/routes/oauth.success.tsx +++ b/app/routes/oauth.success.tsx @@ -4,104 +4,139 @@ import type { MetaFunction, } from "@remix-run/node"; import { json, redirect } from "@remix-run/node"; -import { Form, Link, useActionData, useSearchParams } from "@remix-run/react"; -import { useEffect, useRef } from "react"; +import { Form, Link, useActionData, useLoaderData, useSearchParams } from "@remix-run/react"; + +import { useEffect, useRef } from "react"; export const loader = async ({ request }: LoaderFunctionArgs) => { + const DISCORD_OAUTH2_URL = process.env.DISCORD_OAUTH2_URL ?? ''; + String(request); - return json({}); + return json({discordOauth2Url: process.env.DISCORD_OAUTH2_URL ?? ''}); }; - -//const OAUTH_REDIRECT_URL = process.env.OAUTH_REDIRECT_URL ?? ''; - - const _sanitizeLinkCode = (linkCode: string) => { - return linkCode.toUpperCase().replace(/[^ABCDEFGHJKLMNPQRSTUVWXYZ]/g, '').slice(0, 4); + return linkCode.toUpperCase().replace(/[^A-Z]/g, '').slice(0, 4); } export const action = async ({ request }: ActionFunctionArgs) => { const SUCCESS_REDIRECT_URL = process.env.SUCCESS_REDIRECT_URL ?? "/"; const DISCORD_OAUTH2_URL = process.env.DISCORD_OAUTH2_URL ?? ''; - const NAKAMA_API_URL = process.env.NAKAMA_API_URL ?? ''; + const NAKAMA_API_BASE_URL = process.env.NAKAMA_API_BASE_URL ?? ''; + const NAKAMA_HTTP_KEY = process.env.NAKAMA_HTTP_KEY ?? ''; const OAUTH_REDIRECT_URL = process.env.OAUTH_REDIRECT_URL ?? ''; const formData = await request.formData(); let linkCode = String(formData.get("linkCode")); const oauthCode = String(formData.get("discordCode")); - + linkCode = _sanitizeLinkCode(linkCode); if (linkCode.length != 4) { return json( - { errors: { linkCode: "linkCode is invalid", discordCode: null } }, + { success: false, errors: { linkCode: "linkCode is invalid. Your link code is 4 letters.", discordCode: null } }, { status: 400 }, ); - } else if (oauthCode == null) { + } + if (!oauthCode) { return json( - { errors: { linkCode: null, discordCode: "discord code is invalid. retry oauth." } }, + { success: false, errors: { linkCode: null, discordCode: "discord code is invalid. retry oauth by clicking 'Link Discord' below." } }, { status: 400 }, ); } - - const response = await fetch(NAKAMA_API_URL, { +console.log("url:", NAKAMA_API_BASE_URL + '/v2/rpc/discordLinkDevice?http_key=' + NAKAMA_HTTP_KEY) +console.log("Sending: %s", JSON.stringify(JSON.stringify({ + linkCode, + oauthCode, + oauthRedirectUrl: OAUTH_REDIRECT_URL, +}))); + const response = await fetch( + NAKAMA_API_BASE_URL + '/v2/rpc/discordLinkDevice?http_key=' + NAKAMA_HTTP_KEY, { method: "POST", headers: { "Content-Type": "application/json", }, - body: JSON.stringify({ + body: JSON.stringify(JSON.stringify({ linkCode, - oauthCode: oauthCode, + oauthCode, oauthRedirectUrl: OAUTH_REDIRECT_URL, - }), + })), }); + console.log("Nakama response: %s %s", response.status, response.statusText, response); if (response.status === 200) { - return redirect(SUCCESS_REDIRECT_URL); + return json( + { success: true, errors: { linkCode: null, discordCode: null, } }, + { status: 200 }, + ); + //return redirect(SUCCESS_REDIRECT_URL); } else if (response.status === 401) { console.error(`Redirecting to oauth url, because of error from nakama: ${response.statusText}`) //return redirect(DISCORD_OAUTH2_URL); + console.error("Error: 404 ", ) + return json( + { success: false, errors: { linkCode: "Could not find link code or discord code expired. Try clicking 'Link Discord' below.", discordCode: null, } }, + { status: 400 }, + ); + } else if ( response.status === 404) { + console.log("Error 404"); return json( - { errors: { linkCode: null, discordCode: "discord code is invalid. retry oauth." } }, + { success: false, errors: { linkCode: "linkCode is used/expired/not found.", discordCode: null } }, + { status: 400 }, + ); + } else if ( response.status != 200) { + console.log("Error: ", response.status, response.statusText); + return json( + { success: false, errors: { linkCode: "linkCode is invalid", discordCode: null } }, { status: 400 }, ); } - return { errors: { linkCode: null, discordCode: null }}; + + return { success: false, errors: { linkCode: null, discordCode: null }}; }; export const meta: MetaFunction = () => [{ title: "Link Device" }]; export default function LoginPage() { + const [searchParams] = useSearchParams(); const discordCode = searchParams.get("code"); const actionData = useActionData(); + const loaderData = useLoaderData(); const linkCodeRef = useRef(null); - + + if (!discordCode) { + return redirect(loaderData.discordOauth2Url); + } useEffect(() => { + if (actionData?.errors?.linkCode) { linkCodeRef.current?.focus(); } linkCodeRef.current?.addEventListener("input", (e) => { + const input = e.target as HTMLInputElement; // limit it to 4 characters input.value = _sanitizeLinkCode(input.value); } ) + + }, [actionData]); + return (
-
-
+
+
- - + className="block text-sm font-medium text-gray-700">Link Account

To link your account, please enter the 4-character code displayed in your headset.

+
{actionData?.errors?.linkCode ? (
{actionData.errors.linkCode}
) : null} + {actionData?.success == true ? ( +
+ ACCOUNT SUCCESSFULLY LINKED! You can now close this window and restart your EchoVR game! +
+ ) : null}
@@ -137,15 +177,9 @@ export default function LoginPage() {
Don't have an account?{" "} - - Link Account - + + Link Discord +