Posted on May 19, 2023

Authentication system using Python (Django) and SvelteKit - User Profile & Password Update

Introduction

Every user of an application will in most cases want to update their details such as profile picture, name, password if they notice a breach or when forgotten, and other data our application allows them to provide. In this article, we'll do just that by allowing our application's users to update their profile names (first and last), thumbnails, GitHub links, dates of birth, and passwords. We will learn how to utilize the sparingly documented (or more appropriately, undocumented) MultiPartParser to manually handle FormData from PATCH requests.

Assumption and Recommendation

It is assumed that you are familiar with Django. I also recommend you go through how we created the front end of the previous series as we'll only change a very few things there and will not delve much into how we pieced everything together. The APIs we'll build here mirror what we built in that series.

Source code

The source code for this series is hosted on GitHub via:

Sirneij / django-auth-backend

Django session-based authentication system with SvelteKit frontend

django-auth-backend

Django session-based authentication system with SvelteKit frontend and GitHub actions-based CI.

This app uses minimal dependencies (pure Django - no REST API framework) to build a secure, performant and reliable (with 100% automated test coverage, enforced static analysis using Python best uniform code standards) session-based authentication REST APIs which were then consumed by a SvelteKit-based frontend Application.

Users' profile images are uploaded directly to AWS S3 (in tests, we ditched S3 and used Django's InMemoryStorage for faster tests).

A custom password reset procedure was also incorporated, and Celery tasks did email sendings.

Run locally

To run the application, clone it:
```
git clone https://github.com/Sirneij/django-auth-backend.git
```
You can, if you want, grab its frontend counterpart.
Change the directory into the folder and create a virtual environment using either Python 3.9, 3.10 or 3.11 (tested against the three versions). Then activate it:
```
~django-auth-backend$ virtualenv -p python3.11 virtualenv ~django-auth-backend$ source virtualenv/bin/activate 
```
…

View on GitHub

Implementation

Step 1: User profile update

We will start with updating some non-critical parts of our app's users' data. Create profile_update.py in users/views/ folder and populate it with:

# src/users/views/profile_update.py import json from io import BytesIO from typing import Any from django.contrib.auth.mixins import LoginRequiredMixin from django.http import HttpRequest, JsonResponse from django.http.multipartparser import MultiPartParser from django.utils.decorators import method_decorator from django.views import View from django.views.decorators.csrf import csrf_exempt from users.models import UserProfile @method_decorator(csrf_exempt, name='dispatch') class UserUpdateView(View, LoginRequiredMixin): def patch(self, request: HttpRequest, **kwargs: dict[str, Any]) -> JsonResponse: """Handle user updates.""" if not request.user.is_authenticated: return JsonResponse( {'error': 'You are not logged in. Kindly ensure you are logged in and try again'}, status=401 ) data, files = MultiPartParser( request.META, BytesIO(request.body), request.upload_handlers, request.encoding ).parse() first_name = data.get('first_name') last_name = data.get('last_name') thumbnail = files.get('thumbnail') phone_number = data.get('phone_number') birth_date = data.get('birth_date') github_link = data.get('github_link') user_details = UserProfile.objects.filter(user=request.user).select_related('user').get() if first_name: user_details.user.first_name = first_name if last_name: user_details.user.last_name = last_name if thumbnail: user_details.user.thumbnail = thumbnail user_details.user.save(update_fields=['first_name', 'last_name', 'thumbnail']) if phone_number: user_details.phone_number = phone_number if birth_date: user_details.birth_date = birth_date if github_link: user_details.github_link = github_link user_details.save(update_fields=['phone_number', 'birth_date', 'github_link']) res_data = { 'id': str(user_details.user.pk), 'email': user_details.user.email, 'first_name': user_details.user.first_name, 'last_name': user_details.user.last_name, 'is_staff': user_details.user.is_staff, 'is_active': user_details.user.is_active, 'date_joined': str(user_details.user.date_joined), 'thumbnail': user_details.user.thumbnail.url if user_details.user.thumbnail else None, 'profile': { 'id': str(user_details.id), 'user_id': str(user_details.user.pk), 'phone_number': user_details.phone_number, 'github_link': user_details.github_link, 'birth_date': str(user_details.birth_date) if user_details.birth_date else None, }, } response_data = json.loads(json.dumps(res_data)) return JsonResponse(response_data, status=200)

As usual, we started by ensuring that our API consumer does not need to provide CSRF token before accessing this page. I should tell you that we can actually provide csrftoken in SvelteKit using the power of its form actions. However, we just want to abide by the design principles adopted from the previous series. Next, we defined a PATCH method in our generic View class. PATCH is preferred because we want to strictly follow the usage of HTTP verbs or methods. PATCH is used for PARTIAL modification of resources. This endpoint should only be accessible to authenticated users and we enforced that at the very top of the method. Now, with the use of PATCH, we cannot use the very convenient request.POST.get('key') and request.FILES.get('key') Django provides for retrieving POST data and files respectively. If you use any of those here, they will be empty! We have to manually process the incoming PATCH FormData and to do that, we used the awesome but undocumented MultiPartParser which is available in django.http.multipartparser. The class expects four (4) arguments at initialization — request's META, body (in its raw file-like nature), upload_handlers (normally defaulted to request.upload_handlers) and an encoding (which has a default of settings.DEFAULT_CHARSET). The META's content type must start with multipart/ else it'll give errors. On a successful parse of the supplied FormData, it returns a tuple of data and files. We then retrieved the data and files and checked if any were provided. Updates were done accordingly.

