Redirect to login page when username or password are wrong

Hi!

My site is supposed to be all in the front end, but when an user inputs a wrong username or password at the login page, he gets redirected to the wp login page; I want users to be redirected to my site's login page when that happens, displaying a message showing what was wrong, like a "Wrong password" beside the password field. I tried a plugin called WP Admin No Show, but I guess it didn't work, since the wp login page still appears when the user inputs a wrong username/pw.

Thanks.

  • Michelle Shull

    Hey there, Gabriel!

    We're cool, so I'm going to be brutally (you'll see what I did there in just a second) honest about why pointing out which of a username and password is incorrect is not a good idea.

    WordPress is a target for bad hackers, not because it's insecure (it's not), but because so many people use it, and so many people don't get the hows and whys of website security. A platform designed for beginners + millions of potential targets + nefarious jerks = a perfect storm for brute force attacks. (There's the callback.)

    Most login forms (and all the good ones) won't inform you which of your username and password has been entered incorrectly, because doing so would cut the time needed for a successful brute force attack. Without that notification, the attacker has to get both right at the same time, which is much more statistically unlikely. For the future security of your future store owners, and your paying customers, I strongly, strongly (no, really, strongly) urge you not to include this.

    Personally, I wish every copy of WordPress came with a public service announcement about the importance of maintaining a secure website.

    As for the login page, are you using any sort of redirection plugin to keep everyone on the front end, or did you do all of that through htaccess?

    Thanks Gabriel! I get a little windy about security, thanks for listening. : )

  • Wheel of Commerce

    LOL, no problem. I've brought the site to the front end using that tutorial from mp frontend. It's a custom login page.

    What I wanted was to send users back to /login when they had input a wrong pw or username, with an error message at the respective field. From what you're saying, I'll take that's not secure, but there's no problem in redirecting them to /login with a message like "Username or password were wrong", correct? This way I wouldn't be revealing which one was wrong.

    Since I'm using that custom login form, I'm not sure if there's a plugin that would do that. My guess is that it takes custom coding, but nothing complex, since all I want is to redirect them and to display that error message.

    Thanks.

  • Wheel of Commerce

    Hi!

    Tyler told me about the page below:
    http://wordpress.stackexchange.com/questions/110094/custom-login-redirects-to-wp-admin-on-wrong-password

    Below is the code I'm using in functions.php:

    /**
     * Function Name: front_end_login_fail.
     * Description: This redirects the failed login to the custom login page instead of default login page with a modified url
    **/
    add_action( 'wp_login_failed', 'front_end_login_fail' );
    function front_end_login_fail( $username ) {
    
    // Getting URL of the login page
    $referrer = $_SERVER['HTTP_REFERER'];
    // if there's a valid referrer, and it's not the default log-in screen
    if( !empty( $referrer ) && !strstr( $referrer,'wp-login' ) && !strstr( $referrer,'wp-admin' ) ) {
        wp_redirect( get_permalink( 66 ) . "?login=failed" );
        exit;
    }
    
    }
    
    /**
     * Function Name: check_username_password.
     * Description: This redirects to the custom login page if user name or password is   empty with a modified url
    **/
    add_action( 'authenticate', 'check_username_password', 1, 3);
    function check_username_password( $login, $username, $password ) {
    
    // Getting URL of the login page
    $referrer = $_SERVER['HTTP_REFERER'];
    
    // if there's a valid referrer, and it's not the default log-in screen
    if( !empty( $referrer ) && !strstr( $referrer,'wp-login' ) && !strstr( $referrer,'wp-admin' ) ) {
        if( $username == "" || $password == "" ){
            wp_redirect( get_permalink( 66 ) . "?login=empty" );
            exit;
        }
    }
    
    }
    // Replace my constant 'LOGIN_PAGE_ID' with your custom login page id.

    Below is the one I'm using in login.php:

    <div class="wp_login_error">
        <?php if( isset( $_GET['login'] ) && $_GET['login'] == 'failed' ) { ?>
            <p>The password you entered is incorrect, Please try again.</p>
        <?php }
        else if( isset( $_GET['login'] ) && $_GET['login'] == 'empty' ) { ?>
            <p>Please enter both username and password.</p>
        <?php } ?>
    </div>

    Both are inside the child theme's folder. I'm getting a huge error message at the header of my site and users still get redirected to /wp-admin when inputting a wrong username/pw. Any idea on how to fix this?

    Thanks.

  • Wheel of Commerce

    The error message at my site's header:

    "function bp_get_blogs_visit_store_admin_button( $args = '' ) { $defaults = array( 'id' => 'store_admin_blog', 'component' => 'blogs', 'must_be_logged_in' => false, 'block_self' => false, 'wrapper_class' => 'store-admin-button visit', 'link_href' => bp_get_blog_permalink() . 'store-admin', 'link_class' => 'store-admin-button visit', 'link_text' => __( 'Store Admin', 'tkb_store_button' ), 'link_title' => __( 'Store Admin', 'tkb_store_button' ), ); $button = wp_parse_args( $args, $defaults ); // Filter and return the HTML button. This checks if the user has the manage_options capability for the blog by it's ID $caps = 'manage_options'; if (current_user_can_for_blog(bp_get_blog_id(), $caps)){ echo bp_get_button( apply_filters( 'bp_get_blogs_visit_blog_button', $button ) ); } } add_action( 'bp_directory_blogs_actions', 'bp_get_blogs_visit_store_admin_button' ); /** * Function Name: front_end_login_fail. * Description: This redirects the failed login to the custom login page instead of default login page with a modified url **/ add_action( 'wp_login_failed', 'front_end_login_fail' ); function front_end_login_fail( $username ) { // Getting URL of the login page $referrer = $_SERVER['HTTP_REFERER']; // if there's a valid referrer, and it's not the default log-in screen if( !empty( $referrer ) && !strstr( $referrer,'wp-login' ) && !strstr( $referrer,'wp-admin' ) ) { wp_redirect( get_permalink( 66 ) . "?login=failed" ); exit; } } /** * Function Name: check_username_password. * Description: This redirects to the custom login page if user name or password is empty with a modified url **/ add_action( 'authenticate', 'check_username_password', 1, 3); function check_username_password( $login, $username, $password ) { // Getting URL of the login page $referrer = $_SERVER['HTTP_REFERER']; // if there's a valid referrer, and it's not the default log-in screen if( !empty( $referrer ) && !strstr( $referrer,'wp-login' ) && !strstr( $referrer,'wp-admin' ) ) { if( $username == "" || $password == "" ){ wp_redirect( get_permalink( 66 ) . "?login=empty" ); exit; } } } // Replace my constant 'LOGIN_PAGE_ID' with your custom login page id.
    Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/wheelofcommerce/wheelofcommerce.com/wp-content/themes/pro3-child/functions.php:73) in /home/wheelofcommerce/wheelofcommerce.com/wp-content/plugins/signup-password/signup-password.php on line 231"

    The error message at my wp dashboard header:

    "function bp_get_blogs_visit_store_admin_button( $args = '' ) { $defaults = array( 'id' => 'store_admin_blog', 'component' => 'blogs', 'must_be_logged_in' => false, 'block_self' => false, 'wrapper_class' => 'store-admin-button visit', 'link_href' => bp_get_blog_permalink() . 'store-admin', 'link_class' => 'store-admin-button visit', 'link_text' => __( 'Store Admin', 'tkb_store_button' ), 'link_title' => __( 'Store Admin', 'tkb_store_button' ), ); $button = wp_parse_args( $args, $defaults ); // Filter and return the HTML button. This checks if the user has the manage_options capability for the blog by it's ID $caps = 'manage_options'; if (current_user_can_for_blog(bp_get_blog_id(), $caps)){ echo bp_get_button( apply_filters( 'bp_get_blogs_visit_blog_button', $button ) ); } } add_action( 'bp_directory_blogs_actions', 'bp_get_blogs_visit_store_admin_button' ); /** * Function Name: front_end_login_fail. * Description: This redirects the failed login to the custom login page instead of default login page with a modified url **/ add_action( 'wp_login_failed', 'front_end_login_fail' ); function front_end_login_fail( $username ) { // Getting URL of the login page $referrer = $_SERVER['HTTP_REFERER']; // if there's a valid referrer, and it's not the default log-in screen if( !empty( $referrer ) && !strstr( $referrer,'wp-login' ) && !strstr( $referrer,'wp-admin' ) ) { wp_redirect( get_permalink( 66 ) . "?login=failed" ); exit; } } /** * Function Name: check_username_password. * Description: This redirects to the custom login page if user name or password is empty with a modified url **/ add_action( 'authenticate', 'check_username_password', 1, 3); function check_username_password( $login, $username, $password ) { // Getting URL of the login page $referrer = $_SERVER['HTTP_REFERER']; // if there's a valid referrer, and it's not the default log-in screen if( !empty( $referrer ) && !strstr( $referrer,'wp-login' ) && !strstr( $referrer,'wp-admin' ) ) { if( $username == "" || $password == "" ){ wp_redirect( get_permalink( 66 ) . "?login=empty" ); exit; } } } // Replace my constant 'LOGIN_PAGE_ID' with your custom login page id."

    Thanks.

  • Wheel of Commerce

    I managed to fix it. Now, the user is being redirected to the login page, but the message saying "The password you entered is incorrect, Please try again." is being displayed at the footer; I presume it has something to do with the code that goes in login.php.

    <div class="wp_login_error">
        <?php if( isset( $_GET['login'] ) && $_GET['login'] == 'failed' ) { ?>
            <p>The password you entered is incorrect, Please try again.</p>
        <?php }
        else if( isset( $_GET['login'] ) && $_GET['login'] == 'empty' ) { ?>
            <p>Please enter both username and password.</p>
        <?php } ?>
    </div>

    Thanks.

  • Michael Bissett

    Hey @Gabriel, reaching out here from today's live chat. :slight_smile:

    The problem we ran into here was due to the code being inserted after the "get_footer" function at the bottom of your login.php file (it would be loaded after the footer was loaded, so it would get loaded below the footer).

    Given the type of messages that this message displays, I moved it up above the code for the login form (which starts at line 58 presently inside wp-content/themes/pro3-child/login.php)

    You may wish to use this CSS code, so that the code stands out more (without being too loud):

    .wp_login_error p {
    color: #DA5757;
    }

    You can insert that into either the style.css inside the child theme, or into a plugin like Simple Custom CSS.

    Hope this helps! :slight_smile:

    Kind Regards,
    Michael

  • Wheel of Commerce

    Just so you guys know: you already have my FTP login data; I've sent it like a month ago, it has Tyler's name in the subject line if I remember correctly. Support access is also active.

    I'm presuming this issue has something to do with what's in my login.php. I've checked footer.php, as the error message is being displayed at my site's footer, but didn't see anything that looked abnormal there -but then again, I'm not a coder, so this actually doesn't mean anything, lol.

    Thanks.

  • Ash

    Hello @Gabriel

    I hope you are well today.

    Where did you put the code?

    <div class="wp_login_error">
        <?php if( isset( $_GET['login'] ) && $_GET['login'] == 'failed' ) { ?>
            <p>The password you entered is incorrect, Please try again.</p>
        <?php }
        else if( isset( $_GET['login'] ) && $_GET['login'] == 'empty' ) { ?>
            <p>Please enter both username and password.</p>
        <?php } ?>
    </div>

    You need to use this code in the login form, just before the form. If you find the login form, then you will see a form tag, like:

    <form action="....">
    ....
    ....
    ....
    </form>

    Use the above code just above the form tag.

    Please feel free to let us know if you have any more questions :slight_smile:

    Cheers
    Ash

  • Wheel of Commerce

    Hi! First of all, thanks for replying in less than 24h.

    Below is what I have at login.php, wrapped in "</form>" (these are the only 2 form tags I have there):

    </form>
    		</div>
    		<div id="tab3_login" class="tab_content_login" style="display:none;">
    			<h3>Lose something?</h3>
    			<p>Enter your username or email to reset your password.</p>
    			<form method="post" action="<?php echo site_url('wp-login.php?action=lostpassword', 'login_post') ?>" class="wp-user-form">
    				<div class="username">
    					<label for="user_login" class="hide"><?php _e('Username or Email'); ?>: </label>
    					<input type="text" name="user_login" value="" size="20" id="user_login" tabindex="1001" />
    				</div>
    				<div class="login_fields">
    					<?php do_action('login_form', 'resetpass'); ?>
    					<input type="submit" name="user-submit" value="<?php _e('Reset my password'); ?>" class="user-submit" tabindex="1002" />
    					<?php $reset = $_GET['reset']; if($reset == true) { echo '<p>A message will be sent to your email address.</p>'; } ?>
    					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>?reset=true" />
    					<input type="hidden" name="user-cookie" value="1" />
    				</div>
    			</form>

    I'm putting that login code above the first form tag. Just to confirm: I've removed 2 spaces at the end of that "login error code", that doesn't make any difference, right?

    The screen shot below shows how the error message is being diplayed now. I want to move the error message above the username field, fix the side lines that involve the login box (I think it must be moved a little bit to the right, so the lateral lines appear at both sides -it's indicated by red arrows at left and right) and remove that extra line that appears at the bottom (also indicated by a red arrow in the screen shot below).

    http://minus.com/i/lSpXHotBFmlY

    Thanks.

  • Wheel of Commerce

    I managed to bring that text above username, now I need to put it in a centralized position regarding the username blank field. I'm presuming I'll have to insert something like padding-left:100px; inside the div of that login code, just don't know exactly where -I've tried some positions, but it displays the text of this piece of code instead of moving the error message.

    Also, I haven't figured a way to fix the issue about the theme borders showed in my last screen shot.

    Thanks.

  • Wheel of Commerce

    Ok, thanks. I've used padding to move the text to the position I wanted.

    Now I have to fix the login box, that's kind of moved to the left, hiding the line that limits this side of the login box, and remove that line at the bottom of the theme, as you can see indicated by arrows in the screenshot below:
    http://minus.com/i/lSpXHotBFmlY

    The pages that display it:
    http://www.wheelofcommerce.com/login/
    http://www.wheelofcommerce.com/login/?login=failed

    Thanks.

  • Wheel of Commerce

    Ok, all the other issues were fixed, now I want to know if there's a way to give all my buttons rounded corners; the login button, for instance, has pointy borders, I want to give all the borders the same rounded aspect the login box has. To see what I'm talking about, just access my wp dashboard (support access is active) and deactivate the ultimate coming soon page plugin, then go to the login page: http://www.wheelofcommerce.com/login/

    Is there a code that can give rounded corners to all the buttons and "boxes" (like the "box" surrounding my login form) in my whole site?

    Thanks again.

  • Tyler Postle

    Hey Gabriel,

    Hope you're doing well today and thanks again for stopping by the chat!

    You were wanting to make the submit button edges rounder correct?

    You can do that by adding this code to your custom stylesheet:

    .user-submit {
        border-radius: 5px;
    }

    Adjust the pixel amount as needed :slight_smile: higher the value the more round it will be.

    Let me know if you need any further assistance here.

    Cheers,
    Tyler

  • Wheel of Commerce

    Ok, that worked, thanks.

    I've realized I need a piece of CSS similar to the one you gave me to apply a padding to the error message; that worked only for the error message displayed in case of wrong field, not empty field -I searched that piece of login code but didn't come up with anything. The message for empty field is "Please enter both username and password." and the code you gave me for wrong username/pw is below:

    .wp_login_error{
    padding-left:210px !important;
    }

    I also want to approximate username and password with their blank fields -the way it's right now, they are too far away.

    Thanks again. :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.