‘m working on a Next.js application and have a login form that handles user sign-in. I use the redirect function from next/navigation for server-side redirection after a successful sign-in. However, I’m encountering the following error:
Sign-in error: Error: NEXT_REDIRECT
at getRedirectError (redirect.js:49:19)
at redirect (redirect.js:60:11)
at handleSignIn (cognitoActions.ts:87:13)
at async eval (login-form.tsx:38:34)
Here is my current code setup:
LoginForm component:
import React, { useTransition } from 'react'
import { Button } from '../button'
import { Input } from '../input'
import Link from 'next/link'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { TLoginSchema } from '@/lib/types/LoginSchema'
import { loginSchema } from '@/lib/schemas/login'
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { handleSignIn } from '@/lib/cognitoActions'
export default function LoginForm() {
const [pending, startTransition] = useTransition()
const form = useForm<TLoginSchema>({
resolver: zodResolver(loginSchema),
defaultValues: {
email: '',
password: '',
},
})
function onSubmit(values: TLoginSchema) {
startTransition(async () => {
try {
const response = await handleSignIn(undefined, values)
console.log('Sign-in response:', response)
} catch (error) {
console.error('Sign-in error:', error)
}
})
}
return (
<Form {...form}>
<form className='flex flex-col justify-between gap-8 min-w-[450px]' onSubmit={form.handleSubmit(onSubmit)}>
<h1>Chat Inmobiliario</h1>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input type='email' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormLabel>Contraseña</FormLabel>
<FormControl>
<Input type='password' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button size='lg' type='submit' disabled={pending}>
{pending ? 'Ingresando...' : 'Ingresar'}
</Button>
</form>
</Form>
)
}
handleSignIn function:
import { signUp, confirmSignUp, autoSignIn, resendSignUpCode, signIn, signOut } from 'aws-amplify/auth'
import { TLoginSchema } from './types/LoginSchema'
import { TSignUpSchema } from './types/SignUpSchema'
import { getErrorMessage } from '@/utils/get-error-message'
import { redirect } from 'next/navigation'
import { TConfirmSignupSchema } from './types/ConfirmSignupSchema'
export async function handleSignIn(prevState: string | undefined, formData: TLoginSchema) {
let redirectLink = '/dashboard'
try {
const { isSignedIn, nextStep } = await signIn({
username: String(formData.email),
password: String(formData.password),
})
if (nextStep.signInStep === 'CONFIRM_SIGN_UP') {
console.log(nextStep.signInStep)
await resendSignUpCode({
username: String(formData.email),
})
redirectLink = '/auth/confirm-signup'
}
} catch (error) {
return getErrorMessage(error)
}
console.log('Redirecting to:', redirectLink)
redirect(redirectLink)
}
Despite using redirect in a server-side context, I still encounter the NEXT_REDIRECT error. How can I correctly handle redirection on the server side without encountering this error? What am I doing wrong in my implementation?