Sitefinity Custom Reset Password Widget

sitefinity | 2022-11-20

💡 Introduction

I've built a custom reset password screen for Sitefinity, successfully tested and running in v13.

In this post, I will walk you through the process of creating this functionality.


🚩 Problems / Issues

While Sitefinity offers out-of-the-box (OOTB) reset password screens, there are limitations. You can find more details about the OOTB reset password functionality here.

For more customization, we need to build a custom widget and content type to support the password reset process.

All code snippets used in this solution are available in my GitHub Gist.


🔥 Solution Overview

Here's a step-by-step guide to building a custom reset password solution:

1. Modify and Place the login.html File

  • Modify the login.html file and place it in the Sitefinity folder: Content/Pages/login.html.

    You can find the file content here.

2. Create a Custom Module to Store Request and User IDs

  • Create a custom module to hold temporary request ID and user ID for password reset verification.

    screen1

  • Content Type Structure:

    screen2

  • Hide the Content Page from Navigation in the backend.

    screen3

3. Configure SMTP Profile

  • Configure SMTP Profile to ensure email notifications are sent out for password reset.

    screen4

4. Configure Advanced Settings

  • In Security > Membership Providers > Default > Parameters, set:

    • enablePasswordRetrieval to true

      screen5

    • enablePasswordReset to true

      screen6

5. Add Custom Code to Global.asax.cs

  • Add the necessary custom code to Global.asax.cs.

    Find the code in my GitHub Gist.

6. Set Up a Forgot Password Page

  • Create a Forgot Password Page in the Pages section of Sitefinity.

    screen7

  • Choose a default MVC page for this page.

    screen8

  • Install the ForgotPassword widget.

    screen9

7. Reset Password Screen

  • After setting everything up, test the reset password screen:

    screen10
    screen11

8. Receive the Password Reset Email

  • Once the user requests the password reset, they will receive an email with a reset link.

    screen12

9. Route to Change Password Screen

  • The email link will route the user to the change password screen.

    screen13
    screen14

10. Test the Login After Reset

  • After changing the password, the user will be able to log in with their new credentials.

    screen15

📚 References

📦 Repository and Code Snippets