How can I make the authorization check easier?

Question

JavaScript

import React from "react"
function App() {

    let email = ''
    let password = ''
    let alertMessage = ''
    let errors

    const validateForm = () => {
        errors = {}
        let emailSpaces = email.indexOf(' ')
        let passwordSpaces = password.indexOf(' ')

        if (emailSpaces > 0) {
            errors.emailSpaces = 'в поле email пробелы!'
        }
        if (passwordSpaces > 0) {
            errors.passwordSpaces = 'в пароле пробелы!'
        }

        if (!email.length){
            errors.email = 'email не заполнен'
        }
        if (!password.length){
            errors.password = 'пароль не заполнен'
        }
        if(!Object.keys(errors).length){
            console.log({ email, password })
            return true
        }else{
            alertMessage = Object.values(errors)
            alert(alertMessage)
            return false
        }
    }

    const clearForm = () => {
        email = ''
        password = ''
        alert('Поля очищены')
    }

    const detectChangeForm = (event) => {
        switch (event.target.name) {
            case 'email':
                email = event.target.value
                break;
            case 'password':
                password = event.target.value
                break;
            default:
                return false
        }
        validateForm(email, password)
    }

    // я не понял как блокировать автоматическое обновление страницы при submit

    const handleSubmit = () => {
        if(!Object.keys(errors).length){
            console.log({ email, password })
            return true
        }else{
            alertMessage = Object.values(errors)
            alert(alertMessage)
            return false
        }
    }

    return (
        <div style={{padding: 'var(--size-8)'}}>
            <form>
                <input type="email" placeholder={'E-Mail'} name="email" onChange={detectChangeForm} />
                <input type="password" placeholder={'Пароль'} name="password"  onChange={detectChangeForm} />
                <button type="submit" onClick={handleSubmit}>Войти</button>
            </form>
        </div>
    )
}
export default App

Answer 1

Validation is desirable to do on the server side. All these messages that the mail or password are crooked should be issued by the server. Because browser-side scripts can be tricked and sent to your server with abracadabra, which he will successfully gobble up and choke on, since you suddenly don’t have server-side validation.

Answer 2

There is no need to check for spaces at all, because the string has a trim() method that removes all spaces and is better to use it. It seems to me that from the point of view of user experience, this is better, because often you accidentally put spaces yourself, and it's very annoying to manually remove them.
You can block automatic page reloading via https://developer.mozilla.org/ru/docs/Web/API/Even...