<SignIn> Component Not Rendering After Signing Out When Component Has Appearance Props Added #1981

Activity

1. brettabamonte

   added

   needs-triageA ticket that needs to be triaged by a team memberA ticket that needs to be triaged by a team member

   on Oct 30, 2023
2. tjl-jg commented on Nov 7, 2023

   

   tjl-jg

   on Nov 7, 2023

   Last edited by tjl-jg

   More actions

   I have an issue that sounds very similar, but with the <UserButton />. After signing out, and signing back in, it renders at size 0x0.

   Not sure if it's related or not, but the browser console is showing a couple of errors related to signin. The stack trace is to a packed vendors file, so the line numbers probably aren't relevant, but the error is "Uncaught TypeError: Cannot read properties of undefined (reading 'imageUrl')" and the line of code sets avatarUrl with l.userData.imageUrl, where l is a minified variable name.

   All that to say that it looks like it is somehow trying to set the avatar with the imageUrl of a userData that hasn't been initialized yet.

   👍React with 👍1Reacted by Vsevolod Fedorov
3. IGassmann commented on Nov 15, 2023

   

   IGassmann

   on Nov 15, 2023

   Contributor

   More actions

   I can confirm this also happens on @clerk/nextjs: 4.27.1/next: 14.0.2. However, it happens for us independently of the use of the appearance prop
4. jescalan

   added

   linearCreated by Linear-GitHub SyncCreated by Linear-GitHub Sync

   on Nov 16, 2023
5. jescalan

   added

   prioritizedThis issue has been triaged and the team is working on itThis issue has been triaged and the team is working on it

   and removed

   needs-triageA ticket that needs to be triaged by a team memberA ticket that needs to be triaged by a team member

   linearCreated by Linear-GitHub SyncCreated by Linear-GitHub Sync

   on Nov 27, 2023
6. LekoArts

   added

   bugSomething isn't workingSomething isn't working

   nextjs

   react

   themes

   on Nov 29, 2023
7. LekoArts commented on Dec 6, 2023

   

   LekoArts

   on Dec 6, 2023

   Contributor

   More actions

   Hello all!

   Just a short update here to show that I/we haven't forgotten this issue 😅 Thanks for the reproduction, I was able to also see the issue. Important bit: This also happens without the appearance prop.
   After investigating I'm still not sure exactly what is causing it, might be a race condition or an issue with client side re-hydration.

   We'll discuss internally a bit how we want to tackle this but I'd be interested in your opinion on this question (@brettabamonte @tjl-jg @IGassmann):

   What is your expected behavior for the <SignOutButton /> as to where it should navigate?
   Should it stay on the same page? Navigate to the sign in page? Navigate to a custom page one has to define?

   👍React with 👍2Reacted by Travis Little and Brett Abamonte
8. tjl-jg commented on Dec 6, 2023

   

   tjl-jg

   on Dec 6, 2023

   More actions

   My opinion about redirect options: I prefer full context to be in my code, so I'd probably use a property specifying the redirect destination even if my destination was the default. This way it shows up in searches of the project, and the action is clear later on (or to other developers) without anybody having to read documentation.

   👍React with 👍2Reacted by Brett Abamonte and Igor Gassmann
9. brettabamonte commented on Dec 7, 2023

   

   brettabamonte

   on Dec 7, 2023

   Author

   More actions

   @LekoArts I agree with @tjl-jg. I like the context to be within the component using a property. Having a default destination is nice if the property isn't declared on the component. 90% of the time, I like redirecting users to a default page like the sign in page but there are instances where it'd be nice to redirect them to a custom destination.

   Thank you and the team for looking into this!
10. IGassmann commented on Dec 7, 2023

    

    IGassmann

    on Dec 7, 2023

    Contributor

    More actions

    @LekoArts I agree with @tjl-jg. I like the context to be within the component using a property. Having a default destination is nice if the property isn't declared on the component. 90% of the time, I like redirecting users to a default page like the sign in page but there are instances where it'd be nice to redirect them to a custom destination.

    Thank you and the team for looking into this!

    I agree. Additionally, there may be situations where redirection is not desired. Consider an app that functions both when signed in and when signed out, where being signed in is not essential for using the app.

    👍React with 👍1Reacted by Brett Abamonte
11. LekoArts commented on Dec 8, 2023

    

    LekoArts

    on Dec 8, 2023

    Last edited by LekoArts

    Contributor

    More actions

    Thanks for your input!

    Then you can unblock yourself by using the signOutCallback prop on the <SignOutButton /> component:

    "use client"
    
    import { useRouter } from "next/navigation"
    import { SignOutButton } from "@clerk/nextjs";
    
    export const Signout = () => {
      const router = useRouter()
    
      return (
        <SignOutButton signOutCallback={() => router.push('/your-path')}>
          <button>Sign Out</button>
        </SignOutButton>
      )
    }

    Or if you want to reload the page (you'd want to make that page public then though):

    "use client"
    
    import { SignOutButton } from "@clerk/nextjs";
    
    export const Signout = () => {
      return (
        <SignOutButton signOutCallback={() => window.location.reload()}>
          <button>Sign Out</button>
        </SignOutButton>
      )
    }

    @brettabamonte What your reproduction shows is in some sense "expected" behavior that is described in this thread here. The blank page shows because it shows the unauthenticated state of the /dashboard route which will be empty. The behavior you want kicks in because the middleware redirects to the sign-in page because /dashboard is not a public route.
    With the callback prop above you can reliably do whatever you want after the signout 👍

    We'll still look into the underlying issue and see if we'd need to change something DX-wise.

    👍React with 👍1Reacted by Brett Abamonte
12. Sengulair commented on Apr 24, 2024

    

    Sengulair

    on Apr 24, 2024

    More actions

    I have the same problem as @tjl-jg. Here is a minimal reproduction by the way: Sengulair/clerk-nextjs-app-issue@f7a29db
    It still appears on the 5.0.1 version. Do we have some workaround for that case?

    👍React with 👍2Reacted by MaksymBoikoAcro and Carlos Knopel
13. panteliselef commented on May 1, 2024

    

    panteliselef

    on May 1, 2024

    Contributor

    More actions

    @Sengulair mind giving this another try with 5.0.4
14. Sengulair commented on May 1, 2024

    

    Sengulair

    on May 1, 2024

    More actions

    @panteliselef I've updated the reproduction to 5.0.4. Still failing with the same errors
15. Sengulair commented on May 3, 2024

    

    Sengulair

    on May 3, 2024

    More actions

    @panteliselef Tested with 5.0.6 and seems the problem is resolved.

    👍React with 👍1Reacted by Dimitris Klouvas
16. dimkl commented on May 9, 2024

    

    dimkl

    on May 9, 2024

    Contributor

    More actions

    Closing this as it seems resolved. @brettabamonte If the issue persists after using a version >= 5.0.6, feel free to re-open the issue.
17. dimkl

    closed this as completedon May 9, 2024
18. clerk-cookie commented on May 10, 2025

    

    clerk-cookie

    on May 10, 2025

    Collaborator

    More actions

    This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
19. clerk

    locked as resolved and limited conversation to collaborators on May 10, 2025