Mikoshiba-Kyu
Mikoshiba-Kyu

Reputation: 23

Unable to Redirect After Credential Authentication on Custom Sign-In Page with NextAuth

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

Answers (0)

Related Questions