How to get rid of error 419 when trying to login to an application on Laravel 7 and Vue?

Question

Laravel

I am writing a small application on Laravel 7 and Vue, deploying it on a local server. I began to implement the page LoginPage, previously added to the app.blade.phpmeta tag with a CSRF token:

<meta name="csrf-token" content="{{ csrf_token() }}">

I pass the token to the hidden form input on the page LoginPage:

<template>
  <div id="login" class="login-container">
    <form role="form" action="/login" method="post">
      <div class="form-control">
        <input
          id="email"
          type="email"
          name="email"
          placeholder="Email address"
          required
          autofocus
        >
      </div>

      <div class="form-control">
        <input
          id="password"
          type="password"
          name="password"
          placeholder="Password"
          required
        >
      </div>

      <input type="hidden" name="_token" :value="csrf_token">

      <div class="form-control">
        <button type="submit">Log in</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      csrf_token: document.head.querySelector('meta[name="csrf-token"]').getAttribute('content')
    }
  }
}
</script>

Everything is fine at this point, however when I try to login I get a 419 Page Expired error. I read answers to questions similar to mine, tried changing the settings in .envand session.phpclearing the cache, but nothing helped - the error does not go away. .envcurrently looks like this:

APP_NAME=app
APP_ENV=local
APP_KEY=***
APP_DEBUG=true
APP_URL=http://app.test

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=***
DB_USERNAME=***
DB_PASSWORD=***

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
SESSION_DOMAIN=.localhost

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

And session.php is like this:

<?php

use Illuminate\Support\Str;

return [
    'driver' => env('SESSION_DRIVER', 'file'),
    'lifetime' => env('SESSION_LIFETIME', 120),
    'expire_on_close' => false,
    'encrypt' => false,
    'files' => storage_path('framework/sessions'),
    'connection' => env('SESSION_CONNECTION', null),
    'table' => 'sessions',
    'store' => env('SESSION_STORE', null),
    'lottery' => [2, 100],
    'cookie' => env(
        'SESSION_COOKIE',
        Str::slug(env('APP_NAME', 'laravel'), '_').'_session'
    ),
    'path' => '/',
    'domain' => env('SESSION_DOMAIN', null),
    'secure' => env('SESSION_SECURE_COOKIE', false),
    'http_only' => true,
    'same_site' => 'lax',

];

Are there any other ways to get rid of error 419?

PS Laravel version 7.28.1
PHP version 7.2
OS: Ubuntu 20.04
MySQL: 8.0.21
Apache 2.4.41

Answer 1

https://laravel.com/docs/8.x/blade#csrf-field