Python Django & Next.js: JWT Authentication with HttpOnly Cookies | Complete Project Tutorial

Video Description

In this video, we'll build a secure, token-based authentication system using Django for the backend and Next.js for the frontend. We’ll cover everything from setting up a custom user model and APIs to implementing access token refresh, blacklisting, and seamless cookie-based authentication in the frontend using Axios. ⁹ What We’ll do: - Create a Custom User Model to authenticate users with email. - Use Django REST Framework (DRF) for building APIs. - Implement JWT-based Authentication with HTTP-only cookies using Simple JWT. - Enable token blacklisting during logout for security. - Set up a token refresh endpoint to automatically refresh access tokens. - Build a responsive Next.js frontend with login, registration, and user dashboards. - Configure Axios to handle cookies and manage user authentication seamlessly. - Use CORS headers to securely connect the frontend and backend. Project Features 🛠️: - Custom User Authentication: Email-based login system with a custom user model. - Secure Token Management: Store tokens in HTTP-only cookies to prevent XSS attacks. - API Endpoints: Register, Login, Logout, Token Refresh, and User Info retrieval. - Logout with Token Blacklisting: Enhance security by invalidating refresh tokens. - Automatic Token Refresh: Refresh access tokens seamlessly in the frontend. - Frontend Integration Timestamps ⏱️: 00:00 Introduction and Objectives 00:40 Project Setup and Prerequisites 01:34 Install Django & Create Project 02:44 Create and Configure Users App 03:14 Define Custom User Model 05:45 Install DRF and Create User Serializer 07:53 User API View - RetrieveUpdateAPIView 09:46 Configure URLs 12:12 Registration Serializer 13:29 Register User View 15:51 Custom User Manager 21:05 Create Superuser and Log into Admin 24:21 Login User Serializer and API View 27:57 Install and Configure Simple JWT 30:19 Generate Tokens and Set Cookies 34:01 Logout with Token Blacklisting 39:12 CookieJWTAuthentication Class 45:28 Token Refresh Endpoint 49:38 CORS Configuration 51:08 Create Next.js App 53:44 Install Axios and Write Auth Functions 55:35 Frontend: Register User 01:02:36 Frontend: Login User 01:06:22 Frontend: Logout User 01:09:46 Check if User is Authenticated 01:12:01 Frontend: Token Refresh Implementation Technologies Used 💻: Backend: Django, Django REST Framework, Simple JWT Frontend: Next.js, React.js, Axios Tools: Python, Node.js, Tailwind CSS 🔗 Django Docs: https://docs.djangoproject.com/ 🔗 DRF Docs: https://www.django-rest-framework.org/ 🔗 Next.js Docs: https://nextjs.org/ 🔗 Simple JWT Docs: https://django-rest-framework-simplejwt.readthedocs.io/ 🔗Github Repo: https://github.com/PikoCanFly/JWT-HTTPCookies-Django-DRF-NEXT.JS.git Who Is This For? This tutorial is perfect for beginner to advanced developers who want to: Build a modern, full-stack authentication system. Learn how to integrate Django REST Framework with Next.js. Implement secure JWT authentication with token refresh capabilities. Enhance their skills in building scalable backend APIs and responsive frontends. 🧡 If you have found this content useful consider becoming my Patreon: 💜 https://www.patreon.com/PikoCanFly ----- If you're considering hosting your app on DigitalOcean, it’d be awesome if you used my referral link! You'll get $200 in free credits, and I'll get $25. Here is the link: https://m.do.co/c/58e570dc13ea #Django #djangorestframework #Authentication #JWT #RESTAPI #httpCookie #nextjs