NextJS Clerk Private Routes not working after deployment using Vercel

Question

I am trying to build a simple NextJS app that uses Clerk for Auth. Locally, everything works as it should, but when I deploy using Vercel, private routes all redirect to the home page, even after the user is logged in / authenticated. My auth middleware is basically default:

import { authMiddleware, redirectToSignIn }    from "@clerk/nextjs";
    
export default authMiddleware({
    publicRoutes: ["/", "/dashboard"], 
    authorizedParties: ["https://custom.vercel.app", "http://localhost:3000"]
});
    
export const config = {
    matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

and "/", "/dashboard", and "/feed" routes are all built the same way, just returning simple divs. I have Vercel set up with the following ENV Variables (specified for production/dev when necessary):

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_testxxx / pk_livexxx
CLERK_SECRET_KEY=sk_testxxx / sk_livexxx

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

here is the file tree: filetree

I tried to write a custom afterAuth function but this ended with the same issue - private routes work locally, do not work after vercel deployment

Hrishikesh Mane · Accepted Answer · 2024-04-20 03:59:20Z

1

Clear the cookies and test it. I spent one whole day debugging this is my clerk dashboard and my DNS. I tried to reproduce the issue on another browser and it went trough just fine. Turns out the cookies are the issue.

edited Apr 20, 2024 at 3:59

answered Apr 20, 2024 at 3:57

Hrishikesh Mane

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextJS Clerk Private Routes not working after deployment using Vercel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related