Skip to content

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

License

Notifications You must be signed in to change notification settings

jeremykenedy/laravel-spa

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Laravel Auth SPA

StyleCI CodeQL Quality Gate GitGuardian scan Composer Install Lines of Code MadeWithVueJs.com shield App Version License: MIT

Sponsor me on GitHub Sponsor me on Patreon Buy me a Coffee Vultr GitHub Stars Follow on GitHub Follow on Twitter

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

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:
Features:

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:

Add More Socialite Logins

Screenshots

Login Social Media Login Social Media TikTok Register Social Media Instagram Register Social Media Social User Dashboard Admin Dashboard Dark Mode Admin Users Table Admin Roles Table Admin Permissions Table Admin App Settings Dark Mode Home About Login Register Dashboard Settings - Profile Settings - Password Profile Dark Account SM Settings Revoke Account SM Provider Delete Account Confirm Delete Account Account Deleted Terms Template Forgot Password Reset Password Mobile Menu Mobile Login

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!

About

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

Topics

Resources

License

Security policy

Stars

Watchers

Forks

Packages

No packages published