Build a Native Login Popup Using Only Core Joomla

index.php?option=com_ajax&template=YourTemplateName&method=loginForm&format=html

<?php
defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\Registry\Registry;

class TplCassiopeiaHelper   // Change "Cassiopeia" to match your actual template folder name
{
    public static function loginFormAjax()
    {
        $app = Factory::getApplication();
        $input = $app->getInput();

        $moduleId = $input->getInt('moduleid', 0);

        $module = ModuleHelper::getModule('mod_login');

        if (empty($module->id) && $moduleId) {
            $module = ModuleHelper::getModuleById($moduleId);
        }

        if (empty($module)) {
            return '<div class="alert alert-danger">' . Text::_('MOD_LOGIN_MODULE_NOT_FOUND') . '</div>';
        }

        // Optional tweaks for better popup presentation while respecting your module settings

        // if you want to redirect to a specific menu item
        $params = new Registry($module->params ?? '{}');
        $params->set('show_login_form', 1);
        $params->set('greeting', 0);   // Change to 1 if you prefer greeting when logged in
        $params->set('login', numeric-menu-id-here);
        $module->params = $params->__toString();

        // if you want to stay on the current page
        $referrer = $input->server->get('HTTP_REFERER', '', 'string');
        if($referrer) {
          $base64Referrer = base64_encode($referrer);
          $find = '/name="return" value="[^"]*"/i';
          $replace = 'name="return" value="'.$base64Referrer.'"';
          $html = preg_replace($find, $replace, $html);
        }

        $attribs = ['style' => 'none'];

        $html = ModuleHelper::renderModule($module, $attribs);

        // Handle potential session token timeout (especially useful on cached pages)
        $timeout = $app->get('lifetime', 15) * 60 * 1000; // in milliseconds
        $timeoutTag = '<script type="application/json" id="loginTokenTimeout">' . json_encode(['timeout' => $timeout]) . '</script>';

        return '<div class="joomla-native-login-popup">' . $html . $timeoutTag . '</div>';
    }
}

Pay close attention to the 2 options you have for redirect. You can stay on the page - or you can type the menu id of the page you'd like your users to land on.  Pick one or the other!  If you leave the script as-is - you'll always redirect to the current page (because that gets set last).

var initLoginDialog = function() {
    document.addEventListener('click', function (e) {
        const link = e.target.closest('a.dialog-login');
        if (!link) return;

        e.preventDefault();

        let ajaxUrl = link.href.replace(/format=html/i, 'format=raw');
        if (ajaxUrl === link.href) {
            ajaxUrl += (ajaxUrl.includes('?') ? '&' : '?') + 'format=raw';
        }

        let dialog = document.getElementById('joomlaLoginDialog');
        if (!dialog) {
            dialog = document.createElement('dialog');
            dialog.id = 'joomlaLoginDialog';
            dialog.setAttribute('closedby', 'any');
            dialog.style.cssText = `
                width: 420px;
                max-width: 95vw;
                border: none;
                border-radius: 12px;
                padding: 0;
                box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
                background: white;
            `;
            document.body.appendChild(dialog);
        }

        dialog.innerHTML = `
            <div style="padding: 40px 20px; text-align: center; font-family: system-ui, sans-serif;">
                <div style="margin-bottom: 16px; color: #666;">Loading login form...</div>
                <div style="width: 36px; height: 36px; border: 5px solid #f0f0f0; border-top: 5px solid #0d6efd; 
                            border-radius: 50%; animation: spin 0.9s linear infinite; margin: 0 auto;"></div>
            </div>
            <style>@keyframes spin { to { transform: rotate(360deg); } }</style>
        `;

        dialog.showModal();

        fetch(ajaxUrl)
            .then(response => {
                if (!response.ok) throw new Error('Failed to load');
                return response.text();
            })
            .then(html => {
                dialog.innerHTML = `
                    <div style="position: relative; padding: 20px;">
                        <button onclick="this.closest('dialog').close()" 
                                style="position: absolute; top: 12px; right: 16px; font-size: 28px; 
                                    background: none; border: none; cursor: pointer; color: #999; line-height: 1;">
                            ×
                        </button>
                        <div class="joomla-native-login-popup">${html}</div>
                    </div>
                `;

                // Auto-close dialog if login token expires (helpful for cached pages)
                const timeoutScript = dialog.querySelector('#loginTokenTimeout');
                if (timeoutScript) {
                    try {
                        const data = JSON.parse(timeoutScript.textContent);
                        if (data.timeout) {
                            setTimeout(() => {
                                dialog.close();
                                alert('Your login session has expired. Please try logging in again.');
                            }, data.timeout);
                        }
                    } catch (err) {
                        console.log('Failed to parse login token timeout:', err);
                    }
                }
            })
            .catch(() => {
                dialog.innerHTML = `
                    <div style="padding: 40px 20px; text-align: center; color: #c00;">
                        Could not load the login form.<br><br>
                        <button onclick="this.closest('dialog').close()">Close</button>
                    </div>
                `;
            });
    });
};

window.addEventListener('DOMContentLoaded', initLoginDialog);