request.user returns AnonymousUser in a project with react, django and rest framework

I have a web project what back-end is coded with django and front-end is coded with react.

In my project, i want to create an order to a special user so this part of project needs to know the user but when i used request.user it returned AnonymousUser.

here are the react, axios code and views.py with rest_framework:

react code

    // Hook to save game id and price
    const [all, setAll] = useState({'game': 0, 'price': 0});
    
    // get state
    const location = useLocation();
    const state = location.state;
    
    useEffect(() => {
        setAll({'game': state[0]}, 'price': suggestion);
    }, [])
    
        // To check user confirm suggestion and make order api.
    const orderApi = async (e) => {
        e.preventDefault();
        try {
            // console.log({'state': state[0], 'suggestion': suggestion});
            console.log(all);
            const {status} = await axios.post('http://127.0.0.1:8000/api-1/order/create/', all);
            if (status === 201) {
                console.log('created');
            }
        } catch (err) {
            console.log(err)
        }
    }

views.py

from rest_framework import status
from rest_framework.response import Response
from . import serializer
from rest_framework.decorators import api_view
from . import models
from game.models import Game

@api_view(['GET', 'POST'])
def orderCreate(request):
    
    # Here my program return AnonymousUser
    print(str(request.user) + '\n')
    
    if request.method == 'POST':
    		.......
    		
    orders = models.Order.objects.all()
    serialized = serializer.OrderSerializer(orders, many=True)

    return Response(serialized.data, status=status.HTTP_200_OK)

• To write a clean code i didn't write the front-end code and post method codes in my question.
• Please help to retrieve the user object and create order.

REST API's are stateless, not in a user session.
So there's no user logged on, and Django returns you the Anonymous user.
You will have to pass the user in the post parameters

After several days researching on my question, at the end i solved it.

We can use 2 ways to authenticate our users in django.

1. JWT (Json Web Token)-based authentication.
2. session-based authentication.

I solved my question with the session-based authentication way.

Now you can see here the absolute code of session-based authentication in a simple django and react web project step by step:

1. Start the project and app then install DRF and corsheaders packeages in your terminal:

django-admin startproject authentication
python manage.py startapp api
pip install djangorestframework
pip install django-cors-headers

2. Add the rest_framework, corsheaders and api app to INSTALLED_APPS in settings.py like this:

INSTALLED_APPS = [
    ...
    'corsheaders',
    'rest_framework',
    'api.apps.ApiConfig',
]

3. Allow any host to send request to your django server:

   a) add '*' to ALLOWED_HOSTS variable.

   ALLOWED_HOSTS = ['*']
   

   b) add the corsheaders variables.

   CORS_ALLOW_ALL_ORIGINS = True
   CORS_ALLOW_CREDENTIALS = True
   

   c) add the rest_framework authentication and permissions configurations:

   REST_FRAMEWORK = {
       'DEFAULT_AUTHENTICATION_CLASSES': ['rest_framework.authentication.SessionAuthentication',],
       'DEFAULT_PERMISSION_CLASSES': ['rest_framework.permissions.IsAuthenticated',],}
   

4. In your urls.py in the authentication directory add a new pattern to the urlpatterns list:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    ...
    path('', include('api.a-urls')),
]

5. Create a new python file (a-urls.py) in your api directory and define a urlpatterns list to your api app:

from django.urls import path
from django.views.generic import TemplateView

from . import views

urlpatterns  =[
    path('register/', views.RegisterView.as_view()),
    path('login/', views.LoginView.as_view()),
    path('logout/', views.LogoutView.as_view()),
    path('user/', views.UserView.as_view())
]

6. Create serializers.py file in the api directory and define the serializer classes to register, login and identify user:

from rest_framework import serializers
from django.contrib.auth.models import User
from django.contrib.auth import get_user_model, authenticate
from rest_framework.exceptions import ValidationError

UserModel = get_user_model()

class RegisterSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserModel
        fields = '__all__'

        def create(self, clean_data):
            user_obj = self.model.objects.create_user(email=clean_data['email'],
                                                      password=clean_data['password'])
            user_obj.username = clean_data['username']
            user_obj.save()
            return user_obj


class LoginSerializer(serializers.Serializer):
    username = serializers.CharField()
    email = serializers.EmailField()
    password = serializers.CharField()

    def check_user(self, clean_data):

        user = User.objects.filter(username=clean_data['username'],
                                   email=clean_data['email']).first()

        if not user:
            raise ValidationError('User not found')
        elif not user.check_password(clean_data['password']):
            raise ValidationError('Password incorrect')
        return user


class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserModel
        fields = ('username', 'email')

7. In the views.py file define the register, login and logout classes:

from rest_framework import status, permissions
from rest_framework.authentication import SessionAuthentication
from rest_framework.response import Response
from django.contrib.auth import login, logout, authenticate
from rest_framework.views import APIView
from django.contrib.auth.models import User
from . import serializers
from . import validations
from rest_framework.decorators import api_view


