Error 419 (unknown status) | Laravel Sanctum + React

167 views Asked by At

for the second day I can't figure out the error 419. I installed Laravel Sanctum (version ^10) and wrote a test component for it on React. Server running on http://127.0.0.1:8000 (php artisan serve). React run on: http://localhost:3000/.

axios.js

import Axios from 'axios';

const axiosMy = Axios.create({
    baseURL: "http://127.0.0.1:8000/api",
    withCredentials: true,
    headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
    },
});

export default axiosMy;

Login.jsx

import axios from "axios";
import axiosMy from "../axios";

function Login() {
    const handleSubmit = async (e) => {
        e.preventDefault();

        const { email, password } = e.target.elements;
        const body = {
            email: email.value,
            password: password.value,
        };
        
        await axios.get('http://localhost:8000/sanctum/csrf-cookie');
        
        try {
            const resp = await axiosMy.post('/login', body);
            if (resp.status === 200) {
                console.log(resp.data.user);
            }
        } catch (error) {
            if (error.response.status === 401) {
                console.log(error.response.data.message);
            }
        }
    }

    return <div>
        <h1>LOGIN</h1>
        <form action="#" onSubmit={ handleSubmit }>
            <span>E-mail</span><br />
            <input type="text" name="email" /><br />
            <span>Password</span><br />
            <input type="text" name="password" /><br />
            <button type="submit">ENTER</button>
        </form>

    </div>;
}

export default Login;

routes/api.php

Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->group(function () {
    Route::post('/logout', [AuthController::class, 'logout']);
    Route::get('/user', [AuthController::class, 'user']);
});

config/cors.php

'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

.env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:grvlZPheUjBHVWW0Y9AERv3xOADe90kZBpx38pZjqdk=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug


FRONTEND_URL=http://localhost:3000
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000


DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=auth_v4
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=cookie
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

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

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Tried different options, downloaded ready-made solutions from GitHub, but the same problem

0

There are 0 answers