**api/[...nextauth].js**

```
export default NextAuth({
providers: [
    Providers.Credentials({
    name: 'Credentials',
    credentials: {
        email: { label: 'E-mail', type: 'text', placeholder: 'me@gmail.com' },
        password: { label: 'Password', type: 'password', placeholder: 'my password' },
    },
    async authorize(credentials, req) {
        return { email: 'x', password: 'y'}
    },
    }),
]
});

```

**pages/auth/signin.tsx**

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

```

onSubmit redirects to the default sign in page `/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fsignin`, **instead of correctly signin in and redirecting to `/`. How to fix this?**

I am experiencing the same issue also with the custom sign form using `form` tag (<https://next-auth.js.org/configuration/pages#credentials-sign-in>)