Laravel Auth SPA

This project costs me $22/month to be hosted on Vultr.
Please consider supporting my work if you use & find it useful. ❤️

Table of contents

• About
• Features
• Installation Instructions
  • Build the Front End Assets with Vite
  • Optionally Build Cache
• Seeds
  • Seeded Users
• Socialite
  • Get Socialite Login API Keys
  • Add More Socialite Logins
• Screenshots
• File Tree
• License

About

A Laravel + Socialite + Vite + Vue 3 + TailwindCSS SPA Boilerplate. Laravel with user authentication, registration with email verification, social media authentication, password recovery, user management, and roles/permissions management. Uses official TailwindCSS. While the front end is part of this repository it is a completely separated Vue 3 front end compiled using ViteJS.

App Features

Built on:

• Laravel
• Sanctum
• Socialite
• Vite
• Vue 3
• TailwindCSS (w/ @tailwindcss/forms and @tailwindcss/aspect-ratio)
• Vue Router
• Vuex
• Axios
• Headless UI
• Heroicons
• Font Awesome 6
• ESLint with Prettier

Features:

• Users Area
• Admin Area
• About Page
• Terms Page
• Users Managemenet
• User Impersonation
• User Data Download
• User Account Self Deletion.
• Manage Social Media Logins through GUI
• Roles Management
• Permissions Management
• Google Analytics (optional)
• Social Authentication with Facebook, Twitter, Instagram, GitHub, TikTok, Google, YouTube, Microsoft, Twitch, and Apple
• Optional Sentry.io Laravel Monitoring
• Optional Sentry.io VueJs Monitoring

Installation Instructions

1. Run git clone https://github.com/jeremykenedy/laravel-spa.git laravel-spa
2. Create a MySQL database for the project
   • mysql -u root -p, if using Vagrant: mysql -u homestead -psecret
   • create database laravelSpa;
   • \q
3. From the projects root run cp .env.example .env
4. Configure your .env file (VERY IMPORTANT)
5. Run composer install from the projects root folder
6. From the projects root folder run sudo chmod -R 755 ../laravel-spa
7. From the projects root folder run php artisan key:generate
8. From the projects root folder run php artisan migrate
9. From the projects root folder run composer dump-autoload
10. From the projects root folder run php artisan db:seed
11. Compile the front end assets with npm steps or yarn steps.

Build the Front End Assets with ViteJs

Using NPM:

1. From the projects root folder run npm install
2. From the projects root folder run npm run dev or npm run build

• You can lint assets with npm run lint
• You can clean the syntax with npm run clean

Using Yarn:

1. From the projects root folder run yarn install
2. From the projects root folder run yarn run dev or yarn run build

• You can lint assets with yarn run lint
• You can clean the syntax with yarn run clean

Optionally Build Cache

1. From the projects root folder run php artisan config:cache

And thats it with the caveat of setting up and configuring your development environment.

Seeds

Seeded Users

Email	Password
[email protected]	password
[email protected]	password
[email protected]	password

Socialite

Get Socialite Login API Keys:

• Facebook API (Will work with local dev callback)
• Twitter API
• Instagram API
• GitHub API (Will work with local dev callback)
• YouTube API
• Google API
• LinkedIn API (Will work with local dev callback)
• Twitch API (Will work with local dev callback)
• Microsoft API
• TikTok API
• Apple API
• ZoHo API (Will work with local dev callback)
• StackExchange API (Will work with local dev callback)
• GitLab API (Will work with local dev callback)
• Reddit API Register (Will work with local dev callback)
• Snapchat API
• Meetup API
• Atlassian

Add More Socialite Logins

• See full list of providers: https://socialiteproviders.github.io

Screenshots

File Tree

