I'll create a complete solution for a device-based authentication system with OTP verification for new devices. This will include both the frontend components and the backend logic.

How This Solution Works

This implementation provides a complete device-based authentication system with OTP verification for new devices. Here's how it works:

1. Login Process:

   • User enters email and password in the login form
   • System checks if the device is recognized (via cookies)
   • If the device is not recognized, a 6-digit OTP is sent to the user's email

2. OTP Verification:

   • The OTP verification screen shows 6 input fields for the code
   • The code expires after 10 minutes (with a countdown timer)
   • User has 3 attempts to enter the correct code
   • User can choose to "Remember this device" to bypass OTP on future logins

3. Security Features:

   • After 3 failed attempts, the system blocks further attempts
   • User must request a new verification code
   • The OTP expires after 10 minutes
   • Device recognition is stored in HTTP-only cookies for security

4. User Experience:

   • Input fields auto-focus and auto-advance for easy code entry
   • Support for pasting the entire code at once
   • Clear error messages and attempt counters
   • Option to resend the code if needed

In a production environment, you would:

1. Replace the in-memory storage with a database
2. Implement a real email sending service
3. Add proper user authentication against your database
4. Consider adding rate limiting to prevent abuse

This implementation meets all the requirements specified in your request while providing a secure and user-friendly experience.