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

jeremykenedy/laravel-spa

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
March 17, 2023 07:35
January 15, 2023 13:50
app
March 17, 2023 10:03
January 9, 2023 12:43
January 19, 2023 19:26
September 17, 2022 00:40
December 9, 2022 01:06
September 17, 2022 00:40
September 17, 2022 00:40
September 17, 2022 00:40
September 17, 2022 00:40
September 18, 2022 22:55
March 17, 2023 04:14
March 17, 2023 07:23
March 17, 2023 03:45
September 17, 2022 00:40
January 7, 2023 15:03
September 17, 2022 00:40
September 17, 2022 00:40
September 17, 2022 00:40
September 17, 2022 00:40
September 17, 2022 00:40
September 17, 2022 00:40
December 30, 2022 02:55
September 17, 2022 00:40
January 15, 2023 14:14

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
superadmin@superadmin.com password
admin@admin.com password
user@user.com 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