class RegisterView(APIView):
    permission_classes = (permissions.AllowAny,)
    authentication_classes = (SessionAuthentication,)
    def post(self, request):
        print(request.data)
        # Here we can validate entire data
        clean_data = validations.UserValidation(request.data).registerValidation()
        serialized = serializers.RegisterSerializer(data=clean_data)
        if serialized.is_valid():
            user = serialized.create(clean_data)
            if user:
                return Response(data=serialized.data,
                                status=status.HTTP_201_CREATED)
        return Response(status=status.HTTP_400_BAD_REQUEST)


class LoginView(APIView):
    permission_classes = (permissions.AllowAny,)
    authentication_classes = (SessionAuthentication,)

    def post(self, request):
        data = request.data
        clean_data = validations.UserValidation(data).loginValidation()
        serialized = serializers.LoginSerializer(data=request.data)
        if serialized.is_valid(raise_exception=True):
            user = User.objects.filter(username=clean_data['username'], email=clean_data['email']).first()
            user.check_password(clean_data['password'])
            print(user)
            if user:
                login(request, user)
            return Response(serialized.data,
                            status=status.HTTP_202_ACCEPTED)


class LogoutView(APIView):
    def post(self, request):
        logout(request)
        return Response(status=status.HTTP_200_OK)


class UserView(APIView):
    permission_classes = (permissions.IsAuthenticated,)
    # authentication_classes = (SessionAuthentication,)

    def get(self, request):
        print(request.user)
        serialized = serializers.UserSerializer(request.user)
        return Response({'user': serialized.data},
                        status=status.HTTP_200_OK)

8. Also we can validate data in another file with a custome validation class so create a validations.py file:

class UserValidation:
    def __init__(self, data):
        self.data = data

    def registerValidation(self):
        ...
        return self.data

    def loginValidation(self):
        ...
        return self.data

9. Now, you should test your app with the default DRF ui to post and get data in your browser. First go to the http:127.0.0.1:8000/register/ and post a user data. If in inspect> application tab> cookies you can see the csrftoken after registeration like this:

register is ok, and then test the login with default view of DRF. After posting the user data it should save sessionid in cookies like this:

10. If everything in default view of DRF is ok, create a new react app and go to its directory to start your react app:

npx create-react-app frontend
cd frontend
npm start

11. Don't forget to add these codes at the top of your user register, login and logout components:

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.withCredentials = true;

12. After coding your react app components, you should use the npm run build command to get an output directory called build in your frontend directory and add some configurations code to the settings.py in backend:

# Add a new direction to your templates directions
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates',

            # This is new dir:
            os.path.join(BASE_DIR, 'frontend/build'),
        ]
        ....


# Add the static files configuration.
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/build/static'),
]

13. After changing the settings.py file, you should add a new pattern to your urlpatterns in a-urls.py file like this:

from django.views.generic import TemplateView

urlpatterns  =[
    .....
    path('', TemplateView.as_view(template_name='index.html')),
]

Now a base code of backend is ready so if you open 127.0.0.1:8000 in your browser you will see the frontend view with react and an authentication with django.

At the end of my description i want to write a very simple react component to try django authenticatin:

import axios from 'axios';
import {useState} from 'react';

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.withCredentials = true;

const Try = () => {

    const [user, setUser] = useState({'username': 'amiram', 'email': 'example@gmail.com', 'password': 'picodegit'});

    const registerApi = async (e) => {
        e.preventDefault();
        try {
            const status = await axios.post('http://127.0.0.1:8000/register/', user).then((res) => {
                console.log(res);
            });
            if (status.status === 201) {
                console.log('created');
            }
        } catch (err) {
            console.log(err);
        }
    }

    const loginApi = async (e) => {
        e.preventDefault();
        try {
            const status = await axios.post('http://127.0.0.1:8000/login/', user);
            if (status.status === 202) {
                console.log('accepted');
            }
        } catch (err) {
            console.log(err);
        }
    }

    const logoutApi = async (e) => {
        e.preventDefault();
        try {
            const status = await axios.post('http://127.0.0.1:8000/logout/');
            if (status.status === 200) {
                console.log('logged out');
            }
        } catch (err) {
            console.log(err);
        }
    }

    const check = async (e) => {
        e.preventDefault();
        try {
            const status = await axios.get('http://127.0.0.1:8000/user/').then((res) => {
                console.log(res.data);
            })
            if (status.status === 201) {
                console.log('got data');
            }
        } catch (err) {
            console.log(err);
        }
    }

    return (
        <>
            <div>hello</div>
            <button onClick={registerApi}>register</button>
            <button onClick={loginApi}>login</button>
            <button onClick={logoutApi}>logout</button>
            <button onClick={check}>check</button>
        </>
    )
}

export default Try;

As @stefano mentioned, REST is stateless. By default request.user will be AnonymousUser because Django isn't implicitly aware of the user making the request.
If this special user is constant you can probably create a small helper function to return it.

def get_special_user():
    special_user_id = 1
    return User.objects.get(id=special_user_id)

Then call this function in your view. Otherwise, you will have to set up authentication. I recommend django rest auth