Custom sign in page not redirecting correctly #2955
-
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 I know that the documentation states that the 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 |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
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. |
Beta Was this translation helpful? Give feedback.
-
@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!! |
Beta Was this translation helpful? Give feedback.
I found the solution, but I think the documentation is misleading.
What I did is add an id property to my [...nextauth].js provider :