Customize django-allauth / django-rest-auth Password Reset Confirm

Question

In follow up on this question: rest-auth password reset, I now want to customize the following Password Reset Confirm page

But to be honest, there is a lot of magic going on in the background so I have no idea where to start.

Tried finding a template in all-auth and rest-auth but could not find the proper one to override.

How would one implement such a custom Password Reset Confirm view?

Answer 1

I know it's kind of late, but I'll reply in case it's useful to you or someone else.

Start by reading this fantastic tutorial Django REST Framework Authentication by TestDriven!!! All their content is top notch, open and paid.

First, you need to use 'password/reset/' endpoint. You can call it in a function with a button (Reset Password). The only data you need to pass here from the frontend to the backend is the email of the current logged in user. An email will be sent to the email client. (you can have the content to the Terminal/Console as well)

The email will arrive containing a link inside like "http://blahblah/password/reset/confirm/3/123456789ee6f85f4c2e3843eb523/"

Clicking this, it will direct you to the frontend page you have set (in my case in React). For the redirect to work, add the code shown in the tutorial at "Code and Configuration". For password reset specifically:

core/setting.py:

## <PASSWORD_RESET_CONFIRM_REDIRECT_BASE_URL>/<uidb64>/<token>/
PASSWORD_RESET_CONFIRM_REDIRECT_BASE_URL = \
    "http://localhost:3000/account/password-reset/confirm/"

authentication/views.py

def password_reset_confirm_redirect(request, uidb64, token):
    return HttpResponseRedirect(
        f"{settings.PASSWORD_RESET_CONFIRM_REDIRECT_BASE_URL}{uidb64}/{token}/"
    )

and in React's App.js:

<Route path='/account/password-reset/confirm/:uid/:token' element={<ResetPassword />} />

Then, you land to your page which will have two fields "Password1" and "Password2", and the user should write his new password. At this page, we'll use '/password/reset/confirm/' endpoint. onSubmit data should contain 'new_password1', 'new_password2', 'uid', 'token'. The first two are typed by the user, the last two are taken as params from url.

As an example, you can pass the data like that:

const { uid } = useParams();
const { token } = useParams();
const onSubmit = async (e) => {
        e.preventDefault()

        const data ={
        new_password1: password1,
        new_password2: password2,
        uid: uid,
        token: token
        }
        
        const response = await fetch(`yourAuthAPIPath/password/reset/confirm/`, {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'content-type': 'application/json',
                Authorization: WhateverYouUse
            },
        })

        if(response.ok) {
            console.log("Success")
            navigate('/');
        } else {
            console.log("fail")
        }
    }

This is just a draft, but it is working fine. I hope it will be helpful to you and other users, and I will finally gain my first upvotes here. lol