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. ❤️

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

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

Build the Front End Assets with ViteJs

Using NPM:

From the projects root folder run npm install
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:

From the projects root folder run yarn install
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

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!

nkb-bd / laravel-spa Goto Github PK

laravel-spa's Introduction