I have been struggling with this for a few hours now on how to solve this issue and I just can't seem to be able to get around it for now.
Am building a simple authentication system with a Vue front-end(created using vue-cli) and Laravel 5.8(api) for the backend; to test out the idea of using httponly cookie for authentication and protection of access to certain routes after reading this article. I am using tymondesigns/jwt-auth for authentication instead of laravel passport as used in the article and am also using barryvdh/laravel-cors
package to add CORS (Cross-Origin Resource Sharing) headers support.
BACKEND
Here is my code in the routes/api.php
Route::group(['prefix' => 'auth', 'namespace' => 'Auth'], function () {
Route::post('login', 'AuthController@login');
Route::group(['middleware' => ['auth.api'],], function () {
Route::get('me', 'AuthController@me');
Route::post('logout', 'AuthController@logout');
});
});
And the code for the middleware that am using is as follows in the app/Http/Kernel.php
'auth.api' => [
\App\Http\Middleware\AddAuthTokenHeader::class,
'throttle:60,1',
'bindings',
'auth:api',
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
],
And here is my code in the app/Http/Controllers/Auth/AuthController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Requests\Auth\LoginRequest;
use App\Http\Controllers\Controller;
class AuthController extends Controller
{
/**
* Authenticate user via given credentials.
*
* @param \App\Http\Requests\Auth\LoginRequest $request
*
* @return \Illuminate\Http\JsonResponse
*/
public function login(LoginRequest $request)
{
$credentials = $request->all(['email', 'password']);
if (!$token = auth()->attempt($credentials)) {
return response()->json(['error' => 'Invalid credentials'], 401);
}
$cookie = $this->getCookie($token);
return response()->json([
'token' => $token,
'user' => auth()->user(),
])->withCookie($cookie);
}
/**
* Set cookie details and return cookie
*
* @param string $token JWT
*
* @return \Illuminate\Cookie\CookieJar|\Symfony\Component\HttpFoundation\Cookie
*/
private function getCookie($token)
{
return cookie(
env('AUTH_COOKIE_NAME'),
$token,
auth()->factory()->getTTL(),
null,
null,
env('APP_DEBUG') ? false : true,
true,
false,
'Strict'
);
}
public function logout()
{
// ...
}
public function me()
{
// ...
}
}
And the code for the handle method in the middleware class(app/Http/Middleware/AddAuthTokenHeader.php) used in the custom middleware auth.api is
public function handle($request, Closure $next)
{
$cookie_name = env('AUTH_COOKIE_NAME');
if (!$request->bearerToken()) {
if ($request->hasCookie($cookie_name)) {
$token = $request->cookie($cookie_name);
$request->headers->add([
'Authorization' => 'Bearer ' . $token
]);
}
}
return $next($request);
}
As you can see in my AuthController once the login request is successfully the json response is sent along with the http-only cookie.
NOTE: Am using php artisan serve to run my backend
FRONT-END
After running npm run serve in my vue-cli generated project, I go to the login route which displays the Login component represented by @/views/Login.vue.
Here is my code for the Login.vue
<template>
<div>
<form @submit.prevent="submit" autocomplete="off">
<p>
<label for="email">Email: </label>
<input
type="email"
name="email"
id="email"
v-model.lazy="form.email"
required
autofocus
/>
</p>
<p>
<label for="password">Password: </label>
<input
type="password"
name="password"
id="password"
v-model.lazy="form.password"
required
/>
</p>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'login',
data() {
return {
form: {
email: '',
password: '',
},
};
},
methods: {
async submit() {
const url = 'http://localhost:8000/api/auth/login';
const response = await axios.post(url, this.form, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
console.log(response);
// this.$router.replace({ name: 'home' });
},
},
};
</script>
Given valid credentials on route(http:localhost:8080/login), the cookie will be returned as seen in the response headers below
but for some reason, it's not being set in the browser cookie cookie storage as shown below
NOTE: The cookie shown above is from me testing if everything is running fine after running php artisan serve and opening http:localhost:8000 in the browser.
Question is, why isn't the cookie being stored in the browser cookie storage.
I should note that when I call the same backend api routes using POSTMAN, everything works fine(with the cookie being set on login and cleared on logout).
Thank you.