You can then add this view to our list of URLs.

Step 2: User password change

Next is updating our users' passwords in case they were lost or something untoward happened to them. We'll require our users to undergo a three-step process — request a change with a registered and verified email address, click on the link sent to the email address, and input the new password.

By now, we are pretty familiar with allowing users to request something and we sending them emails with the appropriate link. This is not different. For the entire process, we will create a subpackage, called password, in the views package for brevity's sake. In the sub package, we will create request_change.py, confirm_change_request.py, and change_password.py. The content of src/users/views/password/request_change.py is:

# src/users/views/password/request_change.py import json from datetime import timedelta from typing import Any from asgiref.sync import sync_to_async from django.conf import settings from django.contrib.auth import get_user_model from django.contrib.sites.shortcuts import get_current_site from django.http import HttpRequest, JsonResponse from django.urls.base import reverse from django.utils import timezone from django.utils.decorators import method_decorator from django.utils.encoding import force_bytes from django.utils.http import urlsafe_base64_encode from django.views import View from django.views.decorators.csrf import csrf_exempt from users.tasks import send_email_message from users.token import account_activation_token from users.utils import validate_email @method_decorator(csrf_exempt, name='dispatch') class RequestPasswordChangeView(View): async def post(self, request: HttpRequest, **kwargs: dict[str, Any]) -> JsonResponse: """Request user password change.""" data = json.loads(request.body.decode("utf-8")) email = data.get('email') if email is None: return JsonResponse({'error': 'Email field is empty'}, status=400) is_valid, error_text = validate_email(email) if not is_valid: return JsonResponse({'error': error_text}, status=400) try: user = await get_user_model().objects.filter(email=email, is_active=True).aget() except get_user_model().DoesNotExist: return JsonResponse( { 'error': 'An active user with this e-mail address does not exist. ' 'If you registered with this email, ensure you have activated your account. ' 'You can check by logging in. If you have not activated it, ' f'visit {settings.FRONTEND_URL}/auth/regenerate-token to ' 'regenerate the token that will allow you activate your account.' }, status=404, ) token = await sync_to_async(account_activation_token.make_token)(user) uid = urlsafe_base64_encode(force_bytes(user.pk)) confirmation_link = ( f"{request.scheme}://{get_current_site(request)}" f"{reverse('users:confirm_password_change_request', kwargs={'uidb64': uid, 'token': token})}", ) subject = 'Password reset instructions' ctx = { 'title': "(Django) RustAuth - Password Reset Instructions", 'domain': settings.FRONTEND_URL, 'confirmation_link': confirmation_link, 'expiration_time': (timezone.localtime() + timedelta(seconds=settings.PASSWORD_RESET_TIMEOUT)).minute, 'exact_time': (timezone.localtime() + timedelta(seconds=settings.PASSWORD_RESET_TIMEOUT)).strftime( '%A %B %d, %Y at %r' ), } send_email_message.delay( subject=subject, template_name='password_reset_email.html', user_id=user.id, ctx=ctx, ) return JsonResponse( { 'message': 'Password reset instructions have been sent to your email address. ' 'Kindly take action before its expiration' }, status=200, )

It's basically almost like the logic for token regeneration aside from the fact that here, we are checking for an ACTIVE user with the provided email address. We also changed the email subject and the HTML template name. The template has this content:

<!-- src/templates/password_reset_email.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>{{ title }}</title> </head> <body> <table style=" max-width: 555px; width: 100%; font-family: 'Open Sans', Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; background: #fff; font-size: 13px; color: #323232; " cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" > <tbody> <tr> <td align="left"> <h1 style="text-align: center"> <span style="font-size: 15px"> <strong>{{ title }}</strong> </span> </h1> <p> Your request to reset your password was submitted. If you did not make this request, simply ignore this email. If you did make this request just click the button below: </p> <table style=" max-width: 555px; width: 100%; font-family: 'Open Sans', arial, sans-serif; font-size: 13px; color: #323232; " cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" > <tbody> <tr> <td height="10">&nbsp;</td> </tr> <tr> <td style="text-align: center"> <a href="{{ confirmation_link }}" style=" color: #fff; background-color: hsla(199, 69%, 84%, 1); width: 320px; font-size: 16px; border-radius: 3px; line-height: 44px; height: 44px; font-family: 'Open Sans', Arial, helvetica, sans-serif; text-align: center; text-decoration: none; display: inline-block; " target="_blank" data-saferedirecturl="https://www.google.com/url?q={{ confirmation_link }}" > <span style="color: #000000"> <strong>Change password</strong> </span> </a> </td> </tr> </tbody> </table> <table style=" max-width: 555px; width: 100%; font-family: 'Open Sans', arial, sans-serif; font-size: 13px; color: #323232; " cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" > <tbody> <tr> <td height="10">&nbsp;</td> </tr> <tr> <td align="left"> <p align="center">&nbsp;</p> If the above button doesn't work, try copying and pasting the link below into your browser. If you continue to experience problems, please contact us. <br /> {{ confirmation_link }} <br /> </td> </tr> <tr> <td> <p align="center">&nbsp;</p> <br /> <p style="padding-bottom: 15px; margin: 0"> Kindly note that this link will expire in <strong>{{expiration_time}} minutes</strong>. The exact expiration date and time is: <strong>{{ exact_time }}</strong>. </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html>

