Next Auth "Credentials" redirection when throwing error on custom login page

Question

I have a custom login page, which in turn calls the signIn() function when submitting the form.
I am only using the "Credentials" provider.

Server-side, I am just trying to throw an error so I can handle it on the frontend. Seems like something that would be easy.

I continue to get an error that states:
Error: HTTP GET is not supported for /api/auth/login?callbackUrl=http://localhost:4000/login

The url I get redirected to is:
http://localhost:4000/api/auth/login?callbackUrl=http://localhost:4000/login

Here is my code: pages/login.js (only relevant code. Rest is just layout.)

<form
    method="post"
    onSubmit={() =>
        signIn("credentials", {
            email: "test",
            password: "test",
        })
    }
>
    <label>
        Username
        <input type="email" />
    </label>
    <label>
        Password
        <input name="password" type="password" />
    </label>
    <button type="submit">Sign In</button>
</form>

pages/api/auth/[...nextauth.js]

import NextAuth from "next-auth";
import Providers from "next-auth/providers";

const options = {
    site: process.env.NEXTAUTH_URL,
    providers: [
        Providers.Credentials({
            id: "chatter",
            name: "Credentials",
            type: "credentials",
            credentials: {
                email: { label: "Email", type: "email", placeholder: "email@domain.com" },
                password: { label: "Password", type: "password" },
            },
            authorize: async credentials => {
                console.log("credentials:", credentials);
                throw new Error("error message"); // Redirect to error page
            },
        }),
    ],
    pages: {
        signIn: "login",
        newUser: null,
    },
};

export default (req, res) => NextAuth(req, res, options);

don't throw error in `authorize`. Either return null or true — A.Anvarbekov, Feb 17 '22 at 10:34
It is actually fine to throw errors in `authorize` (might not be in the related legacy version?). It's probably required if you want to know what went wrong (was it the password? Is the email not yet confirmed?). It just doesn't seem to work with 'callbackUrl' (see @Ali Havasi's response). — HynekS, Feb 24 '23 at 13:19
This might be to do with the fact that "login" takes the relative route, try using "/login" in the pages object — Salim, May 19 '23 at 20:13

Mossen · Answer 1 · 2021-04-01T02:55:39.280

5

You can use something like this:

signIn("credentials", {
     redirect: false, 
     email: "test",
     password: "test",
   })
   .then((error) => console.log(error))
   .catch((error) => console.log(error));

edited Apr 01 '21 at 02:55

answered Apr 01 '21 at 02:29

Mossen

574
5
17

score 5 · Answer 2 · answered May 03 '22 at 10:47

This answer helped me solve my issue:
https://stackoverflow.com/a/70760933/11113465

If you set redirect to false, the signIn method will return a promise of the following format:

{
    error: string | undefined // Error code based on the type of error
    status: number // HTTP status code
    ok: boolean // `true` if the signin was successful
    url: string | null // `null` if there was an error
}

And then you can handle the error as you like:

    const { error } = await signIn('credentials', {
          phone_number: phoneNumber,
          verification_code: code.toString(),
          redirect: false,
    });

    if (error) {
          // handle error
    } else {
          router.push(callbackUrl);
    }

score 3 · Answer 3 · answered Jul 30 '21 at 21:05

3

Do you check [...nextauth].js in pages/api/auth?

I had same issue, but I can fix [...nextauth].js move 'pages/api' to 'pages/api/auth'.

answered Jul 30 '21 at 21:05

sungmin yim

31
3

Next Auth "Credentials" redirection when throwing error on custom login page

3 Answers3