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>
  );
};

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

SamOP•5/3/23, 4:10 PM

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•5/3/23, 4:25 PM

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

SamOP•5/3/23, 4:48 PM

okay i've got it working using router.refresh()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•5/3/23, 6:15 PM

just figured out what AfterSignInURL and AfterSignOutURL were

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

Similar Threads

Similar Threads

Similar Threads