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
– PKeidel, Commented May 22, 2019 at 7:52
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
– Riddhi, Commented May 22, 2019 at 8:14
Thanks,I know that. It's just a sample. But I need a feedback instead of a plain refresh. — Uncoke
– Uncoke, Commented May 22, 2019 at 8:14

Patrick Hollweck · Accepted Answer · 2019-05-22 10:09:47Z

0

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

edited May 22, 2019 at 10:09

answered May 22, 2019 at 9:29

Patrick Hollweck

6,8752 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Uncoke Over a year ago

Thanks Patrick ! It looks like the way I was looking for. I got a 419 error (page expired) Maybe I missed Iuse the hidden value <input type="hidden" name="_token" :value="csrf_token">. Can I fix it?

Patrick Hollweck Over a year ago

@Uncoke I updated the same to include the require Http headers for the csrf token

Uncoke Over a year ago

Thanks! It seems to work. I have an internal error but it could be my controller fault. I'm investigating. Thanks a lot for your time!!

Collectives™ on Stack Overflow

Laravel and Vue authentication form reload on failed login

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related