Error while trying to connect Django With ReactNative

Question

I am building a React Native app with Django as the backend. I have set up the login screen in React Native and configured JWT authentication with rest_framework_simplejwt in Django. However, I encounter an error when trying to log in.

Within the login screen:

    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState("");

    const handleSubmission = async () => {
        try {
            const response = await axios.post("http://127.0.0.1:8080/api/token/", {
                username,
                password,
            });
            if (!response || !response.data) {
                throw new Error("Invalid server response");
            }
            await AsyncStorage.setItem("accessToken", response.data.access);
            await AsyncStorage.setItem("refreshToken", response.data.refresh);
            navigation.navigate("Tab");
        } catch (error) {
            console.error("error", error);
            const errorMessage = error.response && error.response.data && error.response.data.message
                ? error.response.data.message
                : "Whoops! Log In Failed, please try again later 😅.";
            setError(errorMessage);
        }
    };

In Django, views:

@api_view(['POST'])
@permission_classes([IsAuthenticated])
def create_user(request):
    serializer = CreateUserSerializer(data=request.data)
    if serializer.is_valid():
        serializer.save()
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response({'message': "Whoops! error while creating user 🫣", 'error': serializer.errors}, status=status.HTTP_400_BAD_REQUEST)

Serializers:

class CreateUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['username', 'password']

    def create(self, validated_data):
        validated_data['password'] = make_password(validated_data.get('password'))
        return super(CreateUserSerializer, self).create(validated_data)

and I set up cors in settings.py so that I can make API request on my machine:

INSTALLED_APPS = [
    'corsheaders', # DEV ONLY
    ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # DEV ONLY
    ...
]

CORS_ALLOW_ALL_ORIGINS = True # DEV ONLY

The error I'm getting is: LOG error [TypeError: Cannot read property 'status' of undefined]

What I've tried:

Ensured corsheaders is installed and properly configured.
Verified that the backend endpoint http://127.0.0.1:8080/api/token/ is correct and reachable.
Logged the complete error object.

How can I resolve the TypeError: Cannot read property 'status' of undefined error and ensure that my login functionality works correctly?

gabekutner · Accepted Answer · 2024-08-03 20:35:44Z

0

To connect react native to django server, run the server on your ip instead of localhost. This assumes your ip is 10.0.0.49

python manage.py runserver 10.0.0.49:8000

Then change the frontend request to

const response = await axios.post("http://10.0.0.49:8080/api/token/", {
            username,
            password,
        });

I had this problem with my django rn project too a while back, very frustrating

answered Aug 3, 2024 at 20:35

gabekutner

425 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error while trying to connect Django With ReactNative

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related