Next.js Discord

Discord Forum

Middleware with NextAuth not working

Answered
Honded posted this in #help-forum
Open in Discord
HondedOP
I have a couple static pages that I want to protect, reading the docs (https://next-auth.js.org/configuration/nextjs#middleware) apparently I can just create a middleware.ts file and paste the line:

export { default } from "next-auth/middleware"

I have set my NEXTAUTH_SECRET env variable, created the middleware.ts file in the root and pasted the line above. However I can still access my pages even when I'm not authenticated.

Any help on pointing out what I may be missing is appreacited, thanks in advance!
Answered by Honded
Alright, so it worked, even with just having the line:

export { default } from 'next-auth/middleware';

However, it only works for the default nextjs sign-in page (I get this on the url though: api/auth/signin?callbackUrl=%2F).
When I try to add my custom login page I get ERR_TOO_MANY_REDIRECTS

And also If I add a middleware function definition to the middlware.ts file it no longer works anymore. So it works like this:

//middleware.ts
export { default } from 'next-auth/middleware';

But not like this:

//middleware.ts

export { default } from 'next-auth/middleware'; export function middleware() {}
View full answer

32 Replies

HondedOP
Thanks for reply!

Forgot to mention I'm using pages router and the path of my middleware.ts is at the root, same level as my pages folder
No src folder
Giant panda
if you are using the src dir then place your middleware inside it otherwise keep it global
@Honded No src folder
Ray
do you have NEXTAUTH_URL variable set?
HondedOP
Yeah, I set it on my env file
it points to localhost:3000
@Giant panda if you are using the src dir then place your middleware inside it otherwise keep it global
HondedOP
By global, do you mean the root folder? that's where I have it
try changing the middleware.ts to this and see if it logged to server console
export function middleware() {
  console.log("middleware")
}
HondedOP
Yes, it was logged to server console.

This is the what my middleware.ts file looks like:
export { default } from 'next-auth/middleware'; export function middleware() { console.log('middleware'); }
I'm still able to access my static pages in my pages folder, which I don't want
@Honded I'm still able to access my static pages in my pages folder, which I don't want
Ray
are you already logged in? have you tried on different browser or incognito mode?
@Honded Remove the export line?
Ray
yes remove the console.log one
and try export { default as middleware } from 'next-auth/middleware';
HondedOP
Ok, so my middleware.ts file looks like this:

export { default as middleware } from 'next-auth/middleware';

That's the only line I have
Ray
yes try it
Giant panda
try adding matching params
HondedOP
Alright, so it worked, even with just having the line:

export { default } from 'next-auth/middleware';

However, it only works for the default nextjs sign-in page (I get this on the url though: api/auth/signin?callbackUrl=%2F).
When I try to add my custom login page I get ERR_TOO_MANY_REDIRECTS

And also If I add a middleware function definition to the middlware.ts file it no longer works anymore. So it works like this:

//middleware.ts
export { default } from 'next-auth/middleware';

But not like this:

//middleware.ts

export { default } from 'next-auth/middleware'; export function middleware() {}
Answer
HondedOP
You were able to solve the main question, so thanks a lot Ray!
Maybe I'll do a new thread for the above later on
you can do this
// middleware.ts
import { withAuth } from "next-auth/middleware";

export default withAuth({
  pages: {
    signIn: "/your-sign-in-page",
  },
});
HondedOP
awesome man, it worked
I'm still getting this http://localhost:3000/login?callbackUrl=%2F

Not really sure what the ?callbackUrl=%2F portion is
Giant panda
I'm getting same error lol
%2F = /
Giant panda
you need to configure your middleware function imo
@Ray that's the url get redirected from
HondedOP
Thanks again man!