Question
During a multi-step authentication flow (Phone → OTP → Registration) in next 14, cookies are not persisting for new users, though they work correctly for existing users.
Specifically, when a new user completes OTP verification:
- Cookies (
phoneandloginToken) appear briefly in DevTools - These cookies vanish almost instantly
- The user cannot complete registration due to missing authentication
- This ONLY happens for new users requiring registration
- For existing users, cookies persist correctly
- Backend - Node.js
Current Implementation Using Server Action for OTP verification:
export async function verifyOtp( requestData: { // params },): Promise<any | undefined> { try { const response = await fetch(P_VERIFY_LOGIN_OTP, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(requestData), cache: 'no-store', });
const result = await response.json(); if (result) { cookies().set('phone', requestData.phone, { secure: true, httpOnly: true, sameSite: 'none', // tried lax too path: '/', maxAge: 60 * 60 * 24 * 15, }); cookies().set('loginToken', result.token, { secure: true, httpOnly: true, sameSite: 'none', // tried lax too path: '/', maxAge: 60 * 60 * 24 * 15, }); } return result; } catch (error) { console.error('Error:', error); return error; }}Frontend
Single Modal Component (Client Component) with 3 screens managed by useState
- Phone No Input
- Verify Phone
- Registration Form
What I've Tried
- Added proper cookie attributes (secure, httpOnly, sameSite, path, maxAge)
- Added delay after setting cookies
- Verified cookies are being set (visible momentarily in DevTools)
Questions
Why would cookies persist for existing users but vanish for new users? Is there a recommended pattern for handling authentication state during multi-step registration flows? Could this be related to how Next.js handles cookies during client-side navigation in the registration flow?
Any insights or suggestions would be greatly appreciated!
