Infinite redirect loop with custom signin page and middleware

[ghost]

Infinite redirect loop with custom sign in page and credentials provider. I'm using the next auth middleware to redirect user to sign in page like this.

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

This properly works with the built in sign in page and issue only occurs with custom sign in page. URL looks like this after redirect:

http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/

Is there any workaround for this issue? has anyone faced similar issue?

[dimbslmh]

pages/_middleware.ts:

import { withAuth } from "next-auth/middleware";

export default withAuth({
  pages: {
    signIn: "/auth/signin",
  },
});

[dimbslmh]

The middleware has its own pages option: https://next-auth.js.org/configuration/nextjs#pages

This answer was given before the release of next v12.2, where the execution of the middleware was based on the file path where it was created. v12.1.7-canary.9

Read more about it here: https://nextjs.org/docs/messages/middleware-upgrade-guide#explanation

[kblizeck]

Still receiving a syntax error here.
Next 13.0.2
Middleware exactly as you have above:

import { withAuth } from "next-auth/middleware";

export default withAuth({
	pages: {
		signIn: '/',
		error: '/',
		verifyRequest: '/',
	},
});

Invalid JSON response body from my callback URL -
https://next-auth.js.org/errors#session_error invalid json response body at http://localhost:3000/?callbackUrl=%2Fapi%2Fget-user reason: Unexpected token < in JSON at position 0 {

Also receive the same SyntaxError just on load of my initial / page

[danslobodan]

Perhaps it should also be noted how the NEXTAUTH_URL environment variable interacts with this.

a) If you do not set the variable for this value, the solution above will work.
b) If you set this variable to the root of your domain, so for example in development you would put "http://localhost:3000" the solution above will also work.
c) if you specify the signin path "http://localhost:3000/auth/signin" then it will not work.

The documentation for this variable might lead you astray.

[krishnaacharyaa]

Hey @kblizeck I am facing the same issue can you please let me know what worked for you ?
Hey @danslobodan can you please then what is the right way of handling, I am getting confused by a), b), c)

My middleware.ts

{
import { withAuth } from "next-auth/middleware";

export default withAuth({
  pages: {
    signIn: "/auth/login",
  },
});
}

my .env

NEXTAUTH_SECRET="U4OgOnuYLudf0gfArDK+yJsp5ZuJ1pQ1X65Ho3ZEuW0="
NEXTAUTH_URL=http://localhost:3000

my app/api/auth/[...nextauth]/route.ts

export const authOptions: AuthOptions = {
  secret: process.env.NEXTAUTH_URL,
  session: {
    strategy: "jwt",
  },
  // pages: {
  //   signIn: "/auth/login",
  // },
  providers: [
    CredentialsProvider({
      name: "Credentials",

      credentials: {
        email: {
          label: "Email Id",
          type: "email",
          placeholder: "Your Email Id",
        },
        password: {
          label: "Password",
          type: "password",
        },
      },
      async authorize(credentials) {
        console.log({ credentials });
        const responseBody = await loginUser(
          credentials.email,
          credentials.password
        );
        const { message, status, userId } = responseBody;
        console.log({ message, status, userId });
        if (status === 401 || status === 500) throw new Error(message);
        return userId; // Return the user ID of the authenticated user
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) token.user = user as UserProfile;
      return token;
    },

    async session({ token, session }) {
      session.user = token.user;
      return session;
    },
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

loginUser function is server action which is fetching from localhost:3000/api/users

await fetch(`http://localhost:3000/api/users`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(body),
    });

Please let me know if you need reproducible link, would be happy to provide. @danslobodan

I am getting Fetch POST error: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON as error

[danslobodan]

I'm trying to remember, but if I had to guess, you've done everything right, except the commented out code:

// pages: {
// signIn: "/auth/login",
// },

This is also something that was unobvious to me, but the configurations in the route and the middleware are completely separate entities, but they MUST MATCH. So if you have "pages" set in the route, then you must have pages set in the middleware and vice versa.

Honestly I've given up on NextAuth and implemented my own Auth server, because it was giving me severe headaches for just about anything that was not default.

NextJS middleware still does, even though I'm not using NextAuth, because it tends to block both what I want, but also just about everything I explicitly didn't allow, which includes Nextjs chunks (what?! why?!!) and files in the public folder.

The error you are seeing is likely due to the recursive redirects.

[AndrewRayCode]

Also, there's a note buried in the docs that say the middleware option only works if you're using the jwt session option. I was using the database session option. If you're using a database, you'll get an infinite redirect if you use the middleware #5392

[lisander-lopez]

Just ran into this today... so is it Database sessions vs JWT? ... do we use both? I feel like I hit a wall

[hamza-ashfaq751]

this is a proper example of next js full stack with next auth and it also cover cors

`import { NextResponse } from 'next/server';
import { withAuth } from 'next-auth/middleware';

const corsHeaders = {
'Access-Control-Allow-Origin': process.env.NEXT_PUBLIC_BASE_URL || '',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
};

export default withAuth(
function middleware(req) {
const { nextUrl, nextauth } = req;
const { pathname } = nextUrl;
const { token } = nextauth;
if (token && pathname === '/roles' && !(token.role === 'admin')) {
return NextResponse.redirect(new URL('/dashboard', req.url));
}
if (pathname === '/') {
return NextResponse.redirect(new URL('/dashboard', req.url));
}
if (token && pathname === '/login') {
return NextResponse.redirect(new URL('/dashboard', req.url));
}
if (pathname.startsWith('/api') && !token) {
return NextResponse.json(
{ mesaage: 'unauthenticated' },
{ status: 401 },
);
}
return NextResponse.next({ headers: corsHeaders });
},
{
callbacks: {
authorized: ({ token, req }) =>
!!token ||
req.nextUrl.pathname.startsWith('/api') ||
req.nextUrl.pathname.startsWith('/use-your-login-path'),
},
},
);

export const config = {
matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};
`

[sebastianvitterso]

I had this problem, and the solution for me was to update my middleware. I (unknowingly) had it configured with a authorized-callback like so:

export default withAuth(
  function middleware(request: NextRequestWithAuth) {
    // ...
  },
  {
    callbacks: {
      authorized: ({ token }) => !!token
    },
  }
)

... which is something I found worked (with the default signin-page), after following a tutorial.

With a custom signin-page, however, it intercepted the request to the signin page, and said "hey, you're not authorized, you need to be redirected to the signin-page!", over and over.

I solved it like this:

export default withAuth(
  function middleware(request: NextRequestWithAuth) {
    // ...
  },
  {
    callbacks: {
      authorized: ({ token, req }) => {
        // Always allow access to login page
        if (req.nextUrl.pathname.startsWith('/login')) return true
        return !!token
      },
    },
  }
)

... which basically just says "intercept all calls, just like you did before, excep calls to '/login', since you don't need to be logged in to go there".