'laravel spa authentication csrf
I have one question. I made Laravel API and auth in VueJS. Official Laravel documentation said that on /login API call from VueJS should be preceded by window.axios.get('/sanctum/csrf-cookie') My code works as expected, but I am not sure if I am missunderstood something in concept of SPA app.
My questions is, why my SPA works even if I comment or exclude window.axios.get('/sanctum/csrf-cookie') , and just call API /login. Nothing changes If I use this piece of code or not. If I understood correctly, Laravel API should be response with some error code if I dont use this code before API /login.
P.S. If I change SESSION_DRIVER=file, instead of cookie, I got error 419 when I exclude sanctum csrf call from my Login.vue component. This is normal behaviour, if I am understood correctly ?
So, I did not find in Laravel documentation in chapter about SPA and Laravel, that I need to set SESSION_DRIVER to cookie.
<?php
namespace App\Http\Controllers\Api;
use Validator;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
use App\Models\User;
class AuthController extends Controller
{
public function login(Request $request)
{
if (Auth::attempt(['email' => $request->email, 'password' => $request->password])) {
$user = Auth::user();
$success['token'] = $user->createToken('MyApp')->plainTextToken;
$success['name'] = $user->name;
$user = User::where('email', $request['email'])->where('name', $success['name'])->firstOrFail();
return $success;
} else {
return response()->json(['da' => 'ne moye']);
}
}
public function register(Request $request)
{
$validator = Validator::make($request->all(), [
'name' => 'required',
'email' => 'required|email',
'password' => 'required',
'confirm_password' => 'required|same:password',
]);
if ($validator->fails()) {
return $validator->errors();
}
$input = $request->all();
$input['password'] = bcrypt($input['password']);
$user = User::create($input);
$success['token'] = $user->createToken('MyApp')->plainTextToken;
$success['name'] = $user->name;
return $success;
}
public function logout(Request $request)
{
Auth::guard('web')->logout();
auth()->user()->tokens()->delete();
//$request->user()->currentAccessToken()->delete();
return 'revoked';
}
}
api.php
Route::group(['middleware' =>['auth:sanctum']], function(){
Route::apiResource('books', BookController::class);
Route::post('/logout', [AuthController::class,'logout']);
});
Configuration files Cors.php
<?php
return [
/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
];
.env
SESSION_DRIVER=cookie
SESSION_LIFETIME=120
Login.vue
window.axios.get('/sanctum/csrf-cookie').then(response => {
window.axios.post('/api/login', { email: this.email, password: this.password}).then((response) => {
if(response.data.token) {
window.location.href = "/dashboard";
}
});
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
