Someone, Anyone, PLEASE. Clerk login doesn't appear on deployed version

[TyByers21]

I've been asking for help on this for a month. Everything works on the client side with no issues. MongoDB is setup properly. But when deployed to Vercel, the login for Clerk screen never appears so the application is just stuck in limbo because you can never sign in. Does ANYONE have any idea why that would be?

https://github.com/TyByers21/social-threads-app

[aniket-kes]

Bro i m facing error while adding the comment to the original thread idk it says reading properties of push() undefined, help me out

[gazcrisa]

What version of Next have you deployed? There is an issue with the latest version of NextJS 13 and Clerk such that Clerk doesn't show the SignIn and SignUp components.

[TyByers21]

I'm using Next JS 13.4.13. Should I do a regression to an earlier version?

[absolutetsonga]

Hello! I have faced the same problem, Clerk does not display the sign-up component in my sign-up/[[...sign-up]]/page.tsx file, and I found out that it is relatable with my env variable syntax:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY = "" CLERK_SECRET_KEY = ""

Note that I had spaces between key and value. I removed them and it solved my problem, so check that out. Also, consider remove the "" symbols in env. variable. After all, it should look like this:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_KEY_VALUE CLERK_SECRET_KEY=YOUR_KEY_VALUE

[quanganh2001]

Me too. I am doing from the newest Next.js version is v14, same the error when I signed out then sign in again it will be rendering white page until I reload page, the sign in clerk page will show again

[dmitry-grinko]

Try to build and run using "npm run start" instead of "npm run dev"

[Aviral2002]

Same problem, using Next js 14.2.3 version, tried all the above solution, nothing worked

[aniket-kes]

I've been asking for help on this for a month. Everything works on the client side with no issues. MongoDB is setup properly. But when deployed to Vercel, the login for Clerk screen never appears so the application is just stuck in limbo because you can never sign in. Does ANYONE have any idea why that would be?

https://github.com/TyByers21/social-threads-app

What you can try out is go to clerk dashboard and click on the on your thread project in the left sidebar you will find User & Authentication Then you will see Restriction. Now here you have to add your domain i.e., url of you website in Identifier.

[IAmFarrokhnejad]

I used to get the blank screen until I modified the "middleware.ts" file by using "authMiddleware" instead of "clerkMiddleware".

Code before fixing it looked like this:

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

Fixed code:

import { authMiddleware } from "@clerk/nextjs/server";

export default authMiddleware({});

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

[PancakeToaster]

Hi guys, as @IAmFarrokhnejad mentioned, you can fix the problem by changing the clerkMiddleware to authMiddleware, the issue is that authMiddleware is depricated so you may have problems later on.

with clerkMiddleware, Clerk has made all routes public by default and you need to change your middleware.ts based on your needs. Here is their webpage with more information: https://clerk.com/docs/references/nextjs/clerk-middleware

[Vivahjah]

Hi @PancakeToaster , I cannot access clerk.com or any link associated with it like https://clerk.com/docs/references/nextjs/clerk-middleware, is your working. let me know

[Morningstar-08]

import {
  clerkMiddleware,
  createRouteMatcher
} from '@clerk/nextjs/server';

const isProtectedRoute = createRouteMatcher([
  '/(.*)'
]); //Like this for starting you can just add the '/' route and you will be able to see the Login screen

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect();
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

By adding the '/' route you will be able to see the login screen, if u havent created any specifc routes earlier. in authMiddleware we didnt have to create any routes, but in clerkMiddleware we need to specify which routes to protect as I added the / route. Refer : https://clerk.com/docs/references/nextjs/clerk-middleware

[ParshvLimbad]

import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

const isProtectedRoute = createRouteMatcher(["/", "/credits(.*)"]);
export default clerkMiddleware((auth, req) => {
if (isProtectedRoute(req)) {
auth().protect();
}
});

export const config = { matcher: ["/((?!...|_next).)", "/", "/(api|trpc)(.)"] };

Just put this in your middleware.ts

[nekonee]

I may be stupid but @ParshvLimbad ' s method gives me this runtime error

Unhandled Runtime Error
Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:
-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.
- Your Middleware matcher is configured to match this route or page.
- If you are using the src directory, make sure the Middleware file is inside of it.

