Theo's Typesafe Cult•2y ago

Clerk re-render parent server component on sign out with custom sign out button.

Hi I'm probably being a little stupid here but I'm just wondering what the best and most simple way to create a custom sign out button when using Clerk? I was able to create a Sign out button with the following code but the parent server component wouldn't rerender so I needed to refresh for it to show me as logged out:

export const CustomSignOut = () => {
  const { signOut } = useClerk();

  return (
    <div>
      <Button onClick={() => signOut()} variant={"outline"}>
        Sign Out
      </Button>
    </div>
  );
};

export const CustomSignOut = () => {
  const { signOut } = useClerk();

  return (
    <div>
      <Button onClick={() => signOut()} variant={"outline"}>
        Sign Out
      </Button>
    </div>
  );
};

How can I get the parent server component to re-render on sign out? Thanks in advance!

Solution:

just figured out what AfterSignInURL and AfterSignOutURL were 🤦

Jump to solution

3 Replies

SamOP•2y ago

https://clerk.com/docs/authentication/sign-out#custom-sign-out this is clerk's documentation on a custom sign out button and that's the exact same code i'm using here so not quite sure what i'm doing wrong

Sign out | Clerk

Detailed documentation about how to sign-out users

SamOP•2y ago

just tested this in a "non-app router" app and the component does refresh so this is more of a server component issue rather than a clerk issue okay i've got it working using router.refresh() but i still don't know if this is the right way of doing it incase anyone wants to correct me

Solution

Sam•2y ago

just figured out what AfterSignInURL and AfterSignOutURL were 🤦

Gaming

Programming

Clerk re-render parent server component on sign out with custom sign out button.