How to delete authentication token when logging out with react native?

I am using django rest framework and react native for the front-end. I am trying to delete the authentication token when a user is logging out in the front-end. But apparently the token stil exist when the logout function is triggered. Because the token still exists in the django admin panel.

So for the logout I have this service:

export const logoutRequest = async () => {
	try {
		const response = await fetch("http://192.168.1.65:8000/api/user/logout/");
		await removeToken();
		return await response.json();
	} catch (error) {
		console.log(error);
		throw error;
	}
};

and removeToken:

export const removeToken = async () => {
	try {
		await AsyncStorage.removeItem("Token");
	} catch (error) {
		console.log("Renove authentication token failed :", error?.message);
	}
};

So when a user logs in I see that a token is created in the django admin panel. But when a user logs out in the front-end I don't see in the django admin panel that the token has been removed. But the api call for the logout works. I tested this in swagger. The token has been removed in the django admin panel.

Question: how to remove the authentication token with react native?

When I trigger the log out function in react-native. I see this message in the backend:

Unauthorized: /api/user/logout/
[25/May/2023 10:35:54] "GET /api/user/logout/ HTTP/1.1" 401 58

To properly logout from the Django application, your request should include authentication token too, something like this (not necessarely this way, it depends on your implementation):

const token = localStorage.getItem("authToken");
const response = await fetch("http://192.168.1.65:8000/api/user/logout/", {
  withCredentials: true,
  credentials: "include",
  headers: {
    "Authorization": `token ${token}`, // Something like this, depending on your implementation
  },
});

Without it, the Django application doesn't know which user to logout.

This is why you are getting the 401 Unauthorized error.