The Clerk fails to secure confidential paths in Next.js

When it comes to handling authentication in my app, I've implemented protected routes using Clerk's middleware:

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

export default authMiddleware({
  publicRoutes: ["/sign-in", "/sign-up"],
});

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

Despite setting the route / to require authentication before access, I'm still able to navigate to it without signing in. Can anyone spot what mistake I might be making here?

Answer №1

Although it seems like you've already solved the problem, here's a tip for anyone else facing the same issue: make sure that middleware.ts is located in the root of your project as specified in the documentation. This means that if you have an app directory, the file should be placed in the same folder where the app directory is saved (for example,

C:\Users\[your name]\[your project]\middleware.ts
).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an issue with Nextjs pagination when it comes to the

Trying to utilize the react-paginate package and encountering an error while attempting to access the pathname. Below is a snippet of my code: const paginationHandler = (page) => { const currentPath = location.pathname; const currentQue ...

Browsing data privacy is crucial, which is why I have decided to operate both servers on the same port to ensure that cookies are

In my project, the front end is built with Next.js and the backend uses Express and Node.js. These projects are currently running on different ports - the frontend on port 3000 and the backend on port 8080. While everything works fine locally and cookies a ...

Issue with useState in Next.js when fetching data from an API

When attempting to retrieve data from the API, I am receiving a response. However, when trying to set the data to useState using the setAccessData function, the data is not being accessed properly. Despite trying multiple methods, the data continues to sho ...

"Exploring the methods to retrieve Firebase authentication error details and outputting the console log message along with

When I encounter an error in Firebase authentication, I want to display it in the console log. However, nothing is being logged and the catch block is not even getting executed. I am unsure about why this is happening and how to retrieve the error code and ...

Leveraging the power of NextJS and Strapi: Efficiently fetching multiple API pages with a single getStaticPaths

Both NextJs and Strapi offer guidance on fetching data from a single collection type within Strapi. The process involves the following code snippet: const pages = await (await fetch(getStrapiURL("/pages"))).json(); const paths = pages.map((page) => { ...

Unlocking the Dialog Component: a Parent's Guide

Is there a way to programmatically open a Headless UI Dialog component from its parent element? https://i.stack.imgur.com/29uRG.jpg ...

NextJs is currently experiencing compatibility issues with SunEditor plugins, causing them to not

I have been encountering issues when using plugins with suneditor-react. Here is how I have imported SunEditor: import "suneditor/dist/css/suneditor.min.css"; // const SunEditor = dynamic(() => import("suneditor-react"), { ssr: fal ...

Error encountered: NextJs Docker container unable to run due to permissions issue (sh: next: Permission denied

I have encountered an issue while attempting to run a docker compose file on my ubuntu server that contains a nextjs 13 application. When I execute docker-compose up -d, the following error arises: => ERROR [builder 4/4] RUN npm run build ...

When running Nextjs locally, Sendgrid functions seamlessly. However, when I deploy it on Vercel, Sendgrid

I've successfully tested this locally, but encountered a "Response Error: Unauthorized" when deploying on Vercel. After creating and verifying a Single Sender Verification on Sendgrid, I attempted to generate a new API key, but the issue persists. I ...

Having Trouble Showing Loading Component on Next.js v13

Having some issues with setting up a loading component in my Next.js v13 project. I followed the documentation by creating a file called loading.tsx in the src directory, but it's not appearing on the page as expected. I've also included a functi ...

What is the reason for next-redux-wrapper double hydrating in the logger?

I am encountering difficulties while using next-redux-wrapper with nextjs and I need some clarification on the concept of Hydrate between server and client. Recently, I have started learning nextjs with next-redux-wrapper and redux-toolkit packages. After ...

How can you implement CSS styling for Next.js HTML during server-side rendering?

Explore Next.js and observe the page request in the network tab. The preview displays not only the HTML but a fully pre-styled page as well. https://i.stack.imgur.com/deJLY.png When working with Styled-Components and Material-UI, they offer the ServerSty ...

Every time I try to import useContext, I encounter this error

When I try to import using useContext, I am encountering the error Server Error ReferenceError: UserContext is not defined. It's worth noting that I am working with next.js. Could this be related to webpack configuration or is there an issue in my cod ...

When utilizing a Javascript event listener within ReactJS with NextJS, the dynamically imported module without server-side rendering fails to load

Hello everyone, I am new to ReactJS and NextJS and would really appreciate some advice on the issue below. Thank you in advance! Here is my current tech stack: Node v16.6.1 React v17.0.2 Next.js v10.0.4 I'm working on implementing a carousel and si ...

What could be causing the "502 Gateway" error specifically for POST requests in my NextJs app hosted on Firebase?

I've encountered an issue while trying to build an API with the NextJs framework and hosting it on Firebase (Hosting and Functions). The GET requests work fine, but when I try to send a POST request, I keep getting a "502 Bad Gateway" error. To repli ...

leveraging hooks in NextJS app router for static page generation

How can I make an action take effect on page-load for the app router equivalent of statically generated pages from static paths in NextJS? Everything is working fine with my page generation: // app/layout.js import Providers from '@/app/Providers&apo ...

What steps can I take to limit access to my API exclusively for the Frontend?

I'm in the process of creating a gaming platform, and unfortunately, there has been an exploitation of the API. How can I establish a set of "approved domains" that are allowed to access my API? The previous misuse of the API resulted in individuals ...

What steps should be followed for the initial deployment of a Next.js app and how should re-deployments be handled thereafter?

I recently completed a sample application in Next.js and successfully deployed it with the npm run build command. To ensure a custom server deployment, I've been referring to this informative article from Next.js documentation: Custom Server Article. ...

Step-by-step guide on redirecting to a different page in NextJS if a dynamic route cannot be found

I need assistance with redirecting users when they access a dynamic route that does not exist. The dynamic route points to a field within a statically defined array of fields. Here is the code snippet for the page: import { fields } from "@/data/fiel ...

Error: WebAssembly.instantiate() encountered a TypeError when trying to import module #0 named "env". The error indicates that the module is not a valid object or

We are currently involved in a project utilizing Next.js and Three.js (react-three-fiber). However, after clearing the cache in the browser, the 3D model disappeared and we encountered some errors. Specifically, there was one warning and one error that kep ...