And both first and third are true in my case, so it has to be a problem with the matcher.

However, changing to authMiddleware is also not giving me the results that I am looking for. @TyByers21 were you able to solve this issue? It's a real head scratcher for me. I'd rather work on my project than be stuck at something that seems so trivial.

[ParshvLimbad]

@nekonee i dont know why but it works in my case, this issue is really painful they should do something

[nekonee]

Yeah, agree, this issue is driving me insane and I don't know what I'm doing wrong

[flipnik]

Check the "Paths" in Clerk and might need configuration there to set to a custom URL (screenshot attached)

[ParshvLimbad]

Yeah, agree, this issue is driving me insane and I don't know what I'm doing wrong

I switched to supabase, it is very easy to setup.

[ParshvLimbad]

Check the "Paths" in Clerk and might need configuration there to set to a custom URL (screenshot attached)

Oh thank you i will try this

[nekonee]

Yeah, agree, this issue is driving me insane and I don't know what I'm doing wrong

I switched to supabase, it is very easy to setup.

I think I will take a look at it as well. I checked the "Paths" in my setup and they were configured properly

[ParshvLimbad]

Oh cool, thanks

[shpsyte]

Hi folks, I had the same issue and I've found it was the path value

The fix: from: <SignUp path="sign-up" />

to: <SignUp path="/sign-up" />

the same applies to <SignIn >

[frankoonk]

I had the same issue and i solved it by disabling all the providers except for "e-mail" and then it showed up.

[Hrva994]

Hi, I am still having the same error “content-policy”. Is there any solution to that? I’ve tried everything from above 😅

[fredlemieux]

Check the "Paths" in Clerk and might need configuration there to set to a custom URL (screenshot attached)

This was my issue; in the development environment, my sign-in and sign-up pages are in /sign-in and /sign-up routes, so changing the default account. paths got it working.

This is great. But I don't understand why, and the documentation doesn't clearly explain the changes you need to make to the sign-in/up routes or setting up the paths.

Would anyone be able to point me in the right direction? Or perhaps explain why the default sign-in path is accounts./sign-in in production? How to set this up so that development would be the same as production?

[phuctm97]

For people who's facing this issue, I think the Clerk team pushed breaking updates to the SDKs without realizing.

You'll need to set this in your <SignIn /> and <SignUp /> components for them to be rendered:

<SignIn path={process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL} />

<SignUp path={process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL} />

Previously, they were detected automatically.

[irakligeek]

I had the same issue where Clerk component were not showing in production mode. And it turns out there was some global css styles I had for those components causing the issue. I was hiding the default Clerk heading copy but for some reason it was hiding the entire components, as it was relying on those headings to render. So, check your custom Clerk styles if they are causing the issue.

[alex-moore-codes]

I had an issue as well and I noticed that I had not verified my domain in Clerk. After I added all the CNAMEs to my domain in Vercel (using a NextJS app), everything started working.

[IAmFarrokhnejad]

An Update on this issue: Previously I fixed it by rolling back and using authMiddleware, however it is deprecated as mentioned by @nekonee Based on the documentation, I've tested clrekMiddleware and it works fine.

Sample middleware code:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';


const isPublicRoute = createRouteMatcher([
  '/', // Home Page
//Add whatever other public route you want here
]);

export default clerkMiddleware(async (auth, req) => {
  if (!isPublicRoute(req)) {
    // Protect all non-public routes
    await auth.protect();
  }
});
// Configuration for route matching
export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

Documentation: https://clerk.com/docs/references/nextjs/clerk-middleware

[Maxwell2022]

In my case I had left this code in the layout.tsx which prevented loaded the custom sign-in / sign-up pages

diff --git a/app/layout.tsx b/app/layout.tsx
--- a/app/layout.tsx
+++ b/app/layout.tsx
 
@@ -10,20 +10,22 @@ export const metadata = {
   return (
     <ClerkProvider>
       <html lang="en" suppressHydrationWarning>
         <body>
-          <SignedOut>
-            <SignInButton />
-          </SignedOut>
-          <SignedIn>{children}</SignedIn>
+          {children}
         </body>
       </html>
     </ClerkProvider>
   );