Next is the src/users/views/password/confirm_change.py:

# src/users/views/password/confirm_change.py from asgiref.sync import sync_to_async from django.conf import settings from django.contrib.auth import get_user_model from django.http import HttpRequest, HttpResponseRedirect from django.utils.encoding import force_bytes, force_str from django.utils.http import urlsafe_base64_decode, urlsafe_base64_encode from django.views import View from users.token import account_activation_token class ConfirmPasswordChangeRequestView(View): async def get(self, request: HttpRequest, uidb64: str, token: str) -> HttpResponseRedirect: """Confirm password change requests.""" try: uid = force_str(urlsafe_base64_decode(uidb64)) user = await get_user_model().objects.aget(pk=uid, is_active=True) except (TypeError, ValueError, OverflowError, get_user_model().DoesNotExist): user = None if user is not None and account_activation_token.check_token(user, token): # Generate a new token  token = await sync_to_async(account_activation_token.make_token)(user) uid = urlsafe_base64_encode(force_bytes(user.pk)) combined = f'{uid}:{token}' return HttpResponseRedirect(f'{settings.FRONTEND_URL}/auth/password/change-password?token={combined}') return HttpResponseRedirect( f'{settings.FRONTEND_URL}/auth/regenerate-token?reason=It appears that ' 'your confirmation token has expired or previously used. Kindly generate a new token', )

Also very familiar. The exemptions are that we are also checking ACTIVE users here. Then, if a user is successfully retrieved, we created a new token and encoded the user's id. Then we combined both using :. This will help us detect the person requesting the password change later in the password change view. We then redirected the user to the frontend-end page for changing the password with the "combined" token as a query parameter. The front end sends this token back to the backend alongside the user's new password. Let's write the password-changing logic now:

# src/users/views/password/change_password.py import json from typing import Any from django.contrib.auth import get_user_model from django.http import HttpRequest, JsonResponse from django.utils.decorators import method_decorator from django.utils.encoding import force_str from django.utils.http import urlsafe_base64_decode from django.views import View from django.views.decorators.csrf import csrf_exempt from users.token import account_activation_token @method_decorator(csrf_exempt, name='dispatch') class ChangePasswordView(View): async def post(self, request: HttpRequest, **kwargs: dict[str, Any]) -> JsonResponse: """Change user password.""" data = json.loads(request.body.decode("utf-8")) password = data.get('password') combined = data.get('token') try: uidb64, token = combined.split(':') uid = force_str(urlsafe_base64_decode(uidb64)) user = await get_user_model().objects.aget(pk=uid, is_active=True) except (TypeError, ValueError, OverflowError, get_user_model().DoesNotExist): user = None if user is not None and account_activation_token.check_token(user, token): user.set_password(password) await user.asave(update_fields=['password']) return JsonResponse( { 'message': 'Your password has been changed successfully. Kindly login with the new password', } ) return JsonResponse( { 'error': 'It appears that your password request token has expired or previously used', } )

We simply retrieved the new password and the "combined" token we sent previously. Then we tried to destructure the "combined" token to get the encoded user ID and the token itself. From there, fetched the user involved from the database, checked the correctness of the token and saved the user's password if everything is fine. That was pretty straightforward.

We can now add these views to our URLs to test them out.

# src/users/urls.py ... from users.views.password import change_password, confirm_change_request, request_change ... urlpatterns = [ ... # Password change  path( 'password-change/request-password-change/', request_change.RequestPasswordChangeView.as_view(), name='request_password_change', ), path( 'password-change/confirm/change-password/<uidb64>/<token>/', confirm_change_request.ConfirmPasswordChangeRequestView.as_view(), name='confirm_password_change_request', ), path( 'password-change/change-user-password/', change_password.ChangePasswordView.as_view(), name='change_password', ), ... ]

That's it for this article. I hope you enjoyed it. Up next is the automated testing and static analysis aspect with GitHub Actions. We'll also try to deploy our application freely on Vercel. See you then.

Outro

Enjoyed this article? Consider contacting me for a job, something worthwhile or buying a coffee ☕. You can also connect with/follow me on LinkedIn and Twitter. It isn't bad if you help share this article for wider coverage. I will appreciate it...

DEV Community