Unexpected Auto Refreshing Page on Route Guard Redirect

Hello people!

I'm building an online dictionary website with Next.js 13.5.2, and next-auth for the auth.

I wanted to make users who are already signed in unable to see the sign-in, sign-up, or forgot-password page by showing a short message with React Toastify. However, the home page gets loaded twice when users are redirected. ( simulate it using the live link: https://turkish-dictionary-chi.vercel.app/tr )

Here's what I do in the sign-in, sign-up, and forgot password pages setting a query param to catch the error on the client side and render toastify cards.

in the signup page, I render this (signup code: https://github.com/4Furki4/Turkish-Dictionary/blob/f84f49e726b9a0579917856dcc2ada5217a5e45f/src/app/%5Blocale%5D/(content)/signup/page.tsx#L29
see the signin and forgot password folders that renders this too)

const session = await getServerSession();
if (session) {
  redirect("/?warning=alreadySignedIn");
}

const session = await getServerSession();
if (session) {
  redirect("/?warning=alreadySignedIn");
}

Here's how I render the cards. (I tried not passing shallow in the replace func or using push func but did no difference.)

in the layout.tsx, I render this ( https://github.com/4Furki4/Turkish-Dictionary/blob/f84f49e726b9a0579917856dcc2ada5217a5e45f/src/app/%5Blocale%5D/(content)/(search)/layout.tsx#L20 )

useEffect(() => {
  const warningParam = params.get("warning");
  if (warningParam === "alreadySignedIn") {
    toast.warning(t(warningParam));
    router.replace("/", { shallow: true });
  }
}, [params, router, t]);

useEffect(() => {
  const warningParam = params.get("warning");
  if (warningParam === "alreadySignedIn") {
    toast.warning(t(warningParam));
    router.replace("/", { shallow: true });
  }
}, [params, router, t]);

I also replaced the redirect function with router.push function in the client components of the auth pages but that didn't guard the pages properly and showed the cached auth page without triggering the if states with session.status somehow.

One more thing that I just noticed is that the page doesn't get refreshed when users are navigated back to the signup page due to an invalid reset password link as you can see in the second video. ( The related code: https://github.com/4Furki4/Turkish-Dictionary/blob/c38560713b3f44f9561b823d6d86d8fe507ee92a/src/app/%5Blocale%5D/(content)/reset-password/%5Bid%5D/page.tsx#L43C1-L52C6 )

Let me know if something is not clear and thanks in advance for any help for solving the auto refreshing!

Unexpected Auto Refreshing Page on Route Guard Redirect

const session = await getServerSession();
if (session) {
  redirect("/?warning=alreadySignedIn");
}

const session = await getServerSession();
if (session) {
  redirect("/?warning=alreadySignedIn");
}

useEffect(() => {
  const warningParam = params.get("warning");
  if (warningParam === "alreadySignedIn") {
    toast.warning(t(warningParam));
    router.replace("/", { shallow: true });
  }
}, [params, router, t]);

useEffect(() => {
  const warningParam = params.get("warning");
  if (warningParam === "alreadySignedIn") {
    toast.warning(t(warningParam));
    router.replace("/", { shallow: true });
  }
}, [params, router, t]);

Unexpected Auto Refreshing Page on Route Guard Redirect

Unexpected Auto Refreshing Page on Route Guard Redirect

Similar Threads

Similar Threads

Similar Threads