TTC
Theo's Typesafe Cult•2y ago
Sam

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
Sam
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
Sam
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
Sam•2y ago
just figured out what AfterSignInURL and AfterSignOutURL were 🤦

Did you find this page helpful?