OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Next.js update client component on successful login

  • Thread starter Thread starter Viktor
  • Start date Start date
V

Viktor

Guest
I am making a Next.js + DRF website with authentication. In my navbar I want to render either "log in" or "log out" button. So I pass a boolean prop from server side to client-side page:

Code:
export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {

  const session = await auth();

  return (
    ...
      <NavBar authenticated={!!session} />
    ...
  );
}

export default function NavBar({ authenticated }: { authenticated: boolean }) {
  
  return (
    ...
          {authenticated ? (
            <form action={logOut}>
              <button>
                Sign out
              </button>
            </form>
          ) : (
            <Link
              href="/login"              
            >
              Sign in
            </Link>
          )}
    ...
  );
}

export default function LoginPage() {
  const [errorMessage, dispatch] = useFormState(authenticate, undefined);
  const router = useRouter();
  const { pending } = useFormStatus();

  if (errorMessage === "ok") {
    router.push("/");
  }

  return (
    <LoginForm />
  );
}

But the problem is that after successful login, navbar doesn't get reloaded, so it stays "Sign in". What is the correct approach to handle authentication state on client side?

If I replace router.push("/") after singUp is executed with window.location.reload() is updates the page, but then what is the correct way to handle redirects after login then?

<p>I am making a Next.js + DRF website with authentication. In my navbar I want to render either "log in" or "log out" button. So I pass a boolean prop from server side to client-side page:</p>
<pre><code>export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {

const session = await auth();

return (
...
<NavBar authenticated={!!session} />
...
);
}

export default function NavBar({ authenticated }: { authenticated: boolean }) {

return (
...
{authenticated ? (
<form action={logOut}>
<button>
Sign out
</button>
</form>
) : (
<Link
href="/login"
>
Sign in
</Link>
)}
...
);
}

export default function LoginPage() {
const [errorMessage, dispatch] = useFormState(authenticate, undefined);
const router = useRouter();
const { pending } = useFormStatus();

if (errorMessage === "ok") {
router.push("/");
}

return (
<LoginForm />
);
}

</code></pre>
<p>But the problem is that after successful login, navbar doesn't get reloaded, so it stays "Sign in". What is the correct approach to handle authentication state on client side?</p>
<p>If I replace <code>router.push("/")</code> after <code>singUp</code> is executed with <code>window.location.reload()</code> is updates the page, but then what is the correct way to handle redirects after login then?</p>
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top