Error: NEXT_REDIRECT

[Sevansi]

using next-auth": "^5.0.0-beta.4.

The problem is the error "NEXT_REDIRECT" it occurs every time I try to wrap methods singIn, singOut in a try catch block, in this case login happens, data is written to the session, but redirection does not happen. After refreshing the page my middleware redirects normally, and the data is there, I try to exit through signOut which is wrapped in try catch, again the exit occurs normally, but no redirection occurs.

CODE

auth.js

export const {
	signIn,
	signOut,
	auth
} = NextAuth({
	...authConfig,
	providers: [
		CredentialsProvider({
			async authorize(credentials) {
				try {
					const user = {username: 'test', email: 'test'}
					return user;
				} catch (err) {
					console.log('authorize error:', err)
					return null;
				}
			},
		}),
	],
	callbacks: {
		async jwt({ token, user }) {
			if (user) {
				token.username = user.username;
				token.img = user.img;
			}
			return token;
		},
		async session({ session, token }) {
			if (token) {
				session.user.username = token.username;
				session.user.img = token.img;
			}
			return session;
		},
	},
});

authconfig.js

export const authConfig = {
	providers: [],
	pages: {
		signIn: "/login",
	},
	callbacks: {
		async authorized({ auth, request }) {
			console.log('============================================');
			const isLoggedIn = auth?.user;
			const isOnDashboard = request.nextUrl.pathname.startsWith("/dashboard");
			console.log('auth:', auth, 'isLoggedIn', isLoggedIn, 'isOnDashboard', isOnDashboard)
			if (isOnDashboard) {
				if (isLoggedIn) return true;
				return false;
			} else if (isLoggedIn) {
				return Response.redirect(new URL("/dashboard", request.nextUrl));
			}
			return true;
		},
	},
};

This is the basic structure, here's how I try to use it in LoginForm

import styles from "./loginForm.module.css";
import { signIn } from "@/app/auth";

const LoginForm = () => {
	return (
		<form action={async (formData) => {
			"use server"
			try {
				await signIn("credentials", formData);
			}
			catch (e) {
				console.log(e);
			}
		}} className={styles.form}>
			<h1>Login</h1>
			<input type="text" placeholder="username" name="username" />
			<input type="password" placeholder="password" name="password" />
			<button>Login</button>
		</form>
	);
};

export default LoginForm;

And in this case if I use try catch I get an error.

Full error

Error: NEXT_REDIRECT
    at getRedirectError (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:44:19)
    at redirect (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:54:11)
    at signIn (webpack-internal:///(rsc)/./node_modules/next-auth/lib/actions.js:62:89)
    at async $$ACTION_1 (webpack-internal:///(rsc)/./app/ui/login/loginForm/loginForm.jsx:69:9)
    at async D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:489
    at async tX (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:37:5313)
    at async rl (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:23339)
    at async doRender (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\server\base-server.js:1406:30)
    at async cacheEntry.responseCache.get.routeKind (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\server\base-server.js:1567:28)
    at async DevServer.renderToResponseWithComponentsImpl (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\server\base-server.js:1475:28)
    at async DevServer.renderPageComponent (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\server\base-server.js:1852:24)
    at async DevServer.renderToResponseImpl (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\server\base-server.js:1890:32)
    at async DevServer.pipeImpl (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\server\base-server.js:902:25)
    at async NextNodeServer.handleCatchallRenderRequest (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\server\next-server.js:266:17)
    at async DevServer.handleRequestImpl (D:\Person\Edvard\Desktop\nextadmin\node_modules\next\dist\server\base-server.js:798:17) {
  digest: 'NEXT_REDIRECT;replace;http://localhost:3000/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fdashboard;false',
  mutableCookies: p {
    _parsed: Map(6) {
      'next-auth.csrf-token' => [Object],
      'authjs.csrf-token' => [Object],
      'next-auth.callback-url' => [Object],
      'next-auth.session-token' => [Object],
      'authjs.callback-url' => [Object],
      'authjs.session-token' => [Object]
    },
    _headers: HeadersList {
      cookies: [Array],
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    }
  }
}

[ziquanc]

I noticed that the catch block in your form's action async function is currently logging the error to the console but not re-throwing it. This could be causing the issue you're encountering.

Try to add "throw e" in catch.

			"use server"
			try {
				await signIn("credentials", formData);
			}
			catch (e) {
				console.log(e);
throw e; <-- ADD THIS
			}
		}} className={styles.form}>

[Sevansi]

Thank you very much! I've been trying to solve this for a long time and couldn't figure it out, I didn't even think to try adding trow. And the solution turned out to be simple :)

