clerk / javascript

Official JavaScript repository for Clerk authentication
https://clerk.com
MIT License
1.14k stars 259 forks source link

Restricted page bypassed auth with nextjs router after deployment #1619

Closed BiskremMuhammad closed 1 year ago

BiskremMuhammad commented 1 year ago

Hi, I'm having this issue on a deployed version of the Next app, and i'm using netlify to host my app. The issue is on the Deployed version only though, it's working perfectly on the localhost. So first: i have a payment page at route /payment/start, and it's restricted, this is my middleware.ts

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

// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/nextjs/middleware for more information about configuring your middleware
export default authMiddleware({
  publicRoutes: ["/", "/contact"],
});

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

So, on a click of a button i'm using router.push("/payment/start") to navigate to this page. i also tried router.replace but it also didn't work on the deployed app. on localhost, it's loading the Sign in form just ok, but on the deployed version it displayed the page and the userId is null (userId from @clerk userAuth()) but if i reload the page on the deployed version with the restricted url NOW it shows up the sign in form!!

Package + Version

Dependencies + versions

Provide a json with the dependencies used in your project (copy paste from yarn.lock / package-lock.json) or a github project / template that reproduces the issue.

*Include the @clerk/ packages and their versions!**

Example:

{  
  "dependencies": {
    "@clerk/nextjs": "^4.23.2",
    "axios": "^1.4.0",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.3",
    "firebase": "^9.23.0",
    "firebase-admin": "^11.10.1",
    "firebase-frameworks": "0.10.4",
    "lottie-react": "^2.4.0",
    "next": "13.4.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-modal-video": "^2.0.0",
    "react-slick": "^0.29.0",
    "react-type-animation": "^3.1.0",
    "sass": "^1.62.1",
    "slick-carousel": "^1.8.1",
    "wowjs": "^1.1.3"
  },
  "devDependencies": {
    "@svgr/webpack": "^8.0.1",
    "@types/node": "^20.4.4",
    "@types/react": "^18.2.16",
    "@types/react-modal-video": "^1.2.0",
    "@types/react-slick": "^0.23.10",
    "typescript": "^5.1.6"
  }
}

Browser/OS

If applicable e.g. Chrome {Version 115.0.5790.170 (Official Build) (arm64)}, Node {v18.17.1} ,

jescalan commented 1 year ago

Hey @BiskremMuhammad - in order to help us figure this one out, we need a minimal reproduction. Is there any chance you'd be willing to put one together?

clerk-cookie commented 1 year ago

Hello 👋

We currently close issues after 40 days of inactivity. It's been 30 days since the last update here. If we missed this issue, please reply here. Otherwise, we'll close this issue in 10 days.

As a friendly reminder: The best way to see an issue fixed is to open a pull request. If you're not sure how to do that, please check out our contributing guide.

Thanks for being a part of the Clerk community! 🙏

clerk-cookie commented 1 year ago

Hello again 👋

After 40 days of no activity, we'll close this issue. Keep in mind, I'm just a robot, so if I've closed this issue in error, please reply here and my human colleagues will reopen it.

As a friendly reminder: The best way to see an issue fixed is to open a pull request. If you're not sure how to do that, please check out our contributing guide.

Thanks for being a part of the Clerk community! 🙏

clerk-cookie commented 1 month ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.