https://github.com/yevhenbk/csrf-fetch
Set up CSRF protection in django & store a token in a browser cookie via fetch using Next.js
https://github.com/yevhenbk/csrf-fetch
auth csrf-token django nextjs
Last synced: about 2 months ago
JSON representation
Set up CSRF protection in django & store a token in a browser cookie via fetch using Next.js
- Host: GitHub
- URL: https://github.com/yevhenbk/csrf-fetch
- Owner: Yevhenbk
- Created: 2024-03-19T20:42:21.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-09-16T23:41:41.000Z (9 months ago)
- Last Synced: 2025-09-17T01:30:24.154Z (9 months ago)
- Topics: auth, csrf-token, django, nextjs
- Language: TypeScript
- Homepage:
- Size: 1.56 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSRF Protection Django
## Complete Guide
For a detailed, step-by-step tutorial on this project, see the Medium post:
[Building Secure Authentication: Django + Next.js with CSRF Protection](https://medium.com/@yevhenbk/building-secure-authentication-django-next-js-with-csrf-protection-ebbd096dfaa5)
## Overview
Although implementing authentication in Next.js directly considered good practice and you may benefit from generating JWT tokens and storing them securely in HTTP-only cookies, which would simplify
frontend development, however, it may not be suitable for applications with complex authorization requirements or sensitive data, as all logic is exposed to the client. One way of doing that would be
setting up authentication endpoints and managing user sessions on a backend server. But how do we handle cross-origin requests (CORS) and manage authentication tokens securely, while integrating with
Next.js?
In this simple example we set up basic authentication methods with CSRF protection in django, after which, as mentioned previously, we handle CORS via fetching CSRF token from our server and storing its
value in a browser cookie header that later will be used to send requests and perform authentication operations on the client; for this, we will use Next 14 server actions, AuthContext, and custom hooks.
> In this example, we use store management and custom hooks (with useState & useEffect) to manage authentication and > CSRF tokens. This requires certain components to be marked with "use client" at the top. It's important to note that "use client" does not mean the component is only rendered on the client. Components with "use client" can still be server-side rendered (SSR, ISR, or SSG) by Next.js, and then hydrated on the client for interactivity. The key difference is that client components can use React state, effects, and browser APIs, while server components cannot. If you do not use "use client", your component is a server component: it runs only on the server, cannot use React state or effects, and is sent to the browser as static HTML/JSON with no interactivity or hydration. In summary: use "use client" for components that need interactivity, state, or browser APIs (like authentication and CSRF handling). Use server components for static or data-fetching logic that does not depend on the browser or user input.
## Preview
### Main Page
### Signup Page
### Login Page
## Technologies Used
- Django
- Django REST Framework
- Requests library
- Next 14
## Setup Instructions
To start the app run these commands inside the project
> On the server
```bash
pip install -r requirements.txt
python manage.py migrate
python manage.py runserver
```
> On the client
```bash
npm install
npm run dev
```