[taylor-lindores-reeves]

EDIT - I figured out a solution, add the following code to the catch block in the authenticate action:

import { isRedirectError } from "next/dist/client/components/redirect";

if (isRedirectError(error)) {
    throw error;
}

I am slightly confused why it's necessary to throw e; when I want to be able to send messages back to the client:

// action.ts

"use server";

import { AuthError } from "@auth/core/errors";
import { signIn } from "@motors.bid/auth";

export async function authenticate(
	prevState: string | undefined,
	formData: FormData,
) {
	try {
		const success = await signIn("credentials", formData);
		console.log({ prevState, success });
		return undefined;
	} catch (error) {
		console.log({ error });
		if (error instanceof Error) {
			const { type, cause } = error as AuthError;
			switch (type) {
				case "CredentialsSignin":
					return "Invalid credentials.";
				case "CallbackRouteError":
					return cause?.err?.toString();
				default:
					return "Something went wrong.";
			}
		}

		throw error;
	}
}

// sign-in-form.tsx

function SignInForm() {
	const [error, formAction] = useFormState(authenticate, undefined);
	const params = useSearchParams();
	const hasAlert = params.get("alert") === "true";

	const form = useForm<Inputs>({
		resolver: zodResolver(SignInUserSchema),
		defaultValues: {
			email: "",
			password: "",
			stay_signed_in: false,
		},
	});

	useEffect(() => {
		if (error) {
			toast({
				title: "Sign in error",
				description: error,
				variant: "error",
			});
		}
	}, [error]);

        return (
             // rest of code
        )
};

[Sevansi]

Yes, I agree, initially I did not pay attention to the fact that you can't show an error to the user with 'throw', so your option with 'isRedirectError' will be the best solution! Thank you!

[Vardhan1342]

using "next-auth": "^5.0.0-beta.5",

I made updates to my sign-in method by introducing a 'throw' statement for error handling. Despite these changes, the error still persists. When I check the console for errors, it shows up, but interestingly, it redirects me to the dashboard page.

error is:
digest: 'NEXT_REDIRECT;replace;http://localhost:3000/;303;',
mutableCookies: p {
_parsed: Map(3) {
'authjs.csrf-token' => [Object],
'authjs.callback-url' => [Object],
'authjs.session-token' => [Object]
},
_headers: HeadersList {
cookies: [Array],
[Symbol(headers map)]: [Map],
[Symbol(headers map sorted)]: null
}
}
}

sign method ===============
try{
console.log("before");
const res= await signIn("credentials", {
email: formData.email,
password: formData.password,
redirectTo:"/"
});
console.log("result is ",res);
console.log();
}
catch(error){
console.log(error)
throw error;
}

[Sevansi]

It's possible they fixed something in the 5th beta version; I used the 4th. Although I watched many videos and looked at other projects on GitHub, they didn't have this problem. But when I duplicated their code, I encountered a redirection issue. I'm not sure what it's related to. However, the previous answer with isRedirectError(error) helped me, ensuring everything goes smoothly without errors and handles the redirections.
We need to check the beta.5 version; maybe it was a bug in that version, after all, it's still in beta :)

[Jee-on]

@Vardhan1342

try {
    await signOut({ redirect: false })

  } catch (err) {
    if (isRedirectError(err)) {
      console.error(err);
      throw err;
    }
  } finally {
    redirect( YOUR_URL );
  }

Try setting the default redirect of the signIn or signOut method to false
and setting redirect code in finally block. I solved it this way.
This problem seems to occurs when the redirect is inside try{}catch{}.

[aviyadeveloper]

This is crazy. What's the point of having the framework + auth library when such simple stuff don't work built-in?

[maxpaleo]

I've been working with Next Auth for over a week. I have never been more frustrated with a library in my entire life. It's the absolute worst library every created, with the worst possible docs. It's insane how nobody has taken the time to create a better alternative.

[kavinask007]

Agreed

[juttameerhamza]

This library is literally is a garbage.

[SantiagoGaonaC]

In my case I removed the try catch and let me redirect to redirectTo: '/test'.

/* eslint-disable import/no-extraneous-dependencies */

'use server';

import { signIn } from '@/auth';

export async function sendUhOidAction(
  prevState: {
    message: string;
  },
  email: string,
) {
  // try {
  await signIn('credentials', {
    email,
    redirectTo: '/test',
  });
  //   return undefined;
  // } catch (error) {
  //   console.log({ error });
  //   if (error instanceof Error) {
  //     const { type, cause } = error as AuthError;
  //     switch (type) {
  //       case 'CredentialsSignin':
  //         return 'Invalid credentials.';
  //       case 'CallbackRouteError':
  //         return cause?.err?.toString();
  //       default:
  //         return 'Something went wrong.';
  //     }
  //   }

  //   throw error;
  // }
}

