How to Send Authentication Token from Frontend using Both Fetch & Ajax to Restful API Backend?

I am currently working with django restframwork, I am on my training period. I created a api for lottery management system using DRF and in this restful api i added IsAuthenticated permission class. Now i am creating demo project for this api, now i am using ajax for requests & sending authorization using btoa. but i am sure that this is not a professional method. I wanted to learn how to send the authorization token to backend with username and password. & also how to achieve same in reactjs as i am little bit familiar with react js and working on it as well.

function ajaxCall(type, url, data, callback) {
  /**Common Method to handle all the Ajax Requests */
  $.ajax({
    url: url,
    type: type,
    data: data,
    headers: {
    "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
  },
    success: function (response, status, xhr) {
      console.log(response);
      console.log(xhr);
      if (xhr.status != 204) {
        if (callback) {
          callback(response);
        }
      }
    },
    error: function (xhr, status, error) {
      console.error("Error occurred:", xhr.responseText, status, error);
    },
  });
}