Is <AuthLoading> necessary for handling an authenticated page?
I have a page in my Next.js v14.2.2 that is neither a public nor ignored route in my Clerk v4.30.1 middleware.ts file. In other words, if a user navigates to that page unauthenticated that user will see the Clerk sign-in page.
I am trying to understand why the application behavior is different between my Vercel prod deployment vs. any preview or local deployment.
Prod shows a blank page: https://crystaltxt.com/settings
Any Vercel preview deployment is working as expected with a rendered page:
https://crystal-txt-f4i5xg3l7-matts-projects-82cbe13a.vercel.app/settings
I am guessing the root cause may be because I am not using isLoading or AuthLoading module as defined in this docs page. Maybe Vercel prod loads faster or in a different order.
https://docs.convex.dev/auth/clerk#logged-in-and-logged-out-views
But even if the user is already logged in, they will still see a blank page in production.
12 Replies
The template examples seem to show that you would need an if statement before a regular page.
https://github.com/get-convex/convex-nextjs-app-router-demo/blob/bcc7749acb93ad29f4a2ff62ad750822cb87ad28/app/page.tsx
export default function Home() {
return (
<main>
<SignInOrComposer />
<AllPosts />
</main>
);
}
export function SignInOrComposer() {
const { isLoading, isAuthenticated } = useConvexAuth();
return isAuthenticated ? (
<Composer />
) : (
<div className="composer">
<div>{isLoading ? <button disabled>...</button> : <SignInButton />}</div>
<div className="h-1"></div>
</div>
);
}
https://github.com/thomasballinger/convex-clerk-users-table/blob/a78a9083cede8b834a80e1c6c2d189ee08b490c9/src/main.tsx#L45
This is a conditional loading experience that uses <Authenticated> and <Unauthenticated>
At least one production user will get immediately and automatically get redirected back to / if they go the https://www.crystaltxt.com/settings
Not even the sign-in page will finish rendering.
Perhaps this a cookies issue.
I see a 404 for https://clerk.crystaltxt.com/v1/client/sessions/sess_2fyNsCLvkGOXhz1D6ZOfjyWAhcp/tokens/convex?_clerk_js_version=4.72.2, is that not a 404 in your preview deployments? I can't access the preview deployments because of your vercel settings.
It sounds like you might have a Convex template for development but not for prod with Clerk
I don’t think there’s a 404 in my preview deployment
Can you explain what you mean by “Convex template for development”
Are you saying the next.js app’s code might be different between prod and preview deployments? I can double check that, but I doubt they are different
In the Clerk setup you hvae to create a Convex JWT template.
If you have a separate production Clerk instance it also needs this.
This is just an idea for something tha twould be different between a preview deployment and production.
This network request seems relevant if it's only a 404 in production.
Ah. I didn’t do that
Again heads up that we can't see
Thank you Tom!
@Matt Luo Are you following a guide for this? https://docs.convex.dev/auth/clerk is helpful, it walks you through all the required steps
I did for non-prod, but neglected to go back through the guide for prod and so didn’t do that JWT step for production
App isn’t used right now so the stakes are low
Ah and you have two separate clerk things, one for prod and one for dev? that makes sense
Yes
Well, this error makes clear that although I understand that the ConvexClientProvider is using that JWT token, it is not burned into my brain. Now it will be!