The Confirmation Url Is Invalid or Has Already Been Used Please Signup Again

Django Countersign Reset Tutorial

• Past Will Vincent
• Mar 22, 2022

In this tutorial we'll add together a password reset sequence to our Django application. This builds upon our previous work where we added Login & Logout pages so a Signup page.

Complete source code can be found on Github if you get stuck along the mode.

Django auth app

What nosotros desire is a password_reset page where the user can enter their electronic mail accost, and be sent a cryptographically secure email with a ane-time link to a reset page. Fortunately Django has us covered.

If yous call back the complete set of views and URLs provided by the Django auth app, in that location are already several for resetting a password.

                        accounts/login/ [name='login']            accounts/logout/ [proper noun='logout']            accounts/password_change/ [proper noun='password_change']            accounts/password_change/done/ [name='password_change_done']            accounts/password_reset/ [proper noun='password_reset']            accounts/password_reset/done/ [name='password_reset_done']            accounts/reset/<uidb64>/<token>/ [proper name='password_reset_confirm']            accounts/reset/washed/ [proper noun='password_reset_complete']          

The default templates withal are quite ugly and we need to customize them. For instance, here are the default password reset and password reset washed pages:

But start we need to setup a way to deliver, or at least fake deliver, our e-mail messages.

SMTP Server

In the real-world you would integrate with an email service like MailGun or SendGrid. For development purposes Django lets u.s. shop emails either in the console or every bit a file. We'll choose the latter and store all sent emails in a folder called sent_emails in our project directory.

To configure this, update our django_project/settings.py file by calculation the following two lines at the bottom under our redirect URLs.

                        # django_project/settings.py            EMAIL_BACKEND            =            "django.core.mail.backends.filebased.EmailBackend"            EMAIL_FILE_PATH            =            BASE_DIR            /            "sent_emails"          

Now allow's change the appearance of the countersign reset pages.

Password Reset Form

The default template for password reset is located at templates/registration/password_reset_form.html. We can customize it past creating our own password_reset_form.html file:

                        (.venv) $ touch templates/registration/password_reset_form.html          

Then add the post-obit code:

                        <!-- templates/registration/password_reset_form.html -->            {% extends 'base of operations.html' %}  {% block title %}Forgot Your Password?{% endblock %}  {% block content %}            <            h1            >Forgot your password?</            h1            >            <            p            >Enter your email address below, and nosotros'll email instructions for setting a new one.</            p            >            <            class            method            =            "Post"            >            {% csrf_token %}     {{ form.as_p }}            <            input            type            =            "submit"            value            =            "Send me instructions!"            >            </            grade            >            {% endblock %}          

If you refresh the folio at http://127.0.0.1:8000/accounts/password_reset/ you can run across our new update:

Now go ahead and enter the email address that matches an actual user you've created. And so click on the button to submit it.

Upon successful submission, we're redirected to the Countersign reset done page which is as well ugly. Let'southward change it. The default template is located at templates/registration/password_reset_done.html. So as earlier, in your text editor create a new template file templates/registration/password_reset_done.html and add the following lawmaking:

                        <!-- templates/registration/password_reset_done.html -->            {% extends "base.html" %}  {% block championship %}Electronic mail Sent{% endblock %}  {% block content %}            <            h1            >Check your inbox.</            h1            >            <            p            >We've emailed you instructions for setting your password. You should receive the email shortly!</            p            >            {% endblock %}          

If yous refresh the password reset done page at http://127.0.0.1:8000/accounts/password_reset/done/ we tin can run across our new page.

Password Reset Confirm

