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 [email protected] instead of using the issue tracker.

📜 Credits

• Michael Deeming

📄 License

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