app.js

axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.csrfToken,
    'X-Requested-With': 'XMLHttpRequest',
};

Login.vue

<template>
    <form @submit.prevent="onSubmit">
        <b-field label="Email"
                 :message="formErrors.first('email')"
                 :type="formErrors.has('email') ? 'is-warning' : ''">
            <b-input type="email"
                     name="email"
                     @input="clearErrors"
                     v-model="formData.email"
                     v-validate="{required: true, email: true}">
            </b-input>
        </b-field>

        <b-field :label="$t('auth.password')"
                 :message="formErrors.first('password')"
                 :type="formErrors.has('password') ? 'is-warning' : ''">
            <b-input type="password"
                     name="password"
                     @input="clearErrors"
                     v-model="formData.password"
                     v-validate="{required: true, min: 6}"
                     password-reveal></b-input>
        </b-field>

        <b-notification v-if="formErrors.has('failed-auth.email')"
                        type="is-warning"
                        @close="clearErrors">
            {{ this.formErrors.first('failed-auth.email') }}
        </b-notification>

        <div class="level">
            <div class="level-left">
                <div class="level-item">
                    <button type="submit"
                            class="button is-primary"
                            :class="isLoading ? 'is-loading' : ''"
                            :disabled="isLoading || isFormPristine || formErrors.any()">
                        {{ $t("auth.login") }}
                    </button>
                </div>
            </div>
            <div class="level-right is-size-7">
                <div class="level-item">
                    {{ $t("auth.login_with") }}
                </div>
                <div class="level-item">
                    <a class="button is-small" href="/login/facebook">
                        <span class="icon is-small">
                          <i class="fab fa-facebook"></i>
                        </span>
                        <span>Facebook</span>
                    </a>
                </div>
                <div class="level-item">
                    <a class="button is-small" href="/login/google">
                        <span class="icon is-small">
                          <i class="fab fa-google"></i>
                        </span>
                        <span>Google</span>
                    </a>
                </div>
            </div>
        </div>

    </form>
</template>

<script>
    import isLoading from 'mixins/isLoading';
    import {each} from 'lodash';

    export default {
        mixins: [
            isLoading
        ],
        data() {
            return {
                formData: {
                    email: '',
                    password: ''
                }
            }
        },

        computed: {
            isFormPristine() {
                return Object.keys(this.fields).some(key => this.fields[key].pristine);
            }
        },

        methods: {
            onSubmit() {
                this.$validator.validateAll().then((result) => {
                    // send your data to the backend.
                    if (result) {
                        this.submitForm();
                    }
                }).catch(() => {
                    // client side errors.
                });
            },

            submitForm() {
                this.loading = true;

                this.axios.post('/login', this.formData).then((response) => {
                    window.location.href = '/';
                }).catch((error) => {
                    each(error.response.data.errors, (error, key) => {
                        this.formErrors.add(key, error[0], null, 'failed-auth')
                    })
                    this.loading = false;
                });
            },

            clearErrors() {
                this.formErrors.clear('failed-auth');
            }
        }
    }
</script>

LoginController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\Users\OAuthAccount;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Socialite;

class LoginController extends Controller
{

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/';

    protected $providers = [
        'facebook',
        'google',
    ];

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    public function showLoginForm()
    {
        $this->seo()
             ->setTitle(trans('auth.login'))
             ->setDescription(trans('auth.login'))
             ->og()
             ->setImage(url('/images/og-image.jpg'))
             ->setUrl(url()->current());

        return view('front.auth.login');
    }

    /**
     * Redirect the user to the provider authentication page.
     *
     * @param $provider
     *
     * @return Response
     */
    public function redirectToProvider($provider)
    {
        if (in_array($provider, $this->providers)) {
            return Socialite::driver($provider)->redirect();
        }

        return abort(404);
    }

    /**
     * Obtain the user information from provider.
     *
     * @param OAuthAccount $OAuthAccount
     *
     * @param $provider
     *
     * @return Response
     */
    public function handleProviderCallback(OAuthAccount $OAuthAccount, $provider)
    {
        if (in_array($provider, $this->providers)) {
            $user = $OAuthAccount->createOrGetUser(Socialite::driver($provider)->user(), $provider);

            auth()->login($user);

            return redirect()->to('/#');
        }

        return abort(404);
    }
}