Reputation: 23
I'm using NextAuth (v5). I have set up a form on the /signin page where users enter their email and password, then click the submit button to sign in.
The sign-in process itself works correctly, but I’m facing an issue where the user is not redirected after successful authentication.
Several "How-to" guides suggest specifying redirectTo in signIn or setting callbackUrl, but none of these approaches seem to work.
Where could the issue be?
import { AuthError } from 'next-auth'
import { Button } from '~/components/ui/button'
import { Input } from '~/components/ui/input'
import { Label } from '~/components/ui/label'
import { signIn } from '~/server/auth'
export const SigninForm = async () => {
return (
<form
action={async (formData) => {
'use server'
try {
// ① Sign-in succeeds, but redirection does not occur
await signIn('credentials', formData)
// ② Sign-in succeeds, but redirection does not occur
await signIn('credentials', {
email: formData.get('email'),
password: formData.get('password'),
redirectTo: '/dashboard',
})
// ③ Sign-in succeeds, but redirection does not occur
await signIn('credentials', {
email: formData.get('email'),
password: formData.get('password'),
callbackUrl: '/dashboard',
})
} catch (error) {
// TODO: Handle authentication error UI
if (error instanceof AuthError) {
console.log('error', error)
}
}
}}
className='flex flex-col items-center gap-8'
>
<div className='flex flex-col w-full max-w-sm items-center gap-2'>
<div className='grid w-full max-w-sm items-center gap-1.5'>
<Label htmlFor='email' className='text-xs'>
E-mail
</Label>
<Input type='email' name='email' id='email' placeholder='[email protected]' />
</div>
<div className='grid w-full max-w-sm items-center gap-1.5'>
<Label htmlFor='password' className='text-xs'>
Password
</Label>
<Input type='password' name='password' id='password' />
</div>
</div>
<Button type='submit' className='grid w-full max-w-sm items-center'>
Submit
</Button>
</form>
)
}
Upvotes: 1
Views: 22