Laravel and Vue authentication form reload on failed login

Question

I'm new on laravel 5.8 and Vue and I'm using veeValidate and a basic FORM to login having:

method="POST" action="/login" and values: email, password and _token for csrf_token

and a button for submission like that:

<v-btn>@click="validate">Login</v-btn>

When user click on button the vue method validate is invoked:

  methods: {
        validate() {
            this.$validator.validateAll().then((result) => {
                if (result) {
                    //Manually submit form if not errors
                    document.getElementById("login_form").submit();
                } 
            })
        },
    }

This method run the veeValidate validator and if true then the form is submitted (POST to the action path). On error it update the frontend errors alert (ie. missing data or password too short).

The route redirect the POST request to the Laravel's Controller Auth/LoginController@login which has the protected $redirectTo = '/welcome';

$redirectTo is the landing page in case of no errors (Login). But if validator fail it redirect to the form page which is reloaded with no alerts.

I like the simple flow but I would like to show the failed backend reasons (IE: any feedback or login attempts);

How can I get the LoginController@login bad response to show a message into the vue component?

You should not show reasons like "User not found" oder "wrong password for that user" because it would simplify brute force attacks a lot. — PKeidel
You can pass the flag value if there is an error and an error message from backend. Then display that appropriate message in your form. — Riddhi
Thanks,I know that. It's just a sample. But I need a feedback instead of a plain refresh. — Uncoke

Patrick Hollweck Patrick Hollweck · Accepted Answer · 2019-05-22T09:29:44

If you want a more custom login form submition behavior you will need to do the Http request manually.

To do that hook into the form submit event

<form v-on:submit.prevent="onFormSubmit">

Note the lack of an action or method attribute! You do not need this when using this approach.

When handling the submit you simply do the Http request manually.

methods: {
    onFormSubmit() {
        const csrfToken = document.querySelector("meta[name="_token"]").getAttribute("content");

        fetch("/login", {
            method: "POST",
            headers: new Headers({
                "Content-Type": "x-www-form-urlencoded",
                "X-XSRF-TOKEN": csrfToken
            }), 
            body: JSON.stringify(<required parameters>)
        })
           .then(res => res.json())
           .then(res => {
               if(res.ok) {
                   // Do login
               } else {
                   // Show errors
               }
            });
    }
}

On your backend make sure to only return a 200 status code when the operation succeeds and return an error code together with something like an errors property to be able to read the errors on the Frontend.

You can easily implement this in laravel by using the build in laravel validator

Laravel and Vue authentication form reload on failed login

1 Answers