Better Login
A theming module that replaces Drupal's default login, registration, password recovery, and password reset pages with cleaner, WordPress-inspired templates.
betterlogin
Install
composer require 'drupal/betterlogin:^2.0'
Overview
Better Login is a lightweight theming module designed to solve the common problem of styling Drupal's user authentication forms. It provides a clean, minimal, and professional appearance for the login, registration, password recovery, and password reset pages without requiring any configuration.
Inspired by WordPress's login form design, this module uses dedicated page templates that completely replace the default Drupal user form pages. The module starts working immediately upon installation, providing an instant visual improvement to all user authentication pages.
Each authentication page displays the site logo, form title, the relevant form content, and helpful navigation links to other authentication pages. The templates are designed to be easily customizable - you can override them in your theme or simply modify the provided CSS to match your site's branding.
Features
- Provides four dedicated page templates for user authentication pages: login, registration, password recovery, and password reset
- Displays the site logo prominently above each authentication form
- Sets meaningful page titles instead of generic 'User account' title (e.g., 'Login', 'Register', 'Forgot your password?', 'Reset password')
- Adds autofocus to the username/email field for immediate user input
- Removes default form field descriptions for a cleaner appearance
- Provides navigation links between authentication pages (login, register, forgot password, back to site)
- Conditionally displays registration link based on user registration permissions
- Removes default Drupal local task tabs from user pages for a cleaner interface
- Includes responsive CSS styling with a centered form box design
- Handles anonymous user redirection when accessing user pages with query parameters
- Works immediately upon installation with no configuration required
Use Cases
Quick Visual Improvement for User Authentication Pages
For site builders who want an immediate visual upgrade to Drupal's default login pages without spending time on custom theming. Simply install the module and all user authentication pages will have a clean, professional appearance with the site logo and improved typography.
Starting Point for Custom Authentication Page Design
For themers who want a solid foundation for custom authentication page designs. Copy the four template files from the module's /templates directory to your theme, then customize the HTML structure and add your own CSS to match your site's design language.
WordPress-Style Login Experience
For organizations migrating from WordPress or those whose users are familiar with WordPress's login experience. The centered form design with logo and minimal distractions provides a similar user experience to WordPress login pages.
Improved User Experience for Public-Facing Sites
For sites with public registration where the login and registration pages are frequently visited. The cleaner design with clear navigation between login, registration, and password recovery reduces user confusion and improves conversion rates.
Tips
- To customize templates, copy them from the module's /templates directory to your theme's /templates directory and modify as needed
- The CSS uses the #auth_box wrapper ID - use this selector to add custom styles in your theme without modifying the module
- Each template has a unique class on the #auth_box element (login, password, register, reset) for page-specific styling
- The module adds 'route' cache context to ensure proper caching of different authentication pages
- Consider adding your theme's CSS reset/normalization to ensure consistent styling across browsers
Technical Details
Hooks 5
hook_help
Provides help text for the module on the admin help page, explaining that the module uses four templates and how to customize them.
hook_form_alter
Modifies user authentication forms by adding autofocus to the username field, removing field descriptions, and attaching the betterlogin CSS library.
hook_theme
Registers four page template theme hooks for the user authentication pages with a custom preprocess function.
hook_local_tasks_alter
Removes the default Drupal local task tabs (Log in, Register, Reset password) from user pages to provide a cleaner interface.
hook_preprocess_html
Sets custom page titles for each authentication page: 'Login', 'Forgot your password?', 'Register', and 'Reset password'.
Troubleshooting 5
Clear all Drupal caches (drush cr) and ensure the module is properly enabled. If using a custom theme, check if the theme is overriding page templates and adjust accordingly.
Ensure your theme has a logo configured in Appearance settings. The module uses theme_get_setting('logo.url') to retrieve the logo path.
The registration link only appears when user registration is allowed. Check your account settings at /admin/config/people/accounts to ensure registration is enabled.
The module's CSS may conflict with your theme's styles. Either increase CSS specificity in your theme or copy and modify the module's CSS to match your theme's styling approach.
The module's templates render {{ page.content }} which includes the full form. If fields are missing, check your user account field configuration rather than the module.