CODEWITHSUNDEEP
next.jsvercelclerk
sfdev27
sfdev27

Reputation: 31

NextJS Clerk Private Routes not working after deployment using Vercel

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

Upvotes: 3

Views: 711

Answers (1)

Hrishikesh Mane
Hrishikesh Mane

Reputation: 11

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.

Upvotes: 1

Related Questions