Authentication

The following is a basic guide to setup authentication for Luma Vue using an external Laravel 8.x API.

Requirements

Composer: Luma Vue authentication example utilizes Composer to manage its server-side dependencies. So, before using Luma Vue authentication example, make sure you have Composer installed on your machine.
Server Requirements: Luma Vue authentication example has a few system requirements. See https://laravel.com/docs/8.x#server-requirements

Setup Laravel

Create a new Laravel project.

laravel new luma-vue-laravel-auth

Database

Enable sqlite database connection in the .env file:

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=luma_laravel
# DB_USERNAME=root
# DB_PASSWORD=

Create the database file:

touch database/database.sqlite

Laravel Fortify

Install Laravel Fortify:

composer require laravel/fortify

Publish the Fortify configuration:

php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"

App\Providers\FortifyServiceProvider::class,

Laravel Sanctum

Install Laravel Sanctum:

composer require laravel/sanctum

Publish the Sanctum configuration:

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

Next, add Sanctum's middleware to your api middleware group within your app/Http/Kernel.php file:

<?php

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

Configure Your First-Party Domains in .env. This should match the hostname and PORT of the SPA:

SANCTUM_STATEFUL_DOMAINS=localhost:8080

CORS

Configure CORS in config/cors.php:

'paths' => ['*'],
'supports_credentials' => true,

CSRF

Disable CSRF Token in app/Http/Middleware/VerifyCsrfToken.php:

<?php

protected $except = [
    '/login',
    '/register',
    '/reset-password'
];

Routes

Create a mock /home route in routes/web.php so we don't get a 404 after login:

<?php

Route::get('/home', function () {
    return view('welcome');
});

Update the /api/user route in routes/api.php to use sanctum:

<?php

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset