feat: third party auth

README.md

@@ -37,10 +37,11 @@ Open source interface for Guild.xyz -- a tool for platformless membership manage
 ### Running the interface locally
 
 1. `bun i`
-2. `bun run dev`
-3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local`.
+2. Append `127.0.0.1  local.openguild.xyz` to `/etc/hosts`
+3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local`
+4. Run `bun dev`, create certificate if prompted
+5. Open `https://local.openguild.xyz:3000` and dismiss the unsecure site warning
 
-Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
 
 ### Getting secret environment variables (for core team members):
 

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/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;
+};