feat: third party auth

src/app/(dashboard)/explorer/page.tsx

@@ -1,4 +1,5 @@
 import { AuthBoundary } from "@/components/AuthBoundary";
+import { ConnectDiscord } from "@/components/ConnectDiscord";
 import { SignInButton } from "@/components/SignInButton";
 import { Suspense } from "react";
 import {
@@ -42,6 +43,20 @@ const Explorer = async () => {
 
         <AssociatedGuildsSection />
 
+        {/* TODO: delete this before merging the PR */}
+        <section>
+          <h2 className="mt-12 font-bold text-lg tracking-tight">
+            Connect Discord
+          </h2>
+          <AuthBoundary
+            fallback={
+              <p>You must sign in before connecting your Discord account</p>
+            }
+          >
+            <ConnectDiscord />
+          </AuthBoundary>
+        </section>
+
         <h2
           className="mt-12 font-bold text-lg tracking-tight"
           id={ACTIVE_SECTION.exploreGuilds}

src/app/layout.tsx

@@ -1,21 +1,23 @@
 import type { Metadata } from "next";
 import "@/styles/globals.css";
+import { ConnectResultToast } from "@/components/ConnectResultToast";
 import { PrefetchUserBoundary } from "@/components/PrefetchUserBoundary";
 import { PreloadResources } from "@/components/PreloadResources";
 import { Providers } from "@/components/Providers";
 import { SignInDialog } from "@/components/SignInDialog";
 import { Toaster } from "@/components/ui/Toaster";
 import { dystopian } from "@/lib/fonts";
 import { cn } from "lib/cssUtils";
+import { Suspense } from "react";
 
 export const metadata: Metadata = {
   title: "Guildhall",
   applicationName: "Guildhall",
   description:
     "Automated membership management for the platforms your community already uses.",
-  // icons: {
-  //   icon: "/guild-icon.png",
-  // },
+  icons: {
+    icon: "/guild-icon.png",
+  },
 };
 
 const RootLayout = ({
@@ -30,8 +32,11 @@ const RootLayout = ({
         <Providers>
           <PrefetchUserBoundary>{children}</PrefetchUserBoundary>
 
-          <SignInDialog />
           <Toaster />
+          <SignInDialog />
+          <Suspense>
+            <ConnectResultToast />
+          </Suspense>
         </Providers>
       </body>
     </html>

src/components/ConnectDiscord.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+// Temp component for testing the connect Discord flow. Should be deleted before merging the PR!
+
+import { env } from "@/lib/env";
+import { Anchor } from "./ui/Anchor";
+
+export const ConnectDiscord = () => {
+  if (typeof window === "undefined") return null;
+
+  return (
+    <Anchor
+      href={`${env.NEXT_PUBLIC_API}/connect/DISCORD?returnTo=${window.location.href}`}
+    >
+      Connect Discord
+    </Anchor>
+  );
+};

src/components/ConnectResultToast.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { CheckCircle, XCircle } from "@phosphor-icons/react/dist/ssr";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect } from "react";
+import { toast } from "sonner";
+
+const SUCCESS_PARAM = "connectSuccess";
+const ERROR_MSG_PARAM = "connectErrorMessage";
+
+export const ConnectResultToast = () => {
+  const { push } = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // TODO: types
+  const connectSuccessPlatform = searchParams.get(SUCCESS_PARAM);
+  const connectErrorMessage = searchParams.get(ERROR_MSG_PARAM);
+
+  const removeSearchParam = useCallback(
+    (param: string) => {
+      const newSearchParams = new URLSearchParams(searchParams);
+      newSearchParams.delete(param);
+      push(`${pathname}?${newSearchParams.toString()}`);
+    },
+    [searchParams, pathname, push],
+  );
+
+  useEffect(() => {
+    if (!connectSuccessPlatform) return;
+    toast(`Successfully connected ${connectSuccessPlatform}!`, {
+      icon: <CheckCircle weight="fill" className="text-icon-success" />,
+    });
+    removeSearchParam(SUCCESS_PARAM);
+  }, [connectSuccessPlatform, removeSearchParam]);
+
+  useEffect(() => {
+    if (!connectErrorMessage) return;
+    toast("Error", {
+      description: connectErrorMessage,
+      icon: <XCircle weight="fill" className="text-icon-error" />,
+    });
+    removeSearchParam(ERROR_MSG_PARAM);
+  }, [connectErrorMessage, removeSearchParam]);
+
+  return null;
+};