Repository files navigation

Keysmith Vue is a Laravel 12 Vue Starterkit package that provides Vue.js components for managing API keys and tokens in your application. It offers a clean, user-friendly interface for creating, viewing, and revoking API keys with customizable permissions based on the implementation from Laravel Breeze.

• 🔑 Easy API token generation and management
• 🔒 Built on Laravel Sanctum's secure token authentication
• 🎨 Pre-built Vue components for quick integration
• 📱 Responsive and user-friendly interface
• ⚙️ Flexible installation options (page or settings templates)
• 🛠️ Customizable permissions system

• PHP 8.2 or higher
• Laravel 12.x
• Vue 3.x
• Laravel Sanctum

You can install the package via composer:

composer require blaspsoft/keysmith-vue

Choose your preferred installation template:

Install this option to add a dedicated API tokens page atpages/api-tokens/index.vue. This provides a standalone interface for managing your API tokens.

Choose this option to integrate API token management within your Laravel Vue Starterkit settings atpages/settings/APITokens.vue. This keeps token management alongside your other application settings.

Run one (or both) of the following commands based on your choice:

php artisan keysmith:install page

or

php artisan keysmith:install settings

Add the following to yourHandleInertiaRequests.php middleware'sshare method to handle API token flash messages:

'flash' => ['api_token' =>fn () =>session()->get('api_token'),],

publicfunctionshare(Request$request):array    {        [$message,$author] =str(Inspiring::quotes()->random())->explode('-');return [            ...parent::share($request),'name' =>config('app.name'),'quote' => ['message' =>trim($message),'author' =>trim($author)],'auth' => ['user' =>$request->user(),            ],'flash' => ['api_token' =>fn () =>session()->get('api_token'),            ],        ];    }

This configuration is required to display newly created API tokens to users.

Dependent of which template you decide to use 'page" or "settings" (or both). You may want to add links to the app sidebar and settings navigations.

For the page updatejs/components/AppSidebar.vue

constmainNavItems:NavItem[]=[{title:"Dashboard",href:"/dashboard",icon:LayoutGrid,},{title:"API Tokens",href:"/api-tokens",icon:KeyRound,},];

For the settings updatejs/layouts/settings/Layout.vue

constsidebarNavItems:NavItem[]=[{title:"Profile",href:"/settings/profile",},{title:"Password",href:"/settings/password",},{title:"Appearance",href:"/settings/appearance",},{title:"API Tokens",href:"/settings/api-tokens",},];

php artisan vendor:publish --tag=keysmith-vue-config --force

This command will publish a configuration file atconfig/keysmith.php, where you can customize keysmith settings.

This package requires Laravel Sanctum for API token authentication. Before using Keysmith Vue, make sure to:

1. Install Laravel Sanctum:

composer require laravel/sanctum

2. Publish and run Sanctum's migrations:

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider" --tag="sanctum-migrations"php artisan migrate

3. Add the HasApiTokens trait to your User model:

useLaravel\Sanctum\HasApiTokens;class Userextends Authenticatable{use HasApiTokens;// ... existing code ...}

Keysmith Vue provides two components that are installed in your/components directory:

• CreateApiTokenForm.vue: Form component for generating new API tokens
• ManageApiTokens.vue: Component for viewing and managing existing tokens

These components are utilized in both the page and settings templates.

Keysmith Vue provides two sets of routes depending on your installation choice:

If you installed using the page template (keysmith:install page), these routes are available:

Route::get('/api-tokens', [TokenController::class,'index'])->name('api-tokens.index');Route::post('/api-tokens', [TokenController::class,'store'])->name('api-tokens.store');Route::put('/api-tokens/{token}', [TokenController::class,'update'])->name('api-tokens.update');Route::delete('/api-tokens/{token}', [TokenController::class,'destroy'])->name('api-tokens.destroy');

If you installed using the settings template (keysmith:install settings), these routes are available:

Route::get('/settings/api-tokens', [TokenController::class,'index'])->name('settings.api-tokens.index');Route::post('/settings/api-tokens', [TokenController::class,'store'])->name('settings.api-tokens.store');Route::put('/settings/api-tokens/{token}', [TokenController::class,'update'])->name('settings.api-tokens.update');Route::delete('/settings/api-tokens/{token}', [TokenController::class,'destroy'])->name('settings.api-tokens.destroy');

All routes are protected by authentication middleware and handle the following operations:

• GET: Retrieve all tokens for the authenticated user
• POST: Create a new API token
• PUT: Update token permissions
• DELETE: Revoke an existing token

Keysmith Vue includes test files that are placed in your project'stests/Feature/ApiToken directory:

• PageTokenTest.php: Tests for the page template implementation
• SettingsTokenTest.php: Tests for the settings template implementation

You can run the tests using:

php artisantest

You can customize the available token permissions by modifying theconfig/keysmith.php file:

return ['permissions' => ['read','create','update','delete',// Add your custom permissions here    ],];

If you discover any security related issues, please emailmike.deeming@blaspsoft.com instead of using the issue tracker.

• Michael Deeming
• All Contributors

The MIT License (MIT). Please seeLicense File for more information.