🚀 Djoser Authentication Demo

---

📖 About

A modern full-stack authentication system built with Django REST Framework, Djoser, JWT, and React + TypeScript.

This project demonstrates a production-style authentication workflow with secure JWT authentication, email activation, password reset, automatic token refresh, protected routes, modern UI, and clean architecture.

---

📸 Screenshots

🏠 Home

---

🔐 User Register & Login

---

⚙️ dashboard

---

👤 Profile Page

---

🔑 Change Password

---

Reset Password

---

🏗 Frontend Architecture

A detailed architecture document is available here:

📄 Frontend Architecture

---

✨ Features

🔐 Authentication

• User Registration
• Email Account Activation
• Login using JWT
• Logout
• Automatic JWT Refresh
• Protected Routes
• Guest Routes
• Persistent Authentication
• Session Restoration
• Authorization Guards

---

👤 User Management

• View Current Profile
• Edit Profile
• Change Password
• Forgot Password
• Password Reset via Email
• Resend Activation Email

---

⚙️ Backend Features

• Django REST Framework
• Djoser Authentication
• JWT Authentication
• Email Activation
• Password Reset Flow
• Token Blacklisting Support
• CORS Configuration
• SMTP Email Configuration
• Environment Variables

---

🎨 Frontend Features

• React 19
• TypeScript
• Vite
• TailwindCSS v4
• shadcn/ui
• Responsive Layout
• Dark Mode
• Light Mode
• Beautiful Authentication Pages
• Modern Dashboard
• Error Handling
• Loading States

---

🔄 API Features

• Axios Instance
• Request Interceptors
• Response Interceptors
• Automatic Access Token Refresh
• Retry Failed Requests
• Secure Token Storage
• Centralized API Layer

---

🏗 Project Architecture

                React Frontend
                       │
                       │
                 Axios Instance
                       │
         ┌─────────────┴─────────────┐
         │                           │
 Access Token                  Refresh Token
         │                           │
         ▼                           ▼
 Django REST Framework + Djoser + JWT
         │
         ▼
      SQLite Database

---

🔄 Authentication Flow

User Registration
        │
        ▼
Activation Email Sent
        │
        ▼
User Clicks Activation Link
        │
        ▼
Account Activated
        │
        ▼
Login
        │
        ▼
Access Token + Refresh Token
        │
        ▼
Protected Pages
        │
        ▼
Access Token Expired
        │
        ▼
Automatic Refresh
        │
        ▼
Retry Original Request

---

📂 Project Structure

Djoser_SimpleApp/
│
├── djoser_api/
│   ├── manage.py
│   ├── api.http
│   ├── schema.yml
│   └── djoser_api/
│
├── frontend/
│   ├── src/
│   │
│   ├── api/
│   ├── components/
│   ├── context/
│   ├── hooks/
│   ├── pages/
│   ├── routes/
│   ├── services/
│   ├── types/
│   └── utils/
│
└── README.md

---

📚 API Endpoints Covered

Authentication

Method	Endpoint
POST	/auth/users/
POST	/auth/users/activation/
POST	/auth/users/resend_activation/
POST	/auth/jwt/create/
POST	/auth/jwt/refresh/
POST	/auth/jwt/verify/
POST	/auth/jwt/logout/

---

User

Method	Endpoint
GET	/auth/users/me/
PATCH	/auth/users/me/

---

Password

Method	Endpoint
POST	/auth/users/set_password/
POST	/auth/users/reset_password/
POST	/auth/users/reset_password_confirm/

---

🛠 Tech Stack

Backend

• Python 3.12
• Django
• Django REST Framework
• Djoser
• SimpleJWT

---

Frontend

• React 19
• TypeScript
• Vite
• TailwindCSS v4
• shadcn/ui
• Axios
• React Router

---

⚙️ Installation

Clone Repository

git clone https://github.com/yourusername/Djoser_SimpleApp.git

cd Djoser_SimpleApp

---

🐍 Backend Setup

cd djoser_api

python -m venv .venv

Activate environment

Linux

source .venv/bin/activate

Windows

.venv\Scripts\activate

Install dependencies

pip install -r requirements.txt

Run migrations

python manage.py migrate

Start server

python manage.py runserver

---

⚛️ Frontend Setup

cd frontend

npm install

npm run dev

---

🔑 Environment Variables

Backend (.env)

SECRET_KEY=your_secret_key

EMAIL_USER=your_email@gmail.com

EMAIL_PASS=your_app_password

FRONTEND_URL=http://localhost:5173

---

Frontend (.env)

VITE_API_URL=http://127.0.0.1:8000

---

📌 Security Features

• JWT Authentication
• Access Token Rotation
• Refresh Token
• Token Blacklisting Ready
• Protected API Endpoints
• Route Guards
• Email Verification
• Password Validation
• CORS Protection

---

📖 What You'll Learn From This Project

This project demonstrates:

• Building a complete authentication system
• Connecting React with Django REST Framework
• Using Djoser without writing authentication logic manually
• JWT Authentication
• Automatic Token Refresh
• Axios Interceptors
• Protected Routes
• Guest Routes
• Context API
• Custom Hooks
• Service Layer Architecture
• Modern Folder Structure
• Environment Variables
• Production Ready Project Organization

---

🚀 Future Improvements

• Custom User Model
• Social Authentication (Google/GitHub)
• Two-Factor Authentication (2FA)
• User Avatar Upload
• Celery Email Queue
• Redis Integration
• Docker Support
• CI/CD Pipeline
• PostgreSQL Deployment
• Nginx + Gunicorn
• GitHub Actions

---

📄 License

This project is intended for educational purposes and learning Django REST Framework, Djoser, JWT authentication, and React integration.

---

👨‍💻 Author

Mohammed Al-Basha

Backend & Frontend Developer

• Django
• Django REST Framework
• React
• TypeScript
• REST APIs

---

⭐ If you found this project helpful, don't forget to give it a star!