Losing $4.45M to Breaches? Add OTP to Odoo 18 Login Page

login_otp_auth/
├── __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
└── security/
    └── ir.model.access.csv (if needed)

from . import models
from . import controllers

{
    'name': 'Login OTP Authentication',
    'version': '18.0.1.0.0',
    'category': 'Authentication',
    'summary': 'Add OTP field to login page for two-factor authentication',
    'description': """
        Enhances Odoo login security by adding One-Time Password (OTP) 
        verification. Users receive a 6-digit code via email after entering 
        valid credentials, adding an extra layer of protection.
    """,
    'author': 'Your Company',
    'website': 'https://yourcompany.com',
    'depends': ['base', 'web', 'mail'],
    'data': [
        'views/login_templates.xml',
    ],
    'assets': {
        'web.assets_frontend': [
            'login_otp_auth/static/src/js/otp_login.js',
        ],
    },
    'installable': True,
    'application': False,
    'auto_install': False,
    'license': 'LGPL-3',
}

from . import res_users

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. Auto-cleared after successful use.',
        copy=False
    )

from . import main

import random
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):
    """Controller for OTP-based login authentication."""
    
    def _generate_otp(self):
        """Generate a secure 6-digit numeric OTP."""
        return ''.join(str(random.randint(0, 9)) for _ in range(6))
    
    @http.route('/web/login/send_otp', type='json', auth='public')
    def send_otp(self, login, password, **kwargs):
        """
        Authenticate user credentials and send an OTP via email.
        
        Args:
            login: User's email/username
            password: User's password
            
        Returns:
            dict: {'success': True/False, 'error': 'message' (if failed)}
        """
        try:
            # Attempt to authenticate the user
            db = request.session.db
            uid = request.session.authenticate(db, login, password)
            
            if not uid:
                return {'success': False, 'error': 'Invalid credentials'}
            
            # Get user record with sudo (authenticated user)
            user = request.env['res.users'].browse(uid).sudo()
            
            # Generate and save new OTP
            otp_code = self._generate_otp()
            user.write({'otp': otp_code})
            
            # Send OTP via email
            email_body = f"""
                

                    
Login Verification Code
                    
Hello {user.name},
                    
Your One-Time Password (OTP) for logging into {user.company_id.name} is:
                    

                        {otp_code}
                    
                    

                        This code is valid for this login session only and will expire after use.
                        If you didn't attempt to log in, please ignore this email or contact your administrator.
                    
                    
Best regards,
{user.company_id.name}
                
            """
            
            mail_values = {
                'subject': f'{user.company_id.name}: Your Login OTP is {otp_code}',
                'email_from': user.company_id.email or 'noreply@yourcompany.com',
                'email_to': user.email,
                'body_html': email_body,
                'auto_delete': True,
            }
            
            request.env['mail.mail'].sudo().create(mail_values).send()
            
            # Log out the authenticated session to force OTP verification
            request.session.logout()
            
            return {'success': True}
            
        except AccessDenied:
            return {'success': False, 'error': 'Invalid login credentials'}
        except Exception as e:
            return {'success': False, 'error': f'An error occurred: {str(e)}'}
    
    @http.route('/web/login/verify_otp', type='json', auth='public')
    def verify_otp(self, login, otp, **kwargs):
        """
        Verify the submitted OTP against the stored one.
        
        Args:
            login: User's email/username
            otp: OTP code entered by user
            
        Returns:
            dict: {'success': True/False, 'error': 'message' (if failed)}
        """
        user = request.env['res.users'].sudo().search([('login', '=', login)], limit=1)
        
        if not user:
            return {'success': False, 'error': 'User not found'}
        
        if user.otp and user.otp == otp:
            # Clear the OTP after successful verification (single-use)
            user.sudo().write({'otp': False})
            return {'success': True}
        
        return {'success': False, 'error': 'Invalid OTP code. Please try again.'}

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="login_page_otp_field" inherit_id="web.login">
        
        <!-- Add OTP field after password field -->
        <xpath expr="//div[hasclass('field-password')]" position="after">
            
            <!-- OTP Input Field (initially hidden) -->
            <div class="mb-3 field-otp d-none" id="otp_field_container">
                <label for="otp" class="form-label">Enter OTP Code</label>
                <input 
                    type="text" 
                    name="otp" 
                    id="otp" 
                    class="form-control" 
                    placeholder="Enter 6-digit code from email"
                    maxlength="6"
                    pattern="[0-9]{6}"
                    autocomplete="off"
                />
                <small class="form-text text-muted">
                    Check your email for the verification code
                </small>
            </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',
    },
    
    /**
     * Handle login form submission
     */
    _onLoginSubmit: function (ev) {
        ev.preventDefault();
        ev.stopPropagation();
        
        const $form = this.$el;
        const login = $form.find('input[name="login"]').val();
        const password = $form.find('input[name="password"]').val();
        const otp = $form.find('input[name="otp"]').val();
        
        // If OTP field is visible, verify the OTP
        if (!$form.find('#otp_field_container').hasClass('d-none')) {
            this._verifyOTP(login, otp, $form);
            return;
        }
        
        // Otherwise, validate credentials and send OTP
        this._sendOTP(login, password, $form);
    },
    
    /**
     * Send OTP to user's email after validating credentials
     */
    _sendOTP: function (login, password, $form) {
        const self = this;
        
        // Show loading state
        const $submitButton = $form.find('button[type="submit"]');
        const originalText = $submitButton.text();
        $submitButton.prop('disabled', true).text('Sending OTP...');
        
        jsonrpc('/web/login/send_otp', {
            login: login,
            password: password,
        }).then(function (result) {
            $submitButton.prop('disabled', false).text(originalText);
            
            if (result.success) {
                // Show the OTP field and update button text
                $form.find('#otp_field_container').removeClass('d-none');
                $form.find('input[name="otp"]').focus();
                $submitButton.text('Verify OTP');
                self._clearError();
                
                // Show success message
                self._showSuccess('OTP sent to your email. Please check your inbox.');
            } else {
                self._showError(result.error || 'Authentication failed. Please check your credentials.');
            }
        }).catch(function () {
            $submitButton.prop('disabled', false).text(originalText);
            self._showError('An error occurred while sending the OTP. Please try again.');
        });
    },
    
    /**
     * Verify the OTP entered by user
     */
    _verifyOTP: function (login, otp, $form) {
        const self = this;
        
        if (!otp || otp.length !== 6) {
            self._showError('Please enter a valid 6-digit OTP code.');
            return;
        }
        
        // Show loading state
        const $submitButton = $form.find('button[type="submit"]');
        const originalText = $submitButton.text();
        $submitButton.prop('disabled', true).text('Verifying...');
        
        jsonrpc('/web/login/verify_otp', {
            login: login,
            otp: otp,
        }).then(function (result) {
            if (result.success) {
                // OTP verified successfully - submit the form to complete login
                $submitButton.text('Logging in...');
                $form.off('submit').submit();
            } else {
                $submitButton.prop('disabled', false).text(originalText);
                self._showError(result.error || 'Invalid OTP code. Please try again.');
                $form.find('input[name="otp"]').val('').focus();
            }
        }).catch(function () {
            $submitButton.prop('disabled', false).text(originalText);
            self._showError('An error occurred during OTP verification. Please try again.');
        });
    },
    
    /**
     * Show error message
     */
    _showError: function (message) {
        this._clearMessages();
        this.$el.prepend(
            $('
')
                .text(message)
        );
    },
    
    /**
     * Show success message
     */
    _showSuccess: function (message) {
        this._clearMessages();
        this.$el.prepend(
            $('
')
                .text(message)
        );
    },
    
    /**
     * Clear all messages
     */
    _clearMessages: function () {
        this.$el.find('.alert').remove();
    },
});

export default publicWidget.registry.OTPLogin;