Broke Login & Locked Out 847 Users? Add Fields to Odoo 18 Login Page Safely

custom_login_otp/
├── __init__.py
├── __manifest__.py
├── models/
│   ├── __init__.py
│   └── res_users.py
├── controllers/
│   ├── __init__.py
│   └── main.py
├── views/
│   └── login_templates.xml
└── static/
    └── src/
        └── js/
            └── otp_login.js

from odoo import models, fields

class ResUsers(models.Model):
    _inherit = 'res.users'
    
    otp = fields.Char(
        string='OTP Code',
        help="One-Time Password for login authentication"
    )

import random
import math
from odoo import http
from odoo.http import request
from odoo.exceptions import AccessDenied
from odoo.addons.web.controllers.home import Home

class OTPLoginController(Home):
    
    def _generate_otp(self):
        """Generate a secure 6-digit numeric OTP."""
        digits = "0123456789"
        return ''.join(random.choice(digits) for _ in range(6))
    
    @http.route('/web/login/send_otp', type='json', auth='public')
    def send_otp(self, login, password, **kwargs):
        """Authenticate credentials and send OTP via email."""
        try:
            # Authenticate the user
            db = request.session.db
            uid = request.session.authenticate(db, login, password)
            
            if not uid:
                return {'success': False, 'error': 'Authentication Failed'}
            
            user = request.env['res.users'].browse(uid).sudo()
            
            # Generate and assign new OTP
            otp_code = self._generate_otp()
            user.write({'otp': otp_code})
            
            # Send OTP email
            template = request.env.ref('custom_login_otp.otp_email_template')
            template.sudo().send_mail(
                user.id,
                force_send=True,
                email_values={
                    'email_to': user.email,
                    'subject': f'{user.company_id.name}: Your Login OTP',
                }
            )
            
            # Logout session to force OTP login
            request.session.logout()
            
            return {'success': True}
            
        except AccessDenied:
            return {'success': False, 'error': 'Invalid login credentials'}
    
    @http.route('/web/login/verify_otp', type='json', auth='public')
    def verify_otp(self, login, otp, **kwargs):
        """Verify submitted OTP against stored value."""
        user = request.env['res.users'].sudo().search([('login', '=', login)])
        
        if user and user.otp == otp:
            # Clear OTP after successful use
            user.sudo().write({'otp': False})
            return {'success': True}
        
        return {'success': False, 'error': 'Invalid OTP'}

<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
    <template id="login_page_inherit" inherit_id="web.login">
        
        <!-- Add OTP field after password field -->
        <xpath expr="//div[hasclass('oe_login_buttons')]" position="before">
            <div class="form-group field-otp d-none" id="otp_field_container">
                <label for="otp">Enter OTP</label>
                <input 
                    type="text" 
                    name="otp" 
                    id="otp"
                    class="form-control" 
                    placeholder="6-digit code from email"
                    maxlength="6"
                    autocomplete="off"
                />
            </div>
        </xpath>
        
    </template>
</odoo>

/** @odoo-module **/

import publicWidget from '@web/legacy/js/public/public_widget';
import { jsonrpc } from '@web/core/network/rpc_service';

publicWidget.registry.OTPLogin = publicWidget.Widget.extend({
    selector: '.oe_login_form',
    events: {
        'click button[type="submit"]': '_onLoginSubmit',
    },

    _onLoginSubmit: function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
        
        const $form = this.$el;
        const login = $form.find('#login').val();
        const password = $form.find('#password').val();
        const otp = $form.find('#otp').val();
        
        // If OTP field visible, validate OTP
        if (!$form.find('#otp_field_container').hasClass('d-none')) {
            this._verifyOTP(login, otp, $form);
            return;
        }
        
        // Otherwise, send OTP first
        this._sendOTP(login, password, $form);
    },

    _sendOTP: function (login, password, $form) {
        const self = this;
        
        jsonrpc('/web/login/send_otp', {
            login: login,
            password: password,
        }).then(function (result) {
            if (result.success) {
                // Show OTP field
                $form.find('#otp_field_container').removeClass('d-none');
                $form.find('#otp').focus();
                self._clearError();
                
                // Show success message
                self._showSuccess('OTP sent to your email. Please check your inbox.');
            } else {
                self._showError(result.error || 'Authentication failed.');
            }
        }).catch(() => {
            self._showError('An error occurred while sending OTP.');
        });
    },

    _verifyOTP: function (login, otp, $form) {
        const self = this;
        
        jsonrpc('/web/login/verify_otp', {
            login: login,
            otp: otp,
        }).then(function (result) {
            if (result.success) {
                // Submit form to complete login
                $form.submit();
            } else {
                self._showError(result.error || 'Invalid OTP.');
                $form.find('#otp').val('').focus();
            }
        }).catch(() => {
            self._showError('An error occurred during OTP verification.');
        });
    },

    _showError: function (message) {
        this._clearMessages();
        this.$el.prepend(
            `

                ${message}
            
`
        );
    },

    _showSuccess: function (message) {
        this._clearMessages();
        this.$el.prepend(
            `

                ${message}
            
`
        );
    },

    _clearMessages: function () {
        this.$el.find('.alert').remove();
    },
    
    _clearError: function () {
        this._clearMessages();
    },
});

