how to put authentication by username or email with django

Question

i created a django app in which i set email authentication and passwords so when people try to login to this platform they have problems because they don't have no email or others who don't even know what email means, so I want to put authentication by email or by username with Django but I can't

i tried this in my form file

class LoginForm(forms.Form):
    username_or_email = forms.CharField(
        max_length=50, label="Nom d'utilisateur ou Email")
    password = forms.CharField(
        max_length=50, label="mot de passe ", widget=forms.PasswordInput(attrs={'class': 'password-input'}))

my views :

def connect(request):
    form = LoginForm()
    error = ''
    next = request.GET.get('next')

    if request.method == 'POST':
        form = LoginForm(request.POST)
        if form.is_valid():
            username_or_email = form.cleaned_data['username_or_email']
            password = form.cleaned_data['password']

            user = authenticate(
                request, email=username_or_email, password=password)

            if user is None:
                user = authenticate(
                    request, username=username_or_email, password=password)

            # Si l'utilisateur est trouvé, alors connectons-le
            if user:
                login(request, user)
                print('ready')
                return redirect(next or 'account')
     else:
            error = 'Identifiants invalides'

    return render(request, 'user/loginpage.html', {'form': form, 'error': error, 'next': next})

html:

 <form class="singin-form" method='POST'>
                {% csrf_token %}
                {{error}}
              <div class="form-group">
                <label>Email ou Nom d'utilisateur </label>
                <input type="text" class="form-control" name="username_or_email" placeholder="annie@example.com ou roystack"  >
                
              </div>
              <div class="form-group">
                <label for="password">Mot de passe</label>
                <input type="password" class="form-control" name="password" placeholder="Saisissez un mot de passe" id="password">
                <button type="button" id="toggle-password"   >afficher le mot de passe </button>
              </div>
              <div class="form-group d-flex align-items-center justify-content-between">
                <button type="submit" class="lax-btn btn-bg-primary submit-btn">Connexion</button>
                <a href="motdepasse.html" class="forgot-btn">Mot de passe oublié?</a>
              </div>
            </form>