[LMarcinkowski]

redirectTo helps, but there still is an error.

[lorenzobrito]

thanks a lot, how did you figure out ? and why it happens?

[hoseinABH]

After hours of struggling I found a solution:
I added the below code to the catch block:
if (isRedirectError(error)) { throw error; }

[andresgutgon]

Hi, still failing for me

import { Button, Input, Label } from '$ui'
import { SigninHeader } from '$/app/signin/layout'
import { signIn } from '$/auth'
import { PageProps } from '$/lib/types'
import { isRedirectError } from 'next/dist/client/components/redirect'

export default async function SignInPage(props: PageProps<'', 'callbackUrl'>) {
  const callbackUrl = String(props.searchParams.callbackUrl ?? '/')
  return (
    <>
      <SigninHeader
        title='Access your books'
        description='Enter your email below to see your books.'
      />
      <form
        action={async (formData) => {
          'use server'
          try {
            await signIn('nodemailer', {
              callbackUrl,
              email: formData.get('email')?.toString()!,
            })
          } catch (error) {
            if (isRedirectError(error)) {
              console.log('FUCK!: ', error)
              throw error
            }
          }
        }}
      >
        <div className='grid gap-2'>
          <div className='grid gap-1'>
            <Label className='sr-only' htmlFor='email'>
              Email
            </Label>
            <Input
              autoFocus
              required
              id='email'
              name='email'
              placeholder='Your email address'
              type='email'
              autoCapitalize='none'
              autoComplete='email'
              autoCorrect='off'
            />
          </div>
          <Button>Sign In with Email</Button>
        </div>
      </form>
    </>
  )
}

Debugging

Debugging the code I think signIn method is this one in next-auth package

https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/lib/actions.ts#L76

That gets the URL from @auth/core here
https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/index.ts#L192

If I put a log in @auth/core
I see the right error URL

[auth][debug]: Error in Auth "Redirecting to http://localhost:3003/api/auth/error?error=Configuration and isRedirect=false"

But then here

if (shouldRedirect) return redirect(res.redirect!)

res.redirect is `undefined

Which makes sense with what I see in the logs

The docs for custom signin page could be improved covering error handling

[Saiguna7]

u didn't write finally and didn't redirect to ur auth page

[andresgutgon]

I can confirm. If I hack this line with a hardcoded URL it redirects to the error page

- if (shouldRedirect) return redirect(res.redirect!)
+ if (shouldRedirect) {  
+   return redirect('http://localhost:3003/api/auth/error?error=Configuration');
+ }

Now the question is why response.redirect is undefined? What I'm doing wrong?

[andresgutgon]

I made a PR that I think it fix at least some cases when the error is of type Configuration for example:
#11010

[obasekiosa]

redirects in nextjs are done with the use of errors so you'd need to re-throw the error if its a redirect error so nextjs can perform the redirect(add the headers/status codes).

Another common issue could be forgetting to await signIn within the action, if you don't await the error might be thrown after the action has returned.

you need the try catch to catch and handle other non redirect errors like auth errors.

typically you'd choose to handle all errors specific errors then the last should be redirect error which you'd just throw

but i simply use this hack

function isRedirectError(error: Error & {digest?: string}) {
    return !!error.digest?.startsWith("NEXT_REDIRECT")
}

try {
    await signIn("credentials", formData);
} catch (error) {
    if (isRedirectError(error)) throw error;
    ...
}

placing this in the outer comment, just in case

[andresgutgon]

It shouldn't be necessary. Any error not of type AuthError is handled by next-auth and next. I changed the docs to explain it a bit. Let's see if it's the right idea.
https://github.com/nextauthjs/next-auth/pull/11010/files#diff-0e36b273e1c3a044a29019975e6eb57d2bc4111b44f8012e6938a21d74015f4eR111

[obasekiosa]

@andresgutgon
Thanks for the update. It doesn't seem to have made it into main yet.

it would be necessary seeing as signIn can throw other errors (some might be custom), being able to tell which error it is
might be the first thing most people think about when solving their problem (as seen in this thread).

Might also want to do something else in the case of redirect even if its not the best place to do it.
IMO Its better to let developers develop and engineers engineer.

[jaggerharness]

I came across this thread because I encountered what I initially thought was a similar issue when implementing credentials flow. This is my first time working with NextAuth and it turns out I missed the part in the doc that specifies that you need to explicitly set your session strategy to jwt:

session: {
    strategy: 'jwt'
},

Hopefully this will help someone else who runs into the same problem!

[OzeroDev]

Thank you so much, this solved the error for me. I can't find where in docs it specifies to explicitly set session strategy, where did you find that?

[jaggerharness]

I actually don't recall seeing it in the latest documentation. I believe I stumbled across it either in the FAQ or the credentials section from the NextAuth (v4) documentation.

Here
And here

If it's not stated in this latest documentation, maybe that's something that we could suggest to add in. Might be helpful for newer users

[Kamahl19]

Strategy is by default 'jwt' when no adapter is specified

next-auth/packages/core/src/lib/init.ts

Line 121 in d38fdef

strategy: authOptions.adapter ? "database" : "jwt",

[damianlluch]

Hello! I have the same error

this is my code

'use client';

import { useState, FormEvent } from 'react';
import * as yup from 'yup';
import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
import { useFormState, useFormStatus } from 'react-dom';
import { Button, Input, Alert } from 'react-daisyui';
import { authenticate } from '../lib/actions';
import Image from 'next/image';
import '../login.css';

const validationSchema = yup.object().shape({
  username: yup
    .string()
    .email('Invalid email format')
    .required('Email is required'),
  password: yup
    .string()
    .min(6, 'Password must be at least 6 characters')
    .required('Password is required'),
});

export default function LoginForm() {
  const [state, dispatch] = useFormState(authenticate, {
    errors: {},
    message: '',
  });

  const [errors, setErrors] = useState<{ [key: string]: string }>({});

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const values = {
      username: formData.get('username') as string,
      password: formData.get('password') as string,
    };

    try {
      await validationSchema.validate(values, { abortEarly: false });
      dispatch(formData);
    } catch (validationErrors: unknown) {
      if (validationErrors instanceof yup.ValidationError) {
        const formErrors = validationErrors.inner.reduce(
          (acc: { [key: string]: string }, error) => {
            acc[error.path!] = error.message;
            return acc;
          },
          {}
        );
        setErrors(formErrors);
      }
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-3">
      <div className="login-card">
        <div className="text-center">
          <h1 className="text-3xl font-bold mb-6">Bienvenidos</h1>
          <div className="mb-6 flex justify-center">
            <Image src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/logo.png`} alt="Logo" width={100} height={100}  />
          </div>  
        </div>
        <div className="mt-1 relative rounded-md shadow-sm">
          <label
            htmlFor="username"
            className="block text-sm font-medium text-gray-700"
          >
            Email
          </label>
          <div className="mt-1 relative rounded-md shadow-sm">
            <Input
              type="text"
              name="username"
              id="username"
              className="login-input"
              placeholder="Ingrese su nombre de usuario"
              required
            />
            {errors.username && (
              <Alert className="mt-2" color="error">
                <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
                <span>{errors.username}</span>
              </Alert>
            )}
          </div>
        </div>
        <div className="mt-4">
          <label
            htmlFor="password"
            className="block text-sm font-medium text-gray-700"
          >
            Password
          </label>
          <div className="mt-1 relative rounded-md shadow-sm">
            <Input
              type="password"
              name="password"
              id="password"
              className="login-input"
              placeholder="Ingrese su contraseña"
              required
              minLength={6}
            />
            {errors.password && (
              <Alert className="mt-2" color="error">
                <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
                <span>{errors.password}</span>
              </Alert>
            )}
          </div>
        </div>
        <div className="mt-6">
          <LoginButton />
        </div>
        {state.errors.credentials && (
          <Alert className="mt-4" color="error">
            <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
            <span>{state.message}</span>
          </Alert>
        )}
      </div>
    </form>
  );
}

function LoginButton() {
  const { pending } = useFormStatus();

  return (
    <Button className="w-full bg-black text-white" aria-disabled={pending}>
      Iniciar sesión
    </Button>
  );
}

'use server';

import { AuthError } from 'next-auth';
import { signIn } from '@/auth';

export async function authenticate(prevState: any, formData: FormData) {
  try {
    await signIn('credentials', Object.fromEntries(formData));
    return {
      message: 'success',
      errors: {},
    };
  } catch (error) {
    if (error instanceof AuthError) {
      return {
        message: 'Las credenciales ingresadas son incorrectas',
        errors: {
          credentials: 'incorrect email or password',
        },
      };
    }
    throw error;
  }
}

Any suggestions?

Thanks!

[dir]

Hey guys, I found a slight optimization to the homemade isRedirectError solution that feels a bit less tacky.

Next.js actually exposes a native "isRedirectError" function to check for this already, probably better to use for future breaking changes as well.

Here's a basic working example:

"use server";

import { signIn } from "~/auth";
import { isRedirectError } from "next/dist/client/components/redirect";

export default async function signInUser() {
  try {
    await signIn();
  } catch (error: unknown) {
    if (isRedirectError(error)) throw error;

    // continue to handle other errors as normal
  }
}

[muhammetaydinn]

Issue Title: Form Submission Issue Resolved by Removing Redirect Code

Description:

I encountered an issue with form submission where the form was not behaving as expected. The problem was resolved by removing the redirect code within the onSubmit handler.

Solution:

Removing the following code resolved the issue:

// if (result?.status === 200) {
//   router.push("/");
// }

[yangjiang3973]

redirect() shouldn't be called in a try...catch... block.

If you read the source code of nextjs, about redirect function: https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/redirect.ts#L49

It throws getRedirectError directly.

The signIn function of Authjs uses this redirect function of nextjs, so you need to put it outside of try...catch...

[RobinS-31]

Using next: 14.2.8 & next-auth: ^5.0.0-beta.20

I had the same error and after trying some of the proposed solutions I solved my problem by adding “redirect: false” in the options of the “signIn” method and since then I no longer have the error.

Here's the code:

./src/configs/auth.ts

import NextAuth from 'next-auth';
import credentials from 'next-auth/providers/credentials';
import bcrypt from 'bcrypt';
import { connectDB } from '@/configs/mongodb';
import User from '@/models/schemas/user';
import { IUserDocument } from '@/models/interfaces/documents';

export const { handlers, signIn, signOut, auth } = NextAuth({
    providers: [
        credentials({
            name: "Credentials",
            id: "credentials",
            credentials: {
                email: { label: "Email", type: "text" },
                password: { label: "Password", type: "password" },
            },
            async authorize(credentials) {
                await connectDB();

                const user = await User.findOne<IUserDocument>({
                    email: credentials?.email,
                }).select("+password");
                if (!user) throw new Error("Wrong Email");

                const passwordMatch = await bcrypt.compare(
                    credentials!.password as string,
                    user.password
                );
                if (!passwordMatch) throw new Error("Wrong Password");

                return user;
            },
        }),
    ],
    session: {
        strategy: "jwt",
    },
});

./src/actions/authenticate.ts

'use server';

import { signIn } from '@/configs/auth';
import { AuthError } from 'next-auth';

export const authenticate = async (formData: FormData) => {
    try {
        await signIn("credentials", {
            email: formData.get("email"),
            password: formData.get("password"),
            redirect: false
        });

        return { ok: true };
    } catch (error) {
        if (error instanceof AuthError) {
            switch (error.type) {
                case 'CredentialsSignin':
                    return {
                        error: true,
                        message: 'Invalid email or password.'
                    };
                default:
                    return {
                        error: true,
                        message: error.message
                    };
            }
        }
        throw error;
    }
};

./src/components/login/index.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { authenticate } from '@/actions/authenticate';

const Login = () => {
    const [error, setError] = useState("");
    const router = useRouter();

    const handleSubmit = async (formData: FormData) => {
        const res = await authenticate(formData);

        if (res?.error) {
            setError(res?.message as string);
        }
        if (res?.ok) {
            return router.push("/dashboard");
        }
    };

    return (
        <section className="w-full flex items-center justify-center">
            <form
                className="p-6 w-full max-w-[400px] flex flex-col justify-between items-center gap-2 border border-solid border-black bg-white rounded"
                action={handleSubmit}>
    [...]
    );
};

export default Login;

./src/app/login/page.tsx

import Login from '@/components/login';

export default function LoginPage() {
    return <Login />;
};

[remithomas]

I got the same error, however I fixed it with this code:

// ... server actions
try {
    await signIn('credentials', {
      email: formData.get('email'),
      password: formData.get('password'),
      redirect: true,
      redirectTo,
    });
  } catch (error) {
    if (isRedirectError(error)) {
      console.error('Redirect error!: ', error);
      throw error;
    }

    redirect(`/login?error=credentials`);
  }

[Saiguna7]

try {
    await signIn('credentials', {
      email: formData.get('email'),
      password: formData.get('password'),
    });
  } catch (error) {
    if (isRedirectError(error)) {
      console.error('Redirect error!: ', error);
      throw error;
    }

    redirect(`/dashboard');
    //not error lol 
// bro just redirect to what u want to redirect which auth page
  }

now do it