I'm using React and Dj-Rest-Auth for my authentication. I was able to set up the login page, registration page and the email confirmation page. But when i try to set up the Password Reset page i get this error every time i submit an email address inside the reset password form:
django | django.urls.exceptions.NoReverseMatch: Reverse for 'password_reset_confirm' not found. 'password_reset_confirm' is not a valid view function or pattern name.
Does anyone know why this happens and how it can be fixed?
This is how i set it all up:
urls.py
# API URLS
urlpatterns += [
# API base url
path("api/", include("config.api_router")),
# DRF auth token
path("auth-token/", obtain_auth_token),
path('dj-rest-auth/', include('dj_rest_auth.urls')),
path('dj-rest-auth/registration/', include('dj_rest_auth.registration.urls'))
]
reset.js
import { useState } from 'react';
import { Formik, Field, Form } from 'formik';
import axios from "axios"
import { API } from '../api'
export function Reset() {
const [loading, setLoading] = useState(false)
const [success, setSuccess] = useState(false)
function handleSubmit(values, { resetForm }) {
setLoading(true)
axios.post(API.auth.passwordReset, values)
.then(res => {
resetForm()
setSuccess(true)
})
.finally(() => setLoading(false))
}
return (
<div>
{success && "You will receive a verification email."}
{loading && "Loading..."}
<Formik
initialValues={{
email: '',
}}
onSubmit={handleSubmit}>
{({ errors, touched }) => (
<Form>
<Field name="email">
{({ field, form }) => (
<label className="mt-3 block">
<span className="text-gray-700">Email</span>
<input
{...field}
type="text"
className="
mt-1
block
w-full
rounded-md
border-gray-300
shadow-sm
focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50
"
placeholder=""
style={
form.touched.email && form.errors.email ? (
{ border: '2px solid var(--primary-red)'}
) : null
}
/>
</label>
)}
</Field>
<button className="mt-3 bg-blue-100 rounded-md shadow-sm text-lg px-5 py-3 hover:bg-blue-200"
type="submit">
Submit
</button>
</Form>
)}
</Formik>
</div>
)
}
App.js
<Route path="/login" element={<Login />} exact />
<Route path="/signup" element={<Signup />} exact />
<Route path="/reset" element={<Reset />} exact />
<Route path="/accounts/password_reset_confirm" element={<ResetConfirm />} exact />
<Route path="/accounts/confirm-email/:key" element={<ConfirmEmail />} exact />
Api.js
const baseURL = "http://127.0.0.1:8000"
const apiURL = `${baseURL}/api`
export const API = {
auth: {
login: `${baseURL}/dj-rest-auth/login/`,
logout: `${baseURL}/dj-rest-auth/logout/`,
passwordReset: `${baseURL}/dj-rest-auth/password/reset/`,
passwordResetConfirm: `${baseURL}/dj-rest-auth/password/reset/confirm/`,
signup: `${baseURL}/dj-rest-auth/registration/`,
verifyEmail: `${baseURL}/dj-rest-auth/registration/verify-email/`
},
facilities: {
list: `${apiURL}/facilities/`,
retrieve: id => `${apiURL}/facilities/${id}/`,
update: id => `${apiURL}/facilities/${id}/update/`,
}
}
Adapters.py
from typing import Any
from allauth.account.adapter import DefaultAccountAdapter
from allauth.socialaccount.adapter import DefaultSocialAccountAdapter
from django.conf import settings
from django.http import HttpRequest
class AccountAdapter(DefaultAccountAdapter):
def is_open_for_signup(self, request: HttpRequest):
return getattr(settings, "ACCOUNT_ALLOW_REGISTRATION", True)
def send_mail(self, template_prefix, email, context):
if settings.DEBUG:
context["activate_url"] = (
"http://localhost:3000/accounts/confirm-email/" + context["key"]
)
else:
context["activate_url"] = (
settings.FRONTEND_URL + "/accounts/confirm-email/" + context["key"]
)
return super().send_mail(template_prefix, email, context)
class SocialAccountAdapter(DefaultSocialAccountAdapter):
def is_open_for_signup(self, request: HttpRequest, sociallogin: Any):
return getattr(settings, "ACCOUNT_ALLOW_REGISTRATION", True)
After seeing your Api.js file, it looks fine to me. I checked the dj-rest-auth docs and I found that your problem is included in the FAQ (see question 2). There they suggest we need to add a url pattern with the name password_reset_confirm so you should modify your urls.py file to something like:
# API URLS
urlpatterns += [
# sample url pattern from dj-rest-auth demo
path("password-reset/confirm/<uidb64>/<token>/",
TemplateView.as_view(template_name="password_reset_confirm.html"),
name='password_reset_confirm'),
# API base url
path("api/", include("config.api_router")),
# DRF auth token
path("auth-token/", obtain_auth_token),
path('dj-rest-auth/', include('dj_rest_auth.urls')),
path('dj-rest-auth/registration/', include('dj_rest_auth.registration.urls'))
]
I used the same structure as they provide in the demo but using path instead of url. To see how the file password_reset_confirm.html file should look like you can check the same file in the demo (https://github.com/iMerica/dj-rest-auth/blob/8a460ecf9a72aec269b75160e5c97f7ed608e247/demo/templates/password_reset_confirm.html).
Also, you could include the default urls that the Django authentication system provides for that in django.contrib.auth (the urls can be found here, you will notice there's a url pattern named password_reset_confirm in L26). So another way of solving the problem would be to include those urls in your urls.py file like (see https://docs.djangoproject.com/en/4.0/topics/auth/default/#using-the-views-1):
# API URLS
urlpatterns += [
# include urls from django.contrib.auth
path('dj-auth/', include('django.contrib.auth.urls')),
# API base url
path("api/", include("config.api_router")),
# DRF auth token
path("auth-token/", obtain_auth_token),
path('dj-rest-auth/', include('dj_rest_auth.urls')),
path('dj-rest-auth/registration/', include('dj_rest_auth.registration.urls'))
]