diff --git a/README.md b/README.md index 39ac1b8..336318a 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,296 @@ -# django-nextjs-auth -A complete implementation of an authentication app using Django and Next.JS +# Django Next.js Authentication + +A complete full-stack authentication implementation using Django REST Framework and Next.js with NextAuth.js. This project demonstrates a modern approach to building secure authentication systems with a Django backend API and a Next.js frontend. + +## ๐ŸŒŸ Features + +- **User Authentication**: Complete email-based authentication flow +- **Session Management**: Secure session handling with NextAuth.js +- **Token-based Auth**: Django REST Framework token authentication +- **User Registration**: New user registration with django-allauth +- **Protected Routes**: Middleware-protected routes in Next.js +- **CORS Configured**: Properly configured CORS for cross-origin requests +- **Modern UI**: Clean, responsive UI built with Tailwind CSS +- **Type Safety**: Full TypeScript support on the frontend + +## ๐Ÿ› ๏ธ Tech Stack + +### Backend +- **Django** 4.2.6 - Python web framework +- **Django REST Framework** - RESTful API toolkit +- **dj-rest-auth** - Authentication REST APIs +- **django-allauth** - User registration and authentication +- **django-cors-headers** - CORS handling +- **SQLite** - Database (default, easily swappable) + +### Frontend +- **Next.js** 14.0.0 - React framework +- **NextAuth.js** 4.24.4 - Authentication for Next.js +- **TypeScript** - Type-safe JavaScript +- **Tailwind CSS** - Utility-first CSS framework +- **Axios** - HTTP client for API requests + +## ๐Ÿ“‹ Prerequisites + +Before you begin, ensure you have the following installed: +- **Python** 3.8 or higher +- **Node.js** 18.x or higher +- **npm** or **yarn** package manager +- **pip** - Python package manager + +## ๐Ÿš€ Getting Started + +### 1. Clone the Repository + +```bash +git clone https://github.com/teamhashed/django-nextjs-auth.git +cd django-nextjs-auth +``` + +### 2. Backend Setup (Django) + +#### Install Python Dependencies + +```bash +cd backend +python -m venv .venv +source .venv/bin/activate # On Windows: .venv\Scripts\activate +pip install -r requirements.txt +``` + +#### Configure Environment Variables + +Create a `.env` file in the `backend` directory: + +# โš ๏ธ WARNING: Example values below are for local development only. +# DO NOT use these values in production! Replace all values with secure, production-appropriate settings. + +```env +DEBUG=True +SECRET_KEY=CHANGE-ME-IN-PRODUCTION +HTTP_ROUTE=rest/ +CORS_ALLOWED_HOSTS=CHANGE-ME-IN-PRODUCTION +``` + +**Important**: Generate a secure `SECRET_KEY` for production. You can generate one using: +```bash +python -c "from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())" +``` + +#### Run Database Migrations + +```bash +python manage.py migrate +``` + +#### Create a Superuser (Optional) + +```bash +python manage.py createsuperuser +``` + +#### Start the Django Development Server + +```bash +python manage.py runserver +``` + +The backend API will be available at `http://localhost:8000/rest/` + +### 3. Frontend Setup (Next.js) + +#### Install Node Dependencies + +Open a new terminal and navigate to the frontend directory: + +```bash +cd frontend +npm install +# or +yarn install +``` + +#### Configure Environment Variables + +Create a `.env.local` file in the `frontend` directory: + +```env +NEXTAUTH_URL=http://localhost:3000 +NEXTAUTH_SECRET=REPLACE_ME_WITH_A_SECURE_SECRET +NEXTAUTH_BACKEND_URL=REPLACE_ME_WITH_YOUR_BACKEND_URL +``` + +**Important**: Generate a secure `NEXTAUTH_SECRET`: +```bash +openssl rand -base64 32 +``` + +#### Start the Next.js Development Server + +```bash +npm run dev +# or +yarn dev +``` + +The frontend will be available at `http://localhost:3000` + +## ๐Ÿ“ Project Structure + +``` +django-nextjs-auth/ +โ”œโ”€โ”€ backend/ # Django backend +โ”‚ โ”œโ”€โ”€ creds/ # Custom user authentication app +โ”‚ โ”‚ โ”œโ”€โ”€ api/ # API views and serializers +โ”‚ โ”‚ โ”œโ”€โ”€ models.py # Custom User model +โ”‚ โ”‚ โ””โ”€โ”€ ... +โ”‚ โ”œโ”€โ”€ www/ # Main Django project +โ”‚ โ”‚ โ”œโ”€โ”€ settings.py # Django settings +โ”‚ โ”‚ โ”œโ”€โ”€ urls.py # URL configuration +โ”‚ โ”‚ โ””โ”€โ”€ ... +โ”‚ โ”œโ”€โ”€ manage.py # Django management script +โ”‚ โ””โ”€โ”€ requirements.txt # Python dependencies +โ”‚ +โ”œโ”€โ”€ frontend/ # Next.js frontend +โ”‚ โ”œโ”€โ”€ app/ # Next.js app directory +โ”‚ โ”‚ โ”œโ”€โ”€ api/ # API routes +โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ auth/ # NextAuth configuration +โ”‚ โ”‚ โ”œโ”€โ”€ page.tsx # Home page +โ”‚ โ”‚ โ”œโ”€โ”€ layout.tsx # Root layout +โ”‚ โ”‚ โ””โ”€โ”€ globals.css # Global styles +โ”‚ โ”œโ”€โ”€ middleware.ts # Next.js middleware for auth +โ”‚ โ”œโ”€โ”€ package.json # Node dependencies +โ”‚ โ””โ”€โ”€ ... +โ”‚ +โ”œโ”€โ”€ .gitignore +โ”œโ”€โ”€ LICENSE +โ””โ”€โ”€ README.md # This file +``` + +## ๐Ÿ”Œ API Endpoints + +The Django backend exposes the following API endpoints: + +### Authentication Endpoints + +- **POST** `/rest/api/v1/auth/login/` - User login +- **POST** `/rest/api/v1/auth/logout/` - User logout +- **POST** `/rest/api/v1/auth/register/` - User registration +- **GET** `/rest/api/v1/auth/user/` - Get current user details +- **POST** `/rest/api/v1/auth/password/change/` - Change password +- **POST** `/rest/api/v1/auth/password/reset/` - Request password reset +- **GET** `/rest/api/v1/auth/check-token/` - Validate authentication token + +### Admin Panel + +Access the Django admin panel at: `http://localhost:8000/rest/admin/` + +## ๐Ÿ” Authentication Flow + +1. **User Registration/Login**: User submits credentials through Next.js frontend +2. **API Request**: Frontend sends credentials to Django backend via NextAuth +3. **Token Generation**: Django validates credentials and returns an authentication token +4. **Session Creation**: NextAuth stores the token in a secure session +5. **Protected Routes**: Middleware checks authentication status before rendering pages +6. **API Calls**: Authenticated requests include the token in headers + +## ๐ŸŽจ Customization + +### Customizing the User Model + +The custom user model is defined in `backend/creds/models.py`. You can extend it with additional fields: + +```python +class User(AbstractUser): + email = models.EmailField(unique=True) + # Add your custom fields here + phone_number = models.CharField(max_length=15, blank=True) + bio = models.TextField(blank=True) +``` + +Remember to create and run migrations after making changes: +```bash +python manage.py makemigrations +python manage.py migrate +``` + +### Styling + +The frontend uses Tailwind CSS. Customize the theme in `frontend/tailwind.config.ts`. + +## ๐Ÿงช Testing + +### Backend Tests + +```bash +cd backend +python manage.py test +``` + +### Frontend Tests + +```bash +cd frontend +npm run test +# or +yarn test +``` + +## ๐Ÿšข Deployment + +### Backend Deployment + +1. Set `DEBUG=False` in your environment variables +2. Generate a strong `SECRET_KEY` +3. Configure your production database +4. Set up proper `ALLOWED_HOSTS` +5. Collect static files: `python manage.py collectstatic` +6. Use a production WSGI server like Gunicorn or uWSGI + +### Frontend Deployment + +The easiest way to deploy the Next.js frontend is using [Vercel](https://vercel.com): + +```bash +cd frontend +npm run build +``` + +Alternatively, deploy to any platform that supports Node.js applications. + +### Environment Variables for Production + +Ensure all environment variables are properly set in your production environment: +- Update `NEXTAUTH_URL` to your production domain +- Set strong secrets for `SECRET_KEY` and `NEXTAUTH_SECRET` +- Configure `CORS_ALLOWED_HOSTS` with your frontend domain +- Update `NEXTAUTH_BACKEND_URL` to your backend API URL + +## ๐Ÿค Contributing + +Contributions are welcome! Please feel free to submit a Pull Request. + +1. Fork the repository +2. Create your feature branch (`git checkout -b feature/AmazingFeature`) +3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) +4. Push to the branch (`git push origin feature/AmazingFeature`) +5. Open a Pull Request + +## ๐Ÿ“ License + +This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details. + +## ๐Ÿ™ Acknowledgments + +- Django REST Framework documentation +- Next.js documentation +- NextAuth.js documentation +- django-allauth for authentication functionality + +## ๐Ÿ“ง Support + +For questions or issues, please open an issue on the GitHub repository. + +--- + +**Note**: This is a development setup. For production use, ensure you follow security best practices, use environment-specific configurations, and properly secure your secrets.