CODEWITHSUNDEEP
authenticationmiddlewareclerk
Avner Lim
Avner Lim

Reputation: 53

authMiddleware doesn't exist after installing clerk

I tried installing authMiddleware for a tutorial using clerk but got an error saying that it doesn't exist.

I was installing clerk for this tutorial: https://www.youtube.com/watch?v=a02JAryRPVU, and I ran npm install @clerk/nextjs.

Then I put this code to enable authentication using authMiddleware

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

export default authMiddleware({});

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

but I got an error, saying Module '"@clerk/nextjs"' has no exported member 'authMiddleware'.

When running the code through localhost, I got this error: TypeError: (0 , clerk_nextjs__WEBPACK_IMPORTED_MODULE_0_.authMiddleware) is not a function

I don't know how to fix this issue, any help would be appreciated.

Upvotes: 5

Views: 8756

Answers (7)

Kamblossi
Kamblossi

Reputation: 1

I was struggling with this as well because I started off with the deprecated version of Clerk. However, I found that resolving the syntax errors using the linters available and then quickly updating clerk at the terminal resolved my issue. Just try and run npm i @clerk/nextjs@latest at the terminal. This should solve the challenge. Ensure you resolve or syntax issues. It might also be helpful to use this documentation: https://clerk.com/docs/quickstarts/nextjs

Upvotes: 0

Fraddle9
Fraddle9

Reputation: 13

For anyone who needs to use clerkmiddleware instead of authmiddleware,

I had the infinite redirect loop (ERR_TOO_MANY_REDIRECT). This is because clerkmiddleware's default code doesn't protect any route. If you want to protect routes (Means users can't see some routes without logging in) using clerkmiddleware, here is the code for it and it worked for me. This code protects all routes except the sign-in and sign-up routes. If you want only some of the routes to be protected, you can adjust the part below:

const isPublicRoute = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)']);

Here is the middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isPublicRoute = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)']);

export default clerkMiddleware((auth, request) => {
  if(!isPublicRoute(request)) {
    auth().protect();
  }
});

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

Also, here is the documentation link : https://clerk.com/docs/references/nextjs/clerk-middleware

Upvotes: 0

Toya Lazmi Khan
Toya Lazmi Khan

Reputation: 1

Add the paths you are having issues into the middleware and it will work for example in the matcher you have to add you path like "/companion/[companionId]"

Upvotes: 0

3CE
3CE

Reputation: 107

On April 22 2024, the beta version should be installed to use clerkMiddleware()

npm install @clerk/nextjs@beta

Upvotes: 0

Walace Wilker Lima Silva
Walace Wilker Lima Silva

Reputation: 1

Can you Just add the /server at the end of import location, it be like:

import { authMiddleware } from '@clerk/nextjs/server';

i recomend to use the clerkMiddleware because the type authMiddleware go be discontinued.

Upvotes: 0

Bhoomaahamso
Bhoomaahamso

Reputation: 81

The clerk team has deprecated authMiddleware. They suggest you use clerkMiddleware() instead. https://clerk.com/docs/references/nextjs/auth-middleware

So, if you use clerkMiddleware() your middleware.ts will now look like this.

import { clerkMiddleware } from '@clerk/nextjs/server';
 
export default clerkMiddleware()
 
export const config = {
  matcher: [
    '/((?!.*\\..*|_next).*)', // Don't run middleware on static files
    '/', // Run middleware on index page
    '/(api|trpc)(.*)'], // Run middleware on API routes
};

Upvotes: 8

Imfranz25
Imfranz25

Reputation: 66

I think the problem is the latest version of clerk, you may use the previous stable version of clerk (https://www.npmjs.com/package/@clerk/nextjs/v/4.30.0), this resolution fixed my problem.

npm i @clerk/[email protected]

Upvotes: 5

Related Questions