LaravelSpa
├── .browserslistrc
├── .editorconfig
├── .env.example
├── .env.travis
├── .eslintrc.js
├── .gitattributes
├── .github
│   ├── FUNDING.yml
│   ├── dependabot.yml
│   ├── labeler.yml
│   └── workflows
│       ├── changelog.yml
│       ├── codeql.yml
│       ├── create-release.yml
│       ├── dependency-review.yml
│       ├── deploy.yml
│       ├── gitguardian.yml
│       ├── greetings.yml
│       ├── labeler.yml
│       ├── laravel.yml
│       ├── manual.yml
│       ├── node.js.yml
│       ├── php.yml
│       ├── release.yml
│       ├── sentry.yml
│       └── stale.yml
├── .gitignore
├── .npmrc
├── .prettierignore
├── .scripts
│   └── deploy.sh
├── .styleci.yml
├── .travis.yml
├── LICENSE
├── README.md
├── SECURITY.md
├── app
│   ├── Console
│   │   └── Kernel.php
│   ├── Exceptions
│   │   ├── Handler.php
│   │   └── SocialProviderDeniedException.php
│   ├── Http
│   │   ├── Controllers
│   │   │   ├── AppSettingsController.php
│   │   │   ├── AppleSocialController.php
│   │   │   ├── Auth
│   │   │   │   ├── AuthController.php
│   │   │   │   ├── ForgotPasswordController.php
│   │   │   │   ├── PasswordController.php
│   │   │   │   ├── RegisterController.php
│   │   │   │   ├── ResetPasswordController.php
│   │   │   │   ├── SocialiteController.php
│   │   │   │   └── VerificationController.php
│   │   │   ├── Controller.php
│   │   │   ├── DashboardController.php
│   │   │   ├── ImpersonateController.php
│   │   │   ├── PermissionsController.php
│   │   │   ├── ProfileController.php
│   │   │   ├── RolesController.php
│   │   │   ├── ServerInfoController.php
│   │   │   ├── UserController.php
│   │   │   └── UsersController.php
│   │   ├── Kernel.php
│   │   ├── Middleware
│   │   │   ├── AddContentSecurityPolicyHeaders.php
│   │   │   ├── Authenticate.php
│   │   │   ├── EncryptCookies.php
│   │   │   ├── PreventRequestsDuringMaintenance.php
│   │   │   ├── RedirectIfAuthenticated.php
│   │   │   ├── TrimStrings.php
│   │   │   ├── TrustHosts.php
│   │   │   ├── TrustProxies.php
│   │   │   └── VerifyCsrfToken.php
│   │   ├── Requests
│   │   │   ├── AppSettings
│   │   │   ├── Permissions
│   │   │   │   ├── CreatePermissionRequest.php
│   │   │   │   ├── GetPermissionsRequest.php
│   │   │   │   └── UpdatePermissionRequest.php
│   │   │   ├── Roles
│   │   │   │   ├── CreateRoleRequest.php
│   │   │   │   └── UpdateRoleRequest.php
│   │   │   └── Users
│   │   │       ├── CreateUserRequest.php
│   │   │       ├── GetUserRolesRequest.php
│   │   │       ├── ImpersonateUserRequest.php
│   │   │       └── UpdateUserRequest.php
│   │   └── Resources
│   │       ├── Permissions
│   │       │   ├── PermissionResource.php
│   │       │   └── PermissionsCollection.php
│   │       └── Users
│   │           ├── RoleResource.php
│   │           └── RolesCollection.php
│   ├── Jobs
│   │   └── PersonalDataExportJob.php
│   ├── Mail
│   │   └── ExceptionOccured.php
│   ├── Models
│   │   ├── Impersonation.php
│   │   ├── Permission.php
│   │   ├── Role.php
│   │   ├── Setting.php
│   │   ├── SocialiteProvider.php
│   │   └── User.php
│   ├── Notifications
│   │   ├── PersonalDataExportedNotification.php
│   │   ├── ResetPasswordNotification.php
│   │   └── VerifyEmailNotification.php
│   ├── Providers
│   │   ├── AppServiceProvider.php
│   │   ├── AuthServiceProvider.php
│   │   ├── BroadcastServiceProvider.php
│   │   ├── EventServiceProvider.php
│   │   ├── RouteServiceProvider.php
│   │   └── ViewComposerServiceProvider.php
│   ├── Services
│   │   └── AppleToken.php
│   ├── Traits
│   │   ├── AppSettingsTrait.php
│   │   └── SocialiteProvidersTrait.php
│   └── View
│       └── Composers
│           ├── GaComposer.php
│           └── GaEnabledComposer.php
├── artisan
├── bootstrap
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── app.php
│   ├── apple-touch-icon.png
│   ├── cache
│   │   ├── .gitignore
│   │   ├── packages.php
│   │   ├── routes-v7.php
│   │   └── services.php
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   └── ssr
│       ├── android-chrome-192x192.png
│       ├── android-chrome-512x512.png
│       ├── app2.mjs
│       ├── apple-touch-icon.png
│       ├── assets
│       │   ├── About-8055ba51.mjs
│       │   ├── Account-db07883a.mjs
│       │   ├── Admin-1aef526f.mjs
│       │   ├── AdminLayout-b06d3e9f.mjs
│       │   ├── AppSettings-493dc486.mjs
│       │   ├── Dashboard-00d0a96f.mjs
│       │   ├── Errors-cfd7b346.mjs
│       │   ├── ForgotPassword-ca93934f.mjs
│       │   ├── Home-092f52e0.mjs
│       │   ├── Login-3d895534.mjs
│       │   ├── NotFound-52f67599.mjs
│       │   ├── Password-0f549b05.mjs
│       │   ├── Permissions-d779932d.mjs
│       │   ├── PhpInfo-c54b8303.mjs
│       │   ├── Profile-8dc4ce3e.mjs
│       │   ├── Register-c8d7fa41.mjs
│       │   ├── ResetPassword-4e7ca3b7.mjs
│       │   ├── Roles-53fcb449.mjs
│       │   ├── RolesBadges-5ee6b7bc.mjs
│       │   ├── Settings-a3568c63.mjs
│       │   ├── SocialiteLogins-6af0e372.mjs
│       │   ├── Success-4b3d058c.mjs
│       │   ├── Terms-3b1605fc.mjs
│       │   ├── Users-fcead5b0.mjs
│       │   ├── VerifyEmail-3b245fb1.mjs
│       │   ├── default.css_vue_type_style_index_0_src_true_lang-6d22712f.mjs
│       │   ├── workbox-window.prod.es5-77e1b1e1.mjs
│       │   └── zoho-monocrome-black-b48ed5c0.mjs
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       ├── favicon.ico
│       ├── js-bundle-stats.html
│       ├── manifest.webmanifest
│       └── pluginWebUpdateNotice
│           ├── webUpdateNoticeInjectScript.global.js
│           ├── webUpdateNoticeInjectStyle.css
│           └── web_version_by_plugin.json
├── composer.json
├── composer.lock
├── config
│   ├── app.php
│   ├── auth.php
│   ├── broadcasting.php
│   ├── cache.php
│   ├── cors.php
│   ├── database.php
│   ├── debugbar.php
│   ├── exceptions.php
│   ├── filesystems.php
│   ├── hashing.php
│   ├── laravel-https.php
│   ├── laravel-logger.php
│   ├── laravel-page-speed.php
│   ├── laravelpwa.php
│   ├── logging.php
│   ├── mail.php
│   ├── personal-data-export.php
│   ├── queue.php
│   ├── roles.php
│   ├── sanctum.php
│   ├── sentry.php
│   ├── services.php
│   ├── session.php
│   ├── settings.php
│   ├── users.php
│   └── view.php
├── database
│   ├── .gitignore
│   ├── factories
│   │   └── UserFactory.php
│   ├── migrations
│   │   ├── 2014_10_00_000000_create_settings_table.php
│   │   ├── 2014_10_00_000001_add_group_column_on_settings_table.php
│   │   ├── 2014_10_12_000000_create_users_table.php
│   │   ├── 2014_10_12_100000_create_password_resets_table.php
│   │   ├── 2016_01_15_105324_create_roles_table.php
│   │   ├── 2016_01_15_114412_create_role_user_table.php
│   │   ├── 2016_01_26_115212_create_permissions_table.php
│   │   ├── 2016_01_26_115523_create_permission_role_table.php
│   │   ├── 2016_02_09_132439_create_permission_user_table.php
│   │   ├── 2019_08_19_000000_create_failed_jobs_table.php
│   │   ├── 2019_12_14_000001_create_personal_access_tokens_table.php
│   │   ├── 2021_04_26_093603_create_jobs_table.php
│   │   ├── 2022_09_05_192055_update_users_table.php
│   │   ├── 2022_11_02_051027_update_settings_table.php
│   │   ├── 2022_11_28_073632_create_socialite_providers_table.php
│   │   └── 2022_12_06_061947_create_impersonations_table.php
│   └── seeders
│       ├── AppSettingsSeeder.php
│       ├── ConnectRelationshipsSeeder.php
│       ├── DatabaseSeeder.php
│       ├── PermissionsTableSeeder.php
│       ├── RolesTableSeeder.php
│       └── UsersTableSeeder.php
├── env.d.ts
├── package-lock.json
├── package.json
├── phpunit.xml
├── postcss.config.js
├── prettier.config.js
├── prettierrc.json
├── public
│   ├── .htaccess
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── css
│   │   └── app.css
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── images
│   │   └── icons
│   │       ├── icon-128x128.png
│   │       ├── icon-144x144.png
│   │       ├── icon-152x152.png
│   │       ├── icon-192x192.png
│   │       ├── icon-384x384.png
│   │       ├── icon-512x512.png
│   │       ├── icon-72x72.png
│   │       ├── icon-96x96.png
│   │       ├── splash-1125x2436.png
│   │       ├── splash-1242x2208.png
│   │       ├── splash-1242x2688.png
│   │       ├── splash-1536x2048.png
│   │       ├── splash-1668x2224.png
│   │       ├── splash-1668x2388.png
│   │       ├── splash-2048x2732.png
│   │       ├── splash-640x1136.png
│   │       ├── splash-750x1334.png
│   │       └── splash-828x1792.png
│   ├── index.php
│   ├── js
│   │   ├── app.js
│   │   ├── resources_js_Views_ForgotPassword_vue.js
│   │   ├── resources_js_Views_Home_vue.js
│   │   ├── resources_js_Views_Login_vue.js
│   │   ├── resources_js_Views_Password_vue.js
│   │   ├── resources_js_Views_Profile_vue.js
│   │   ├── resources_js_Views_Register_vue.js
│   │   ├── resources_js_Views_ResetPassword_vue.js
│   │   ├── resources_js_Views_Settings_vue.js
│   │   ├── resources_js_Views_VerifyEmail_vue.js
│   │   ├── resources_js_Views_Welcome_vue.js
│   │   └── s-code.min.js
│   ├── mix-manifest.json
│   ├── robots.txt
│   ├── serviceworker.js
│   ├── sw.ts
│   └── web.config
├── resources
│   ├── css
│   │   ├── app.css
│   │   └── normalize.css
│   ├── img
│   │   ├── 404.png
│   │   ├── favicon
│   │   │   ├── android-chrome-192x192.png
│   │   │   ├── android-chrome-512x512.png
│   │   │   ├── apple-touch-icon.png
│   │   │   ├── favicon-16x16.png
│   │   │   ├── favicon-32x32.png
│   │   │   └── favicon.ico
│   │   ├── plugs.png
│   │   └── vendor-logos
│   │       ├── vultr-1.webp
│   │       ├── vultr-2.png
│   │       ├── zoho-monocrome-black.png
│   │       └── zoho-monocrome-white.png
│   ├── js
│   │   ├── app.js
│   │   ├── bootstrap.js
│   │   ├── components
│   │   │   ├── AppFooter.vue
│   │   │   ├── AppNav.vue
│   │   │   ├── BmcButtons.vue
│   │   │   ├── CircleSvg.vue
│   │   │   ├── Errors.vue
│   │   │   ├── GHButton.vue
│   │   │   ├── GHButtons.vue
│   │   │   ├── OctoCat.vue
│   │   │   ├── Pagination.vue
│   │   │   ├── PatreonButton.vue
│   │   │   ├── PerPage.vue
│   │   │   ├── ReloadPrompt.vue
│   │   │   ├── Success.vue
│   │   │   ├── VerifyNotice.vue
│   │   │   ├── VultrReferral.vue
│   │   │   ├── account
│   │   │   │   ├── AccountAdministration.vue
│   │   │   │   ├── AccountAuthentication.vue
│   │   │   │   ├── AccountData.vue
│   │   │   │   └── AccountPrivacy.vue
│   │   │   ├── admin
│   │   │   │   ├── AdminNavBar.vue
│   │   │   │   ├── AdminSidebar.vue
│   │   │   │   ├── RolesTable.vue
│   │   │   │   ├── RolesTableRow.vue
│   │   │   │   ├── UsersTable.vue
│   │   │   │   └── UsersTableRow.vue
│   │   │   ├── auth
│   │   │   │   └── SocialiteLogins.vue
│   │   │   ├── common
│   │   │   │   ├── AppButton.vue
│   │   │   │   ├── AppDeleteModal.vue
│   │   │   │   ├── AppModal.vue
│   │   │   │   ├── AppSwitch.vue
│   │   │   │   ├── AppTable.vue
│   │   │   │   └── AppToast.vue
│   │   │   ├── form
│   │   │   │   ├── AppSettingTextInput.vue
│   │   │   │   ├── AppSettingTextarea.vue
│   │   │   │   └── AppSettingToggle.vue
│   │   │   ├── loaders
│   │   │   │   └── AnimatedTableLoader.vue
│   │   │   ├── roles
│   │   │   │   ├── PermissionFormModal.vue
│   │   │   │   ├── RoleFormModal.vue
│   │   │   │   └── RolesBadges.vue
│   │   │   └── users
│   │   │       ├── UserDownloadData.vue
│   │   │       ├── UserForm.vue
│   │   │       └── UserFormModal.vue
│   │   ├── layouts
│   │   │   └── AdminLayout.vue
│   │   ├── middleware
│   │   │   ├── auth.js
│   │   │   ├── guest.js
│   │   │   ├── middlewarePipeline.js
│   │   │   ├── roleAdmin.js
│   │   │   ├── roleSuperAdmin.js
│   │   │   └── roleUser.js
│   │   ├── router
│   │   │   ├── index.js
│   │   │   └── routes.js
│   │   ├── services
│   │   │   ├── analytics.js
│   │   │   ├── asteroids.js
│   │   │   ├── common.js
│   │   │   ├── excanvas.js
│   │   │   ├── s-code.js
│   │   │   ├── s-code.min.js
│   │   │   └── users.js
│   │   ├── store
│   │   │   ├── index.js
│   │   │   ├── modules
│   │   │   │   ├── auth.js
│   │   │   │   ├── sidebar.js
│   │   │   │   └── toast.js
│   │   │   └── mutation-types.js
│   │   └── views
│   │       ├── App.vue
│   │       ├── Blank.vue
│   │       ├── admin
│   │       │   ├── Admin.vue
│   │       │   ├── AppSettings.vue
│   │       │   ├── Permissions.vue
│   │       │   ├── PhpInfo.vue
│   │       │   ├── Roles.vue
│   │       │   └── Users.vue
│   │       └── pages
│   │           ├── About.vue
│   │           ├── Dashboard.vue
│   │           ├── ForgotPassword.vue
│   │           ├── Home.vue
│   │           ├── Login.vue
│   │           ├── NotFound.vue
│   │           ├── Register.vue
│   │           ├── ResetPassword.vue
│   │           ├── Terms.vue
│   │           ├── VerifyEmail.vue
│   │           ├── auth
│   │           └── settings
│   │               ├── Account.vue
│   │               ├── Password.vue
│   │               ├── Profile.vue
│   │               └── Settings.vue
│   ├── lang
│   │   └── en
│   │       ├── auth.php
│   │       ├── pagination.php
│   │       ├── passwords.php
│   │       ├── personal-data-exports.php
│   │       └── validation.php
│   └── views
│       ├── app.blade.php
│       ├── emails
│       │   └── exception.blade.php
│       ├── errors
│       │   ├── 401.blade.php
│       │   ├── 403.blade.php
│       │   ├── 500.blade.php
│       │   ├── 503.blade.php
│       │   └── layout.blade.php
│       ├── socialite
│       │   ├── callback.blade.php
│       │   └── denied.blade.php
│       └── welcome.blade.php
├── routes
│   ├── api.php
│   ├── channels.php
│   ├── console.php
│   └── web.php
├── server.php
├── tailwind.config.js
├── tailwindcss-perspective.js
├── tsconfig.json
├── tsconfig.vite-config.json
└── vite.config.ts

76 directories, 380 files

• Tree command can be installed using brew: brew install tree
• File tree generated using command tree -a -I '.git|node_modules|vendor|build|storage|tests|.DS_Store|.env'

License

Laravel-Spa is licensed under the MIT license. Enjoy!