How can I submit to custom credentials?

Question

Hello I have the following next auth configuration:

import NextAuth from "next-auth"
import CredentialsProvider from "next-auth/providers/credentials"

export default NextAuth({
  providers: [
    CredentialsProvider({
      name:'Login',
      credentials: {
        email: { label: "Email", type: "text" },
        password: {  label: "Password", type: "password" }
      },
      async authorize(credentials){
        try{
          const response = await fetch(`http://localhost:5001/auth/login`,{
            method: "POST",
            body: JSON.stringify(credentials),
            headers: {'Content-type': 'application/json'}
          })

          const token = (await response).json() 
          if (response.ok && token) {
            return token
          }
      } catch (error) {
        console.log(error)
      }
        return null
      }
    })
  ],
  
})

and I have the following page:

import { getProviders, signIn } from "next-auth/react"

export default function Singin({ providers:{credentials} }) {
  return (

    <form method="post" action={credentials.callbackUrl}>
      <label>
          Email address
        <input type="email" id="email" name="email" />
      </label>
      <label>
          Password
        <input type="password" id="password" name="password" />
      </label>
      <button type="submit">Sign in with Email</button>
    </form>

  
  )
}
  
export async function getServerSideProps(context) {
  const providers = await getProviders()
  return {
    props: { providers },
  }
}

I used credentials.callbackUrl in order to send the form data to the credentials but doesn't work and next-auth redirects to that page instead of make the auth.

How can I set this page?

Thanks

score 1 · Accepted Answer · answered Sep 20 '22 at 15:49

Try to call the signIn method and pass the credentials to it:

import { signIn } from 'next-auth/react';

export default function Singin() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    await signIn('creadentials', {
      email,
      password,
    });
  };

  return (
    <form method='post' onSubmit={handleSubmit}>
      <label>
        Email address
        <input
          type='email'
          id='email'
          name='email'
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </label>
      <label>
        Password
        <input
          type='password'
          id='password'
          name='password'
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      <button type='submit'>Sign in with Email</button>
    </form>
  );
}

I got the same result and I get a redirect to http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fsignin — Tlaloc-ES, Sep 20 '22 at 16:40
If you need to redirect to a custom URL you can set `redirect: false` and use the next router to push the path where you need the user to be redirected — lpizzinidev, Sep 21 '22 at 12:40

How can I submit to custom credentials?

1 Answers1