A complete authentication system built with Django REST Framework and React that shows how to handle user registration, login, and protected routes with secure cookie based authentication.
This project is a full stack web application that handles user authentication. Users can create accounts, log in, and access protected pages that are only visible when logged in. The backend is built with Django and provides a REST API, while the frontend is built with React and handles the user interface.
The main purpose of this project is to demonstrate how to implement secure authentication in a modern web application using best practices like httpOnly cookies for token storage and CSRF protection for all state changing requests.
User registration with username, email, and password User login and logout functionality Protected dashboard that only logged in users can see JWT tokens stored in httpOnly cookies for security CSRF protection on all API requests Password validation and error handling Global authentication state management with React Context Responsive navigation bar that updates based on login status
Backend Django Django REST Framework django cors headers for handling cross origin requests djangorestframework simplejwt for JWT authentication SQLite database
Frontend React React Router DOM for navigation Axios for API communication React Context API for state management
This application takes security seriously. JWT access and refresh tokens are stored in httpOnly cookies which means JavaScript cannot read them. This protects against cross site scripting attacks. The application also uses CSRF tokens for all POST, PUT, and DELETE requests to prevent cross site request forgery attacks. SameSite cookies are set to Lax to provide additional protection.
The backend folder contains the Django project with the authentication API. The api app handles all authentication endpoints including registration, login, logout, and user information. The frontend folder contains the React application with components for the navigation bar, login page, registration page, dashboard, and a private route component that protects pages from unauthorized access.
The React application uses a central authentication context that makes user data and authentication functions available to any component that needs them. The api service file handles all communication with the Django backend.
To run this project on your computer, you will need Python and Node.js installed.
First set up the backend. Create a virtual environment and activate it. Install Django and the required packages. Run the migrations to create the database tables. Then start the Django development server.
For the frontend, navigate to the frontend folder and install the Node dependencies using npm. Once the packages are installed, start the React development server.
The backend will run on port 8000 and the frontend will run on port 3000. Make sure both servers are running for the application to work.
The backend provides several API endpoints for authentication. The register endpoint accepts username, password, and email to create a new user account. The login endpoint authenticates existing users and returns JWT tokens in cookies. The logout endpoint clears the authentication cookies. The user endpoint returns information about the currently authenticated user. The check auth endpoint verifies whether a user is currently logged in.
Once both servers are running, open your browser to localhost port 3000. You will see the home page with a navigation bar. Click the Register link to create a new account. Fill in the required information and submit the form. You will be automatically logged in and redirected to the dashboard.
Try logging out and logging back in with your credentials. If you try to access the dashboard while logged out, you will be redirected to the login page.
This project is great for learning how to build secure authentication systems with Django and React. You will understand how to set up JWT authentication with cookie storage, how to protect routes in React, how to manage global state with Context API, and how to handle CSRF protection in a modern web application.
The code is well organized and easy to follow. Each component has a specific responsibility and the authentication logic is centralized in the context provider.
If you get a CORS error, make sure the Django server is running and the CORS settings are correctly configured in settings.py. The allowed origins should include localhost port 3000.
If you see network errors, check that the Django server is running on port 8000.
If registration fails, verify that your password is at least eight characters long and that the username is not already taken.
If cookies are not being sent, ensure that withCredentials is set to true in your axios configuration and that CORS allow credentials is set to True in Django.
You can extend this project by adding email verification for new users, implementing a forgot password feature, adding user profile editing, integrating social login options like Google or GitHub, or deploying the application to a cloud provider.
This project was created by Anthony Karanja. Feel free to reach out with questions or suggestions.
This project is open source and available for anyone to use, modify, and distribute.