I’m triying to authenticate through the production build of my project. However, I found out that there’s an issue with redirect()
.
I initially though it was a server error on my ExpressJS backend but I checked the logs and the POST request is succesful, however, the front end is not setting up cookies as it should and thus redirect fails.
import {
fetchurl,
setAuthTokenOnServer,
setUserOnServer,
} from '@/helpers/setTokenOnServer'
import { redirect } from 'next/navigation'
import FormButtons from '@/components/global/formbuttons'
const Login = async ({ params, searchParams }) => {
const loginAccount = async (formData) => {
'use server'
const rawFormData = {
email: formData.get('email'),
password: formData.get('password')
}
const res = await fetchurl(`/auth/login`, 'POST', 'no-cache', rawFormData);
if (res?.data) {
redirect(`/auth/validatetwofactorauth/${res?.data?._id}`)
}
// If not success, stop
if (!res?.success) return;
await setAuthTokenOnServer(res?.token); // Sets auth cookies on server
const loadUser = await fetchurl(`/auth/me`, 'GET', 'no-cache'); // loads user based on auth
await setUserOnServer(loadUser?.data); // then sets some user's values into cookies
searchParams?.returnpage ? redirect(searchParams.returnpage) : redirect(`/auth/profile`);
}
return (
<form action={loginAccount}>
<label htmlFor="email" className="form-label">
Email
</label>
<input
id="email"
name="email"
type="email"
className="form-control mb-3"
placeholder="[email protected]"
/>
<label htmlFor="password" className="form-label">
Password
</label>
<input
id="password"
name="password"
type="password"
className="form-control mb-3"
placeholder="******"
/>
<br />
<FormButtons />
</form>
)
}
export default Login
Anyone has dealt with this before? I’d like to keep the page in the server side as much as possible.
Click here to see local vs production build examples
Thanks in advance!.