clerk and next.js authentication middleware code isnt protecting my route (/dashboard)

Question

I cannot get my dashboard route to authenticate before entering. I have both my .env and middleware files outside the app folder.

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({
    // Routes that can be accessed while signed out
    publicRoutes: ['/'],
    // Routes that can always be accessed, and have
    // no authentication information
    ignoredRoutes: ['/no-auth-in-this-route'],
});
 
export const config = {
  // Protects all routes, including api/trpc.
  // See https://clerk.com/docs/references/nextjs/auth-middleware
  // for more information about configuring your Middleware
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cmVuZXdpbmctdG9hZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk
CLERK_SECRET_KEY=sk_test_<redacted>

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

I am using clerk and had the correct sign in middleware as well as the correct .env. I state dashboard and sign-in and sign-out inside the env files as well. I'm following a youtube tutorial to the T. Would anyone know any possible solutions to this issue? '

Answer 1

I work at Clerk as a DevX Engineer hopefully I can provide some guidance. For the Middleware file you don't need the ignoreRoutes that is just an example. You have the .env setup correctly for custom sign-in or sign-up otherwise it would have blocked the route. You can add them to the Middleware publicRoutes just in case if you want though, it would look like this:

import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({
    publicRoutes: ['/', '/sign-in(.*)', '/sign-up(.*)'],
});
 
export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

For the components themselves I assume they look something like and if its App router the path needs to be something like app/sign-up/[[...sign-up]]/page.tsx same for sign-in

import { SignUp } from "@clerk/nextjs";
 
export default function Page() {
  return <SignUp />;
}

You can find additional resources here: https://clerk.com/docs/references/nextjs/custom-signup-signin-pages#update-your-environment-variables

and we also have a Discord Community with Support https://clerk.com/discord