fix: hook error on sign-in page (#208)

oaknational · Nov 21, 2024 · c298b10 · c298b10
1 parent 1cc8ce5
commit c298b10
Showing 1 changed file with 23 additions and 2 deletions.
diff --git a/apps/nextjs/src/app/sign-in/[[...sign-in]]/page.tsx b/apps/nextjs/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,4 +1,9 @@
-import { SignIn } from "@clerk/nextjs";
+"use client";
+
+import { useEffect } from "react";
+
+import { SignIn, SignedIn, SignedOut, useUser } from "@clerk/nextjs";
+import { useRouter } from "next/navigation";
 
 import SignUpSignInLayout from "@/components/SignUpSignInLayout";
 
@@ -8,12 +13,28 @@ const SignInPage = () => {
   return (
     <>
       <SignUpSignInLayout loaded={true}>
-        <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
+        <SignedOut>
+          <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
+        </SignedOut>
+        <SignedIn>
+          <RedirectToHome />
+        </SignedIn>
       </SignUpSignInLayout>
 
       <DetectStuckBannedUser />
     </>
   );
 };
 
+const RedirectToHome = () => {
+  const { user, isLoaded } = useUser();
+  const router = useRouter();
+  useEffect(() => {
+    if (user && isLoaded) {
+      router.push("/");
+    }
+  }, [router, user, isLoaded]);
+  return null;
+};
+
 export default SignInPage;