I ran into a issue when using the and components inside a NextJS project using App Router.
If you add the apperance prop to the and a user click the to sign out the component will not render until you refresh the screen.
If you refresh the screen at any point between signing in and signing out the component will appear. But, if the broswer does not refresh between signing in and signing out. The component will not render.
- Clone NextJS Repo
- Run ‘npm install next@14.0.0’
- Create application on clerk. Copy publishable key and secret key
- Rename ‘env.template’ to ‘env.local’.
- Paste keys from Clerk into file
- Run ‘npm run dev’
- Create account on site
- In ‘@/app/layout.tsx’ add the following code underneath the tag on line 89.
- Add the following appearance prop to the component in ‘@/app/sign-in/[[…sign-in]]/page.tsx’
- Control + C in Terminal to stop running the development server.
- Run ‘npm run dev’
- Click ‘View Demo’
- Sign In
- Click ‘Sign Out’ button in top-right corner of screen
- Blank screen should appear (NOTE: If the component renders repeat steps 13 and 14. The component should does not render again).
NOTE: If you refresh the page the component will render.
- Remove appearance prop from component in ‘@/app/sign-in/[[…sign-in]]/page.tsx’
- Save file and repeat steps 13 and 14. The component will render.
I found that if the browser refreshes at any point before clicking the ‘Sign Out’ button then the component with appearance props will render.
- Add an appearance prop back to the component
- Repeat step 13 from steps above.
- Refresh browser
- Click ‘Sign Out’ button in top-right corner of screen The component will render with the appropriate appearance props.
I downgraded Next to version 13.5.6 and repeated the steps to reproduce above. The same outcome occurred. I also downgraded Clerk to 4.21.8, repeated the steps above and got the same outcome.