Custom sign in page not redirecting correctly

[CLacaileSSG]

Question 💬

Hi,

I am having trouble with setting up my custom login page for the credentials provider. When I sign in, I am redirected to the URL http://localhost:3000/auth/login?callbackUrl=http://localhost:3000/auth/login.

I am using next-auth 4.0.0-beta.4 with next 11.0.0. I have both .env and .env.local files that contain the key/value NEXTAUTH_URL=http://localhost:3000.

I know that the documentation states that the <form> object should use method and action attributes instaed of using the onSubmit attribute, but I want to be able to use the onSubmit because I will need to extract the <form> into an other custom component <Form> to which I will be passing a handleSubmit function.

My goal is to construct a Login page like so :

# /pages/auth/login
const LoginForm = ({ csrfToken }) => {
  const onSubmitHandler = async ({ email, password, csrfToken }) => {
    await signIn('Credentials', {
      email, password, redirect: false, callbackUrl: `${window.location.origin}/`,
    });
  };
  return (
    <Form onSubmit={onSubmitHandler}>
      {/* Mandatory hidden input required by next-auth */}
      <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
      <EmailInput name="email" autoFocus />
      <PasswordInput name="password" />
      <SubmitButton text="Se connecter" />
    </Form>
  );
};

export default LoginForm;

export async function getServerSideProps(context) {
  return {
    props: {
      csrfToken: await getCsrfToken(context);
    },
  };
}

To investigate, I tried to build a simpler login component using only the form (see code snippet bellow) but it does not work. It seems to be the signIn function that does not work correctly.

How can I fix the problem? Or what am I getting wrong here?

Thank you very much for your help.

Best regards

How to reproduce ☕️

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

import NextAuth from 'next-auth';
import Credentials from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    Credentials({
      name: 'Credentials',
      credentials: {
        username: { label: 'Adresse email', type: 'email' },
        password: { label: 'Mot de passe', type: 'password' },
      },
      async authorize(credentials, req) {
        console.log(credentials);
        const user = { id: 1, name: 'Jean Dupont', email: 'jean.dupont@yopmail.com' };

        if (user) {
        // Any object returned will be saved in `user` property of the JWT
          return user;
        }
        // If you return null or false then the credentials will be rejected
        return null;
        // You can also Reject this callback with an Error or with a URL:
        // throw new Error('error message') // Redirect to error page
        // throw '/path/to/redirect'        // Redirect to a URL
      },
    }),
  ],
  pages: {
    signIn: '/auth/login',
  },
});

/pages/auth/login.js:

export default function SignIn() {
const [password, setPassword] = useState(null)
const [email, setEmail] = useState(null)

const onSubmit = () => {
    signIn("Credentials", { email, password })
}

return (
    <div>
    <label>
        Email
        <input name="email" type="text" onChange={e => setEmail(e.target.value)} />
    </label>
    <label>
        Password
        <input name="password" type="password"  onChange={e => setPassword(e.target.value)} />
    </label>
    <button type="submit" onClick={onSubmit}>Sign in!</button>
    </div>
)
}

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[CLacaileSSG]

I found the solution, but I think the documentation is misleading.

What I did is add an id property to my [...nextauth].js provider :

import Credentials from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    Credentials({
      id: 'credentials',
      name: 'Credentials',
      credentials: {
        username: { label: 'Adresse email', type: 'email' },
        password: { label: 'Mot de passe', type: 'password' },
      },
      async authorize(credentials, req) {
        console.log(credentials);
        const user = { id: 1, name: 'Jean Dupont', email: 'jean.dupont@yopmail.com' };

        if (user.id === 1) {
        // Any object returned will be saved in `user` property of the JWT
          return user;
        }
        // If you return null or false then the credentials will be rejected
        return null;
        // You can also Reject this callback with an Error or with a URL:
        // throw new Error('error message') // Redirect to error page
        // throw '/path/to/redirect'        // Redirect to a URL
      },
    }),
  ],
  pages: {
    signIn: '/auth/login',
  },
});

I then called the signIn function as before, replacing the name argument with the id and route to '/' as initially desired

// ...
await signIn('credentials', { email, password, callbackUrl: `${window.location.origin}/` });
// ...

The problem is that the documentation does not mention the use of the id attribute in the provider. It is only mentioned in the multiple providers example code : https://next-auth.js.org/providers/credentials#multiple-providers and there is also nothing in the credentials provider configuration page : https://next-auth.js.org/configuration/providers/credentials-provider.

[zomars]

You saved my life dude, thank you!

[bdekonin]

Thanks dude!! I was stuck on this for ages lol

[aditya-gune]

@CLacaileSSG I stumbled on this thread 2 years later facing the same problem and your answer solved it for me too...thank you so much!!