Next.js Discord

Discord Forum

NEXT_REDIRECT error when using next-auth signIn

Answered
Gray Flycatcher posted this in #help-forum
Open in Discord
Gray FlycatcherOP
export const login = async (prevState, formData) => {
  const { username, password } = Object.fromEntries(formData);

  try {
    await signIn("credentials", { username, password });
  } catch (err) {
    console.log(err);

    if (err.message.includes("CredentialsSignin")) {
      return { error: "Invalid username or password" };
    }
    throw err;
  }
};

"use client";

import { login } from "@/lib/action";
import styles from "./loginForm.module.css";
import { useFormState } from "react-dom";
import Link from "next/link";

const LoginForm = () => {
  const [state, formAction] = useFormState(login, undefined);

  return (
    <form className={styles.form} action={formAction}>
      <input type="text" placeholder="username" name="username" />
      <input type="password" placeholder="password" name="password" />
      <button>Login</button>
      {state?.error}
      <Link href="/register">
        {"Don't have an account?"} <b>Register</b>
      </Link>
    </form>
  );
};

export default LoginForm;

const login = async (credentials) => {
  try {
    connectToDb();
    const user = await User.findOne({ username: credentials.username });

    if (!user) throw new Error("Wrong credentials!");

    const isPasswordCorrect = await bcrypt.compare(
      credentials.password,
      user.password
    );

    if (!isPasswordCorrect) throw new Error("Wrong credentials!");

    return user;
  } catch (err) {
    console.log(err);
    throw new Error("Failed to login!");
  }
};

export const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth({
  ...authConfig,
  providers: [
    CredentialsProvider({
      async authorize(credentials) {
        try {
          const user = await login(credentials);
          return user;
        } catch (err) {
          return null;
        }
      },
    }),
  ],
Answered by Double-striped Thick-knee
there is an isRedirectError function. use it inside catch block to detect if it was a redirect error, then redirect manually
View full answer

10 Replies

Gray FlycatcherOP
When the login gets called by the form, I get this error, but the error goes if I either put the signIn outside the try catch, or I tell it not to redirect. How can I make it redirect while still being in side a try catch, without this error happening? (The actual sign in is successful just the error happens and it doesnt redirect)
Error: NEXT_REDIRECT
    at getRedirectError (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:49:19)
    at redirect (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:60:11)
    at signIn (webpack-internal:///(rsc)/./node_modules/next-auth/lib/actions.js:63:89)
    at async login (webpack-internal:///(rsc)/./src/lib/action.js:154:9)
    at async C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:406
    at async t0 (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:38:5773)
    at async rh (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:23636)
    at async doRender (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\server\base-server.js:1391:30)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\server\base-server.js:1552:28)
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\server\base-server.js:1460:28)
    at async DevServer.renderPageComponent (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\server\base-server.js:1843:24)
    at async DevServer.renderToResponseImpl (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\server\base-server.js:1881:32)
    at async DevServer.pipeImpl (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14-tutorial\node_modules\next\dist\server\base-server.js:909:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\raffe\Documents\Coding\Freelance\untitled\next14
@Gray Flycatcher js export const login = async (prevState, formData) => { const { username, password } = Object.fromEntries(formData); try { await signIn("credentials", { username, password }); } catch (err) { console.log(err); if (err.message.includes("CredentialsSignin")) { return { error: "Invalid username or password" }; } throw err; } }; js "use client"; import { login } from "@/lib/action"; import styles from "./loginForm.module.css"; import { useFormState } from "react-dom"; import Link from "next/link"; const LoginForm = () => { const [state, formAction] = useFormState(login, undefined); return ( <form className={styles.form} action={formAction}> <input type="text" placeholder="username" name="username" /> <input type="password" placeholder="password" name="password" /> <button>Login</button> {state?.error} <Link href="/register"> {"Don't have an account?"} <b>Register</b> </Link> </form> ); }; export default LoginForm; js const login = async (credentials) => { try { connectToDb(); const user = await User.findOne({ username: credentials.username }); if (!user) throw new Error("Wrong credentials!"); const isPasswordCorrect = await bcrypt.compare( credentials.password, user.password ); if (!isPasswordCorrect) throw new Error("Wrong credentials!"); return user; } catch (err) { console.log(err); throw new Error("Failed to login!"); } }; export const { handlers: { GET, POST }, auth, signIn, signOut, } = NextAuth({ ...authConfig, providers: [ CredentialsProvider({ async authorize(credentials) { try { const user = await login(credentials); return user; } catch (err) { return null; } }, }), ],
Double-striped Thick-knee
there is an isRedirectError function. use it inside catch block to detect if it was a redirect error, then redirect manually
Answer
Gray FlycatcherOP
how do I redirect it manually?
inside the login call
@Gray Flycatcher how do I redirect it manually?
Double-striped Thick-knee
by using redirect("/path")
Gray FlycatcherOP
omfg
how didnt i realise that
thanks so much
Double-striped Thick-knee
No problem. mark solution if it's fixed