Socialite Plus - Laravel Socialite made even easier

Socialite Plus is a Laravel 12 React & Vue Starterkit package that streamlines social login for Google, Facebook, GitHub and LinkedIn.

---

🎥 SocialitePlus Video Tutorial

▶️ Click the image above to watch the tutorial on YouTube!

✨ Features

• ✅ Predefined Social Login Pages – Ready-to-use authentication pages built with React & Vue.
• 🎯 Seamless OAuth Integration – Supports Google, Facebook, GitHub, and LinkedIn logins.
• ⚙️ Configurable Providers – Enable or disable social logins via a simple config file.
• 🎨 Customizable Button Text & Styles – Personalize login button labels and appearance.
• ⚡ Effortless Setup – Quick configuration using Laravel Socialite.
• 🔄 Full Social Auth Flow – Handles login, registration, and token management.
• 🔐 Secure & Scalable – Built with best practices for authentication and security.
• 🌍 Multi-Framework Support – Works with both React and Vue frontends.
• 📦 Out-of-the-Box Functionality – Reduce development time with pre-built components

---

🛠 Requirements

Before installing Keysmith React, ensure your environment meets the following requirements:

• PHP 8.0+
• Laravel 12.x
• React 19.x or Vue 3.x
• Laravel Socialite 5.0

---

🚀 Installation Guide

Follow these simple steps to install and configure Socialite Plus in your Laravel 12 Vue or React starterkit project.

---

1️⃣ Install the Package

Run the following command in your terminal to install the package via Composer:

composer require blaspsoft/socialiteplus

---

2️⃣ Choose Your Frontend Framework

After installation, you need to specify whether you want to use Vue or React. Run one of the following commands:

Vue

php artisan socialiteplus:install vue

React

php artisan socialiteplus:install react

This command will generate pre-built authentication components for your chosen frontend.

---

3️⃣ Publish the Configuration File

Run the following command to publish the config/socialiteplus.php file:

php artisan vendor:publish --tag=socialiteplus-config

This will allow you to customize social login settings. For changes to take effect you may need to clear the config cache:

php artisan config:cache

---

4️⃣ Add the Middleware to Routes

use App\Http\Middleware\HandleSocialitePlusProviders;

Route::get('register', [RegisteredUserController::class, 'create'])
    ->middleware(HandleSocialitePlusProviders::class)
    ->name('register');

Route::get('login', [AuthenticatedSessionController::class, 'create'])
    ->middleware(HandleSocialitePlusProviders::class)
    ->name('login');

5️⃣ Create OAuth Apps in Social Providers

To enable authentication, you need to register your application with each provider and obtain Client ID and Secret and set the redirect URI:

https://your-app.com/auth/social/{provider}/callback

---

6️⃣ Set Environment Variables

Update your .env file with the credentials obtained from each provider:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT=https://yourapp.com/auth/social/google/callback

FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret
FACEBOOK_REDIRECT=https://yourapp.com/auth/social/facebook/callback

GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
GITHUB_REDIRECT=https://yourapp.com/auth/social/github/callback

LINKEDIN_CLIENT_ID=your-linkedin-client-id
LINKEDIN_CLIENT_SECRET=your-linkedin-client-secret
LINKEDIN_REDIRECT=https://yourapp.com/auth/social/linkedin/callback

---

7️⃣ Configure Socialite Plus

Modify the config/socialiteplus.php file to customize settings:

return [
    'button_text' => '{provider}',

    'providers' => [
        'google' => [
            'active' => true,
            'branded' => false,
            'name' => 'Google',
            'icon' => 'GoogleIcon',
            'client_id' => env('GOOGLE_CLIENT_ID'),
            'client_secret' => env('GOOGLE_CLIENT_SECRET'),
            'redirect' => env('GOOGLE_REDIRECT'),
        ],
        'facebook' => [
            'active' => true,
            'branded' => false,
            'name' => 'Facebook',
            'icon' => 'FacebookIcon',
            'client_id' => env('FACEBOOK_CLIENT_ID'),
            'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
            'redirect' => env('FACEBOOK_REDIRECT'),
        ],
        'github' => [
            'active' => true,
            'branded' => false,
            'name' => 'GitHub',
            'icon' => 'GithubIcon',
            'client_id' => env('GITHUB_CLIENT_ID'),
            'client_secret' => env('GITHUB_CLIENT_SECRET'),
            'redirect' => env('GITHUB_REDIRECT'),
        ],
        'linkedin' => [
            'active' => true,
            'branded' => false,
            'name' => 'LinkedIn',
            'icon' => 'LinkedInIcon',
            'client_id' => env('LINKEDIN_CLIENT_ID'),
            'client_secret' => env('LINKEDIN_CLIENT_SECRET'),
            'redirect' => env('LINKEDIN_REDIRECT'),
        ],
    ],
];

---

8️⃣ Update the register and login pages

You need to update your controllers to use these pages and pass the required props.

React Pages

• resources/js/pages/auth/register-social.tsx
• resources/js/pages/auth/login-social.tsx

Vue Pages

• resources/js/pages/auth/RegisterSocial.vue
• resources/js/pages/auth/LoginSocial.vue

Modify AuthenticatedSessionController.php for Login Ensure the login controller passes providersConfig as a prop:

    public function create(Request $request): Response
    {
        // React
        return Inertia::render('auth/login-social', [
            'canResetPassword' => Route::has('password.request'),
            'status' => $request->session()->get('status'),
            'providersConfig' => $request->attributes->get('providersConfig'),
        ]);

        // Vue
        return Inertia::render('auth/LoginSocial', [
            'canResetPassword' => Route::has('password.request'),
            'status' => $request->session()->get('status'),
            'providersConfig' => $request->attributes->get('providersConfig'),
        ]);
    }

Modify RegisteredUserController.php for Register Ensure the login controller passes providersConfig as a prop:

    public function create(Request $request): Response
    {
        // React
        return Inertia::render('auth/register-social', [
            'providersConfig' => $request->attributes->get('providersConfig'),
        ]);

        // Vue
        return Inertia::render('auth/RegisterSocial', [
            'providersConfig' => $request->attributes->get('providersConfig'),
        ]);
    }

---

🧪 Testing

The package includes tests located in the tests/Feature/SocialitePlus directory. These tests ensure that the core functionalities of the package are working as expected.

Test Files

• HandleSocialitePlusProvidersTest.php: Tests the middleware responsible for filtering active social providers.
• SocialitePlusControllerTest.php: Tests the controller handling social authentication redirects and callbacks.

Running Tests

To run the tests, use the following command:

php artisan test

This command will execute all the tests and provide feedback on their success or failure.

---

🔒 Security

If you discover any security-related issues, please email mike.deeming@blaspsoft.com instead of using the issue tracker.

---

📜 Credits

• Michael Deeming

---

📄 License

This package is licensed under MIT. See LICENSE.md for details.