As far as I know this is how to get Passport on Laravel Spark working correctly, it works so far for me over the API but there might be something I am still missing.
I am using the following software versions in composer.json:
"require": {
"php": "^7.2.5",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^6.3",
"laravel/framework": "^7.0",
"laravel/passport": "^9.2",
"laravel/spark-aurelius": "*@dev",
"laravel/tinker": "^2.0",
"laravel/ui": "^2.0"
}
To get started, install Passport via the Composer package manager:
composer require laravel/passport
The Passport service provider registers its own database migration directory with the framework, so you should migrate your database after installing the package. The Passport migrations will create the tables your application needs to store clients and access tokens:
php artisan migrate
Next, you should run the passport:install command. This command will create the encryption keys needed to generate secure access tokens. In addition, the command will create "personal access" and "password grant" clients which will be used to generate access tokens:
php artisan passport:install
After running the passport:install command, add the Laravel\Passport\HasApiTokens trait to your App\User model. This trait will provide a few helper methods to your model which allow you to inspect the authenticated user's token and scopes.
The SparkUser model already has HasApiTokens trait however you need to include the Laravel\Passport\HasApiTokens trait in the App\User model so you are able to create API tokens in the spark user interface.
<?php
namespace App;
use Laravel\Spark\User as SparkUser;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Laravel\Passport\HasApiTokens;
class User extends SparkUser implements MustVerifyEmail
{
use HasApiTokens;
Next, you should call the Passport::routes() method within the boot method of your AuthServiceProvider. This method will register the routes necessary to issue access tokens and revoke access tokens, clients, and personal access tokens:
<?php
namespace App\Providers;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Gate;
use Laravel\Passport\Passport;
class AuthServiceProvider extends ServiceProvider
{
/**
* The policy mappings for the application.
*
* @var array
*/
protected $policies = [
// 'App\Model' => 'App\Policies\ModelPolicy',
];
/**
* Register any authentication / authorization services.
*
* @return void
*/
public function boot()
{
$this->registerPolicies();
Passport::routes();
}
}
Finally, in your config/auth.php configuration file, you should set the driver option of the api authentication guard to passport. This will instruct your application to use Passport's TokenGuard when authenticating incoming API requests:
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'passport',
'provider' => 'users',
],
],
],
In order to use the Passport Vue components, you must be using the Vue JavaScript framework. These components also use the Bootstrap CSS framework. However, even if you are not using these tools, the components serve as a valuable reference for your own frontend implementation.
To publish the Passport Vue components, use the vendor:publish Artisan command:
php artisan vendor:publish --tag=passport-components
The published components will be placed in your resources/js/components directory. Once the components have been published, you should register them in your resources\js\components\bootstrap.js file:
/*
|--------------------------------------------------------------------------
| Laravel Spark Components
|--------------------------------------------------------------------------
|
| Here we will load the Spark components which makes up the core client
| application. This is also a convenient spot for you to load all of
| your components that you write while building your applications.
*/
require('./../spark-components/bootstrap');
require('./home');
Vue.component(
'passport-clients',
require('./passport/Clients.vue').default
);
Vue.component(
'passport-authorized-clients',
require('./passport/AuthorizedClients.vue').default
);
Vue.component(
'passport-personal-access-tokens',
require('./passport/PersonalAccessTokens.vue').default
);
After registering the components, make sure to run npm run dev to recompile your assets. Once you have recompiled your assets, you may drop the components into one of your application's templates to get started creating clients and personal access tokens:
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>`
You can add these views wherever you want, maybe only your developers want to have access to this interface, then you should put the views in the kiosk section.
In my case I have added these components in the API section replacing the default Spark views.
resources\views\vendor\spark\settings\api.blade.php
<spark-api inline-template>
<div>
<!-- Clients -->
<div>
<passport-clients></passport-clients>
{{-- @include('spark::settings.api.create-token') --}}
</div>
<!-- Authorized Clients -->
<div>
<passport-authorized-clients></passport-authorized-clients>
{{-- @include('spark::settings.api.tokens') --}}
</div>
<!-- Personal Access Tokens -->
<div>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</div>
</spark-api>
Now the views look like this
That's it! I hope I can help you.