Forgot Password with AJAX in WordPress Login and Register

After getting many requests from visitors to integrate Forgot Password with AJAX in my previous article WordPress AJAX Login and Register without a Plugin I decided to write a post about steps and code to add in that article to include Forgot Password functionality. This article is an improvement over that previous article as well as it will be sure helpful to understand how does the functionality actually work.

Forgot Password with AJAX in WordPress Login and Register

Forgot Password with AJAX in WordPress

The form opens as popup when you click ‘Lost password‘ link given inside ‘Login‘ popup and send an email to validated user after setting new password in WordPress database. You can download the complete zip of files at the end of this post to add in your theme to implement AJAX Login, Register and Forgot Password without a plugin and powered with jQuery client side validation.

The Form

Starting from ajax-auth.php file we have added a form there to obtain input by user.

 CSS

To style the input textbox and submit button, we are adding .ajax-auth input#user_login and .ajax-auth input#user_login:focus classes after line numbers 53 and 71 respectively in ajax-auth-style.css and code are highlighted below:

Script 

The script part handles showing the form, validates the textbox, sends information inputted by user to server and notifies user as per the response received through AJAX. Methods added into ajax-auth-script.js are

Handling the AJAX Request 

In custom-ajax-auth.php that does all server side processing, we have added just one line as WordPress action hook to call ajax_forgotPassword() as well as the function itself. So the modified code is:

The code block is self explanatory and we have used  a number of WordPress inbuilt functions here as defined in global wbdb class. We are  trying to match user input with an existing user in database through email first and then username (if input is not an email) as well as added error in case of empty/invalidated or non-existing user.

If a user matches then we tried to assign it a new password, update the database table and attempted to send new password to the user.

NOTE: Please provide a valid email address for sender field ($from at line number 8) otherwise system will use ‘admin@yoursite.com’ as default sender (yoursite.com will get replace with your domain name).

It’s all about embedding Forgot Password functionality in AJAX Login and Register without a Plugin in WordPress.

Download Zip

Included: ajax-auth-style.css, jquery.validate.js, ajax-auth-script.js, ajax-auth.php, custom-ajax-auth.php (updated for Forgot Password with AJAX)

Or if you are intended to just use login and register without a plugin then please refer to this tutorial.

Like this Post? Share
  • GiuseppeTr

    Hi,

    I have added the forgot password script.

    But when I click “forgot password ?” in login form, it goes to default forgot page “wp-login.php?action=lostpassword”

    Thanks!

    • Amit Sonkhiya

      Hi,

      I read you comment and understand the code. There you have remove href attribute’s value. Is your issue resolved now?

      • GiuseppeTr

        yes, I resolved !

  • Nico

    Hi, I have been playing woth your script for a site of my own and found that It lets you register even if you put to different passwords in the form.

    And just something that happens to me is that I can’t recover the password as it says “System is unable to send you mail containg your new password.” I am trying it in localhost, might that be the reason?

    Regards and thanks!

    • Amit Sonkhiya

      Different password with? What about Username?

      Yes your mailserver at localhost is not configured that’s why you are getting the message. It will work fine on live.

      • Nico

        I mean that if in the register form you type two different valuesfor the password and confirm password field, the form is submitted anyway.

        • Amit Sonkhiya

          Whoop! I forgot to add that validation before form submission. Thank you and I will implement that very soon.

          • Nico

            Great, many thanks!
            I have been trying to fix it but it exceeds my knoledge apparently… tryied many ways and couldn’t.
            Anyway, I will be waiting!

            Thanks again

          • Amit Sonkhiya

            Hi,

            I have updated the code. A jQuery implementation has been made at end in ajax-auth-script.js. Download the updated files.

            Thanks.

          • Nico

            Hi Amit!

            I downloaded it, tryied it but the error persists 😛

          • Amit Sonkhiya

            Can you give me url of page where you have implemented the code.

  • Partha sarathy

    Hai , Forget Password options worked in Localhost server,, i want more detailed explaination

  • Quick question (awesome work BTW): if I successfully login using my ADMIN CREDS, then attempt to navigate to the WP ADMIN area, I am redirected to the default WP Login page and logged out of my current session. Is this a security thing with WP in the way the Custom WP AJAX Login works? Thanks again for contributing to the community.

    • Amit Sonkhiya

      Hi Gregory
      There is no such default implementation by WordPress. I suggest you to review plugins you have installed in your site, they might cause the issue.

      Thanks for your kind words.

      • Hi Amit,

        What if we wanted to use the Password Reset via link option (like WP does by default) in lieu of generating one on the user’s behalf and emailing them the result? Can that be accomplished via your code as well? This would help prevent “unauthorized” password resets as the user would have to click the link in the email to actually choose and reset their password.

        G.

        • Amit Sonkhiya

          Hi Greogory,

          You can indeed accomplish so and it needs modifications in register function at server side script. I you would need one, you can write us at support@fellowtuts.com

    • Dan Dulaney

      Gregory, see my post up top for a solution to this.

  • You have an error in your files, in cusom-ajax-auth.php you check_ajax_referer in all three ways with parameter “security”, but it must be “security”, “signonsecurity” and “forgotsecurity”

  • Anahit Aida Ghazaryan

    Thank you for the working tutorial.

    Is there a way to allow users to set their new password what they want within the forgot password section instead of giving them generated password please?

    Thanks in advance.

  • Great tutorial man! We’ve just used it on our website.

  • knolaust

    I keep getting “Cannot create a user with an empty login name.” when trying to use the register feature. Any suggestions? I’ve plugged the code in exactly as it is downloaded.

    • Amit Sonkhiya

      Hi knolaust

      It seems that POST parameters are not passing to server correctly. Can you check what are being passed from browser using firebug and what is received at server using var_dump($_POST);

      • knolaust

        Nothing. It’s passing the security and that’s it. Here’s the form for register (note: login and forgot password work). I may have stared at this so long that I’m missing something obvious.

        Become a Member

        First, let’s setup a username and password. Then you can complete the application.

        Username

        Email

        Password

        Confirm Password

        Already have an account? Login

  • Dan Dulaney

    Hello! I found a small error in your script, which also relates to the question by Gregory Mathews about it forcing re-login for admin section.

    You use wp_set_current user, to log in. According to the codex, this is not enough to log a user in, and you must also:

    wp_set_auth_cookie( $user_id );

    do_action( ‘wp_login’, $user->user_login );

    https://codex.wordpress.org/Function_Reference/wp_set_current_user#Examples

    My whole else block is as follows, in the custom-ajax-auth.php file:

    else {
    $user = get_user_by( ‘id’, $user_signon->ID);
    wp_set_current_user($user_signon->ID, $user->user_login);
    wp_set_auth_cookie( $user_signon->ID );
    do_action( ‘wp_login’, $user->user_login );
    echo json_encode(array(‘loggedin’=>true, ‘message’=>__($login.’ successful, redirecting…’)));
    }

    Thank you!

    • Amit Sonkhiya

      Hi Dan

      Thank you for the update. We will review & update in the weekend.

      • Dan Dulaney

        You’re welcome! What did you think of the change?

  • sumit saurav

    Hi Amit,
    i am using WPLMS theme and i want onclick image login and registration form will come in popups and when user register ,automatically user logged in and redirect to same page .
    i have download your code but i don’t know how to use in wordpress.
    Can you help me ?

    • Amit Sonkhiya

      Please send us link to url of page where you want to implement this feature to support@fellowtuts.com