Theo's Typesafe Cult•2y ago

Clerk + Next.js app router <SignedOut> children not rendered after <UserButton> sign out

Hi there! I'm currently building an app with Clerk and I've got signing in working however when I sign out using the <UserButton> component however after the redirect, my sign in button isn't rendered until a refresh of the page. Here's my code:

<SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <div className="flex h-12 w-12 items-center">
            <UserButton
              afterSignOutUrl="/"
              appearance={{
                layout: {
                  logoPlacement: "none",
                },
                elements: {
                  userButtonAvatarBox: "h-8 w-8 sm:h-12 sm:w-12",
                },
              }}
            />
          </div>
        </SignedIn

<SignedOut>
          <SignInButton />
        </SignedOut>
        <SignedIn>
          <div className="flex h-12 w-12 items-center">
            <UserButton
              afterSignOutUrl="/"
              appearance={{
                layout: {
                  logoPlacement: "none",
                },
                elements: {
                  userButtonAvatarBox: "h-8 w-8 sm:h-12 sm:w-12",
                },
              }}
            />
          </div>
        </SignedIn

Thanks in advance!

3 Replies

SamOP•2y ago

Any help at all would be really appreciated :) Would like to get this fixed asap if anyone would like to help 😊

Rhys•2y ago

You'll get faster support in the clerk Discord for this since it's a Clerk question https://discord.gg/Hqvzh4cadb

SamOP•2y ago

Yeah, it turned out to be a clerk issue which they had to fix on their end

Gaming

Programming

Clerk + Next.js app router <SignedOut> children not rendered after <UserButton> sign out