How can I submit to custom credentials? - reactjs

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

Answer 1

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>
);
}