2 files changed, 30 insertions, 20 deletions
diff --git a/communities/red-right-hand/174bg.net/src/app/layout.js b/communities/red-right-hand/174bg.net/src/app/layout.js
index 32d23f4..165be68 100644
--- a/communities/red-right-hand/174bg.net/src/app/layout.js
+++ b/communities/red-right-hand/174bg.net/src/app/layout.js
@@ -1,13 +1,9 @@
-import {
-  ClerkProvider,
-  Show,
-  SignInButton,
-  SignUpButton,
-  UserButton,
-} from "@clerk/nextjs";
+import { ClerkProvider } from "@clerk/nextjs";
 import { Inter, Fira_Code } from "next/font/google";
+import { Suspense } from "react";
 import "./globals.css";
 import TerminalOverlay from "@/components/TerminalOverlay";
+import AuthHeader from "@/components/AuthHeader";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -35,19 +31,7 @@ export default function RootLayout({ children }) {
     >
       <body className="min-h-full flex flex-col">
         <ClerkProvider>
-          <header className="flex justify-end items-center p-4 gap-4 h-16">
-            <Show when="signed-out">
-              <SignInButton />
-              <SignUpButton>
-                <button className="bg-purple-700 text-white rounded-full font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 cursor-pointer">
-                  Sign Up
-                </button>
-              </SignUpButton>
-            </Show>
-            <Show when="signed-in">
-              <UserButton />
-            </Show>
-          </header>
+          <AuthHeader />
           <TerminalOverlay />
           {children}
         </ClerkProvider>
diff --git a/communities/red-right-hand/174bg.net/src/components/AuthHeader/index.js b/communities/red-right-hand/174bg.net/src/components/AuthHeader/index.js
new file mode 100644
index 0000000..1661421
--- /dev/null
+++ b/communities/red-right-hand/174bg.net/src/components/AuthHeader/index.js
@@ -0,0 +1,26 @@
+"use client";
+
+import { Show, SignInButton, SignUpButton, UserButton } from "@clerk/nextjs";
+import { useSearchParams } from "next/navigation";
+
+export default function AuthHeader() {
+  const searchParams = useSearchParams();
+
+  if (!searchParams.has("auth")) return null;
+
+  return (
+    <header className="flex justify-end items-center p-4 gap-4 h-16">
+      <Show when="signed-out">
+        <SignInButton />
+        <SignUpButton>
+          <button className="bg-purple-700 text-white rounded-full font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 cursor-pointer">
+            Sign Up
+          </button>
+        </SignUpButton>
+      </Show>
+      <Show when="signed-in">
+        <UserButton />
+      </Show>
+    </header>
+  );
+}