export default publicWidget.registry.OTPLogin;

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <data>
        <record id="otp_email_template" model="mail.template">
            <field name="name">Login OTP Email</field>
            <field name="model_id" ref="base.model_res_users"/>
            <field name="subject">{{ object.company_id.name }}: Your Login OTP</field>
            <field name="email_from">{{ object.company_id.email }}</field>
            <field name="email_to">{{ object.email }}</field>
            <field name="body_html" type="html">
<![CDATA[
<table border="0" cellpadding="0" cellspacing="0" style="padding-top: 16px; background-color: #F1F1F1; font-family:Verdana, Arial,sans-serif; color: #555; width: 100%">
    <tbody>
        <tr>
            <td align="center">
                <table border="0" cellpadding="0" cellspacing="0" width="590" style="padding: 24px; background-color: white; margin: 16px">
                    <tbody>
                        <tr>
                            <td style="font-size: 18px; font-weight: bold; padding-bottom: 16px;">
                                Login Verification Code
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 14px; padding-bottom: 16px;">
                                Hello {{ object.name }},
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 14px; padding-bottom: 16px;">
                                Your One-Time Password (OTP) for login is:
                            </td>
                        </tr>
                        <tr>
                            <td align="center" style="padding: 24px 0;">
                                <div style="background-color: #E10600; color: white; font-size: 32px; font-weight: bold; padding: 16px 32px; border-radius: 8px; letter-spacing: 8px;">
                                    {{ object.otp }}
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 14px; padding-bottom: 16px;">
                                This code will expire in 5 minutes for security purposes.
                            </td>
                        </tr>
                        <tr>
                            <td style="font-size: 12px; color: #888; padding-top: 16px; border-top: 1px solid #ddd;">
                                If you did not attempt to log in, please contact your system administrator immediately.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
]]>
            </field>
        </record>
    </data>
</odoo>

{
    'name': 'Custom Login OTP',
    'version': '18.0.1.0.0',
    'category': 'Authentication',
    'summary': 'Add OTP field to login page for two-factor authentication',
    'depends': ['base', 'web', 'mail'],
    'data': [
        'views/login_templates.xml',
        'data/email_template.xml',
    ],
    'assets': {
        'web.assets_frontend': [
            'custom_login_otp/static/src/js/otp_login.js',
        ],
    },
    'installable': True,
    'application': False,
    'auto_install': False,
}

from odoo import models, fields, api
from datetime import datetime, timedelta

class ResUsers(models.Model):
    _inherit = 'res.users'
    
    otp = fields.Char(string='OTP Code')
    otp_timestamp = fields.Datetime(string='OTP Generated At')
    
    def validate_otp(self, otp_code):
        """Validate OTP and check expiration (5 minutes)."""
        if not self.otp or not self.otp_timestamp:
            return False
        
        # Check if OTP matches
        if self.otp != otp_code:
            return False
        
        # Check if OTP expired (5 minutes)
        expiry_time = self.otp_timestamp + timedelta(minutes=5)
        if datetime.now() > expiry_time:
            # Clear expired OTP
            self.write({'otp': False, 'otp_timestamp': False})
            return False
        
        # OTP valid, clear it
        self.write({'otp': False, 'otp_timestamp': False})
        return True

from datetime import datetime

# In send_otp method, add timestamp:
user.write({
    'otp': otp_code,
    'otp_timestamp': datetime.now()
})

# In verify_otp method:
@http.route('/web/login/verify_otp', type='json', auth='public')
def verify_otp(self, login, otp, **kwargs):
    user = request.env['res.users'].sudo().search([('login', '=', login)])
    
    if user and user.validate_otp(otp):
        return {'success': True}
    
    return {'success': False, 'error': 'Invalid or expired OTP'}