{"id":27599757,"url":"https://github.com/blaspsoft/keysmith-react","last_synced_at":"2025-04-22T15:43:39.095Z","repository":{"id":281084621,"uuid":"943511863","full_name":"Blaspsoft/keysmith-react","owner":"Blaspsoft","description":"🔑 ⚛️ Keysmith React is a Laravel 12 package that extends the Laravel 12 React Starter Kit by enabling API token management through Laravel Sanctum. Built on the Laravel Breeze implementation, it includes React components for generating, viewing, editing, and deleting tokens, providing a seamless and user-friendly authentication experience.","archived":false,"fork":false,"pushed_at":"2025-03-14T13:08:33.000Z","size":43,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-20T05:43:44.967Z","etag":null,"topics":["api","api-key","api-key-management","authentication","inertiajs","laravel","laravel-breeze","laravel-sanctum","laravel12","php","react","starter-kit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blaspsoft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-05T20:34:23.000Z","updated_at":"2025-03-16T05:42:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"1870dc13-d432-4f08-9679-62fa1c19c1ed","html_url":"https://github.com/Blaspsoft/keysmith-react","commit_stats":null,"previous_names":["blaspsoft/keysmith-react"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blaspsoft%2Fkeysmith-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blaspsoft%2Fkeysmith-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blaspsoft%2Fkeysmith-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blaspsoft%2Fkeysmith-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blaspsoft","download_url":"https://codeload.github.com/Blaspsoft/keysmith-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250270261,"owners_count":21403014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","api-key","api-key-management","authentication","inertiajs","laravel","laravel-breeze","laravel-sanctum","laravel12","php","react","starter-kit"],"created_at":"2025-04-22T15:43:38.501Z","updated_at":"2025-04-22T15:43:39.080Z","avatar_url":"https://github.com/Blaspsoft.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./assets/icon.png\" alt=\"Blasp Icon\" width=\"150\" height=\"150\"/\u003e\n    \u003cp align=\"center\"\u003e\n        \u003ca href=\"https://packagist.org/packages/blaspsoft/keysmith-react\"\u003e\u003cimg alt=\"Total Downloads\" src=\"https://img.shields.io/packagist/dt/blaspsoft/keysmith-react\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://packagist.org/packages/blaspsoft/keysmith-react\"\u003e\u003cimg alt=\"Latest Version\" src=\"https://img.shields.io/packagist/v/blaspsoft/keysmith-react\"\u003e\u003c/a\u003e\n        \u003ca href=\"https://packagist.org/packages/blaspsoft/keysmith-react\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/packagist/l/blaspsoft/keysmith-react\"\u003e\u003c/a\u003e\n    \u003c/p\u003e\n\u003c/p\u003e\n\n# Keysmith React - Laravel 12 React Starterkit API Token Management\n\n**Keysmith React** is a Laravel 12 React Starterkit package that provides React.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 Laravel Breeze.\n\n---\n\n## 🎥 Keysmith React Video Tutorial\n\n[![Watch the Tutorial](https://img.youtube.com/vi/cUyYTp_eapI/maxresdefault.jpg)](https://www.youtube.com/watch?v=cUyYTp_eapI)\n\n**▶️ Click the image above to watch the tutorial on YouTube!**\n\n## ✨ Features\n\n- 🔑 Easy API token generation and management\n- 🔒 Built on Laravel Sanctum's secure token authentication\n- 🎨 Pre-built React components for quick integration\n- 📱 Responsive and user-friendly interface\n- ⚙️ Flexible installation options (page or settings templates)\n- 🛠️ Customizable permissions system\n\n---\n\n## 🛠 Requirements\n\nBefore installing **Keysmith React**, ensure your environment meets the following requirements:\n\n- PHP **8.0+**\n- Laravel **12.x**\n- React **19.x**\n- Laravel Sanctum\n\n---\n\n## 🚀 Installation\n\nInstall the package via Composer:\n\n```bash\ncomposer require blaspsoft/keysmith-react\n```\n\n### Choose Your Installation Template\n\nYou can install one (or both) of the available templates:\n\n#### **Page Template**\n\nAdds a dedicated API tokens page at `pages/api-tokens/index.tsx`.\n\n```bash\nphp artisan keysmith:install page\n```\n\n#### **Settings Template**\n\nIntegrates API token management within the **Laravel Vue Starterkit** settings at `pages/settings/api-tokens.tsx`.\n\n```bash\nphp artisan keysmith:install settings\n```\n\n---\n\n## 🔧 Configuration\n\n### 1️⃣ Configure Inertia Middleware\n\nAdd the following to your `HandleInertiaRequests.php` middleware's `share` method to enable API token flash messages:\n\n```php\n'flash' =\u003e [\n    'api_token' =\u003e fn () =\u003e session()-\u003eget('api_token'),\n],\n```\n\n**Full example:**\n\n```php\npublic function share(Request $request): array\n{\n    [$message, $author] = str(Inspiring::quotes()-\u003erandom())-\u003eexplode('-');\n\n    return [\n        ...parent::share($request),\n        'name' =\u003e config('app.name'),\n        'quote' =\u003e ['message' =\u003e trim($message), 'author' =\u003e trim($author)],\n        'auth' =\u003e [\n            'user' =\u003e $request-\u003euser(),\n        ],\n        'flash' =\u003e [\n            'api_token' =\u003e fn () =\u003e session()-\u003eget('api_token'),\n        ],\n    ];\n}\n```\n\nThis ensures newly created API tokens are displayed to users.\n\n### 2️⃣ Add Navigation Links\n\n#### **For the Page Template**\n\nModify `js/components/app-sidebar.tsx`:\n\n```javascript\nconst mainNavItems: NavItem[] = [\n  {\n    title: \"Dashboard\",\n    href: \"/dashboard\",\n    icon: LayoutGrid,\n  },\n  {\n    title: \"API Tokens\",\n    href: \"/api-tokens\",\n    icon: KeyRound,\n  },\n];\n```\n\n#### **For the Settings Template**\n\nModify `js/layouts/settings/layout.tsx`:\n\n```javascript\nconst sidebarNavItems: NavItem[] = [\n  {\n    title: \"Profile\",\n    href: \"/settings/profile\",\n  },\n  {\n    title: \"Password\",\n    href: \"/settings/password\",\n  },\n  {\n    title: \"Appearance\",\n    href: \"/settings/appearance\",\n  },\n  {\n    title: \"API Tokens\",\n    href: \"/settings/api-tokens\",\n  },\n];\n```\n\n### 3️⃣ (Optional) Publish Configuration File\n\nTo customize settings, publish the config file:\n\n```bash\nphp artisan vendor:publish --tag=keysmith-config --force\n```\n\nThis creates `config/keysmith.php`, where you can modify key permissions.\n\n---\n\n## 🔑 Dependencies\n\nKeysmith React requires **Laravel Sanctum** for API token authentication.\n\n1. Install **Laravel Sanctum**:\n\n   ```bash\n   composer require laravel/sanctum\n   ```\n\n2. Publish and run Sanctum’s migrations:\n\n   ```bash\n   php artisan vendor:publish --provider=\"Laravel\\Sanctum\\SanctumServiceProvider\" --tag=\"sanctum-migrations\"\n   php artisan migrate\n   ```\n\n3. Add the `HasApiTokens` trait to your `User` model:\n\n   ```php\n   use Laravel\\Sanctum\\HasApiTokens;\n\n   class User extends Authenticatable\n   {\n       use HasApiTokens;\n       // ... existing code ...\n   }\n   ```\n\n---\n\n## 📦 Components\n\nKeysmith React provides two main components located in `/components`:\n\n- `create-api-token-form.tsx` → Form for generating new API tokens\n- `manage-api-tokens.tsx` → Component for viewing and managing existing tokens\n\nThese components are used in both **Page** and **Settings** templates.\n\n---\n\n## 🌐 Routes\n\nKeysmith uses the routes defined below:\n\n```php\nRoute::get('/settings/api-tokens', [TokenController::class, 'index'])-\u003ename('settings.api-tokens.index');\nRoute::get('/api-tokens', [TokenController::class, 'index'])-\u003ename('api-tokens.index');\nRoute::post('/api-tokens', [TokenController::class, 'store'])-\u003ename('api-tokens.store');\nRoute::put('/api-tokens/{token}', [TokenController::class, 'update'])-\u003ename('api-tokens.update');\nRoute::delete('/api-tokens/{token}', [TokenController::class, 'destroy'])-\u003ename('api-tokens.destroy');\n```\n\n---\n\n## 🧪 Testing\n\nKeysmith React includes tests in `tests/Feature/ApiToken/`:\n\nRun the tests with:\n\n```bash\nphp artisan test\n```\n\n---\n\n## 🎛 Customizing Permissions\n\nModify the available API token permissions in `config/keysmith.php`:\n\n```php\nreturn [\n    'permissions' =\u003e [\n        'read',\n        'create',\n        'update',\n        'delete',\n        // Add your custom permissions here\n    ],\n];\n```\n\n---\n\n## 🔒 Security\n\nIf you discover any **security-related** issues, please email **mike.deeming@blaspsoft.com** instead of using the issue tracker.\n\n---\n\n## 📜 Credits\n\n- [Michael Deeming](https://github.com/deemonic)\n\n---\n\n## 📄 License\n\nThis package is licensed under **MIT**. See [LICENSE.md](LICENSE.md) for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblaspsoft%2Fkeysmith-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblaspsoft%2Fkeysmith-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblaspsoft%2Fkeysmith-react/lists"}