Retrieve how we configured our Django project to store emails in a local folder called sent_emails? If you lot look at your project now that folder exists! The format for the txt file volition look something like this:

                        Content            -            Type            :            text            /            manifestly            ;            charset            =            "utf-8"            MIME            -            Version            :            1.0            Content            -            Transfer            -            Encoding            :            8            bit            Subject            :            Password            reset            on            127.0.0.1            :            8000            From            :            webmaster            @            localhost            To            :            will            @            learndjango            .            com            Engagement            :            Fri            ,            18            Mar            2022            19            :            20            :            44            -            0000            Bulletin            -            ID            :            <            [email protected]0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0            .            ip6            .            arpa            >            You            '            re            receiving            this            email            because            yous            requested            a            countersign            reset            for            your            user            account            at            127.0.0.1            :            8000.            Please            get            to            the            following            page            and            choose            a            new            password            :            http            :            //127.0.0.ane:8000/accounts/reset/MQ/aa1v2k-8ab2c9597a4f6cc754e3dc5baaf3c77f/            Your            username            ,            in            case            y'all            '            ve            forgotten            :            wsv            Thank you            for            using            our            site            !            The            127.0.0.one            :            8000            squad          

This contains Django's default linguistic communication which we can customize. But the of import section for at present is the URL included. In the email above, mine is http://127.0.0.1:8000/accounts/reset/MQ/aa1v2k-8ab2c9597a4f6cc754e3dc5baaf3c77f/. Copy and paste yours into your browser and yous'll exist automatically routed to the Password reset confirmation page.

Ugly, no? Permit's create a new template with our familiar steps. In your text editor create the new template called templates/registration/password_reset_confirm.html and enter this new lawmaking:

                        <!-- templates/registration/password_reset_confirm.html -->            {% extends "base.html" %}  {% block title %}Enter new password{% endblock %}  {% cake content %}  {% if validlink %}            <            h1            >Set a new password!</            h1            >            <            form            method            =            "Post"            >            {% csrf_token %}   {{ class.as_p }}            <            input            blazon            =            "submit"            value            =            "Change my countersign"            >            </            grade            >            {% else %}            <            p            >The password reset link was invalid, possibly because it has already been used.  Delight request a new password reset.</            p            >            {% endif %} {% endblock %}          

Refresh the folio at http://127.0.0.one:8000/accounts/reset/Mg/set-password/ and y'all'll see our new template.

Password Reset Done

Get ahead and create a new countersign in our form. Upon submission you'll exist redirected to our final default page which is for Password reset complete:

To customize this page nosotros'll create a new file called password_reset_complete.html and enter the post-obit code:

                        <!-- templates/registration/password_reset_complete.html -->            {% extends 'base.html' %}  {% block championship %}Password reset consummate{% endblock %}  {% block content %}            <            h1            >Password reset consummate</            h1            >            <            p            >Your new password has been set. You lot can log in at present on the            <            a            href            =            "{% url 'login' %}"            >log in page</            a            >.</            p            >            {% endblock %}          

At present reset the page at http://127.0.0.1:8000/accounts/reset/washed/ and view our piece of work.

Add together to domicile folio

Permit'due south add the password reset link to the homepage now so that logged-in users will come across it. Nosotros can employ the built-in tag {% url 'password_reset' %}. Here's the code.

                        <!-- templates/home.html -->            {% extends 'base.html' %}  {% block title %}Home{% endblock %}  {% block content %} {% if user.is_authenticated %}   How-do-you-do {{ user.username }}!            <            p            ><            a            href            =            "{% url 'logout' %}"            >Log Out</            a            ></            p            >            <            p            ><            a            href            =            "{% url 'password_reset' %}"            >Reset Password</            a            ></            p            >            {% else %}            <            p            >You lot are not logged in</            p            >            <            a            href            =            "{% url 'login' %}"            >Log In</            a            >            {% endif %} {% endblock %}          

Navigate to http://127.0.0.one:8000/ and log in using the "Log In" link. The updated homepage has both the "Log Out" and "Reset Countersign" links.

Conclusion

We've now implemented a robust user hallmark menstruation for our spider web app with login, logout, signup, and password reset. Congrats!

What else might we want? Using a custom user model instead of the congenital-in User model is a adept idea. The Django docs notation one is highly recommended. You could likewise add a "Password Change" feature, wire up emails to transport, or even install the 3rd party django-allauth package to enable login via email only and other goodies.

I cover all of this--and more than--in my volume, Django for Beginners.

alexanderwipt1982.blogspot.com

Source: https://learndjango.com/tutorials/django-password-reset-tutorial

Share this post