How can I send a hashed password from Vue.js to a custom Django REST API using AbstractBaseUser?

I am facing difficulties when trying to create users by sending data from Vue.js to the Django REST Framework. I’ve developed a custom user model based on AbstractBaseUser and executed successful migrations, allowing it to connect with MySQL, as well as Vue.js. The python manage.py createsuperuser command is functioning properly. When this command is executed, the password field is automatically stored as a hashed string in the database. However, when utilizing the POST request from Vue.js to create a user, the password is stored in its raw (non-hashed) form, failing to adhere to my Django setup which should have is_admin = False and is_active = True by default. The boolean fields are getting set to ‘False’ regardless of my configuration with the Vue axios method. Below is an example of my user model from ./Users/models.py and my user manager as well as the relevant Vue.js sign-up code using axios, demonstrating the attempt to create a new user.

To ensure passwords are hashed when creating users through a Vue.js app connecting to Django REST API with a custom user model based on AbstractBaseUser, you should handle the password hashing on the server-side. When a password is received in its raw form via a POST request, Django should hash it before saving it to the database. Here's how you can achieve that:

Django Setup

First, in your custom user model, you should override the create_user method in your user manager to make sure the password is hashed. Below is a snippet to guide you through this process:

from django.contrib.auth.models import BaseUserManager

class CustomUserManager(BaseUserManager):
    def create_user(self, email, password=None, **extra_fields):
        if not email:
            raise ValueError('The Email field must be set')
        email = self.normalize_email(email)
        user = self.model(email=email, **extra_fields)
        user.set_password(password)
        user.save(using=self._db)
        return user

    def create_superuser(self, email, password=None, **extra_fields):
        extra_fields.setdefault('is_admin', True)
        extra_fields.setdefault('is_active', True)

        return self.create_user(email, password, **extra_fields)

The key part is the set_password() method, which hashes the password before storing it in the database.

Vue.js Configuration

On the Vue.js side, ensure that you are sending the necessary data fields in the correct format. Here's an example of how you might be using axios to create a user:

import axios from 'axios';

export default {
  methods: {
    signUp(userDetails) {
      axios.post('your-api-endpoint', {
        email: userDetails.email,
        password: userDetails.password,
        // send any other necessary fields
      })
      .then(response => {
        console.log('User successfully created', response.data);
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
    }
  }
}

Ensure that the field names in your POST request match those expected by your Django API.

Boolean Fields Default

To enforce boolean defaults such as is_active and is_admin on your Django model, ensure they are properly set in your model definition and handler methods:

class User(AbstractBaseUser):
    # other fields
    is_active = models.BooleanField(default=True)
    is_admin = models.BooleanField(default=False)

    objects = CustomUserManager()

With these configurations, your Django API should correctly hash the password and handle boolean defaults as intended.