javascript icon indicating copy to clipboard operation
javascript copied to clipboard

Paths with a "." are ignored by `authMiddleware()`

Open IGassmann opened this issue 2 years ago • 10 comments

  • [x] I have reviewed the documentation
  • [x] I have searched for existing issues
  • [x] I have ensured I am on the most recent version, and checked the changelog for that version
  • [x] I have provided the Frontend API key from my application dashboard: pk_test_dGVuZGVyLXF1YWdnYS0zMC5jbGVyay5hY2NvdW50cy5kZXYk
  • [x] I have provided a minimal reproduction or replay recording below

Brief Summary of the Issue

Next.js routes that include a . in their path are ignored by the authMiddleware(), even though . is a valid character to have within a URL path:

// `encodeURIComponent()` encodes characters such as ?, =, /, &, :
console.log(`paths/with/${encodeURIComponent('a.dot')}/are/okay`);
// Expected output: "paths/with/a.dot/are/okay"

This makes those pages error in Next.js if they use auth() in one of their Server Components.

Potential Solution

The Clerk's default proposed middleware config matcher doesn't match URL paths that include a . in their path.

Editing the matcher to allow . doesn't solve the issue, because the authMiddleware() also ignores those URL paths by default due to its DEFAULT_IGNORED_ROUTES.

Both the DEFAULT_CONFIG_MATCHER and the DEFAULT_IGNORED_ROUTES need to be updated in the authMiddleware() code and in the docs to allow for . in URL paths.

Minimal Reproduction or Replay

  • git clone https://github.com/IGassmann/dot-clerk-issue
  • npm install the required dependencies.
  • npm run dev to launch the development server.
  • Open http://localhost:3000
  • Click in "View Demo"
  • This will open http://localhost:3000/dot.path/dashboard which will throw:
Error: Clerk: auth() was called but it looks like you aren't using `authMiddleware` in your middleware file. Please use `authMiddleware` and make sure your middleware matcher is configured correctly and it matches this route or page. See https://clerk.com/docs/quickstarts/get-started-with-nextjs

Package + Version

  • [ ] @clerk/clerk-js
  • [ ] @clerk/clerk-react
  • [x] @clerk/nextjs
  • [ ] @clerk/remix
  • [ ] @clerk/types
  • [ ] @clerk/themes
  • [ ] @clerk/localizations
  • [ ] @clerk/clerk-expo
  • [ ] @clerk/backend
  • [ ] @clerk/clerk-sdk-node
  • [ ] @clerk/shared
  • [ ] @clerk/fastify
  • [ ] @clerk/chrome-extension
  • [ ] gatsby-plugin-clerk
  • [ ] build/tooling/chore
  • [ ] other:

IGassmann avatar Aug 30 '23 08:08 IGassmann