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?

[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;
  // }
}

[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

[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?