Implementing Social Login in Laravel 11 with Laravel Socialite

Allowing users to sign in using their social network accounts can significantly improve their experience in contemporary web apps. Through a module named Laravel Socialite, Laravel offers a simple method for implementing social authentication. In this blog, we'll go over how to set up a social login using Laravel 11 and Socialite.

Prerequisites

• Laravel 11 installed
• A basic understanding of Laravel and its authentication system
• A social media application setup (e.g., Google)

Step 1: Install Laravel Socialite

First, install Laravel Socialite using Composer. Run the following command in the Laravel project directory:

composer require laravel/socialite

Step 2: Set Up Your Social Media Applications

Before we proceed, you need to set up your applications on the social media platforms you wish to integrate. Here are links to create applications for common platforms:

• Google: Google Developer Console
• Facebook: Facebook for Developers
• GitHub: GitHub Developer Settings

When creating the application, you’ll need to specify the redirect URL, which should be something like:

http://your-app-url.com/login/{provider}/callback

Replace {provider} with the appropriate provider name (e.g., google, facebook, github).

Step 3: Configure Socialite

After creating the social media applications, you need to add the credentials to your .env file. Here’s an example configuration for Google and Facebook:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI=http://your-app-url.com/login/google/callback
 
FACEBOOK_APP_ID=your-facebook-app-id
FACEBOOK_APP_SECRET=your-facebook-app-secret
FACEBOOK_REDIRECT_URI=http://your-app-url.com/login/facebook/callback

Step 4: Add Configuration to config/services.php

Next, you need to configure the services in config/services.php:

return [
 
    'google' => [
        'client_id' => env('GOOGLE_CLIENT_ID'),
        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
        'redirect' => env('GOOGLE_REDIRECT_URI'),
    ],
 
    'facebook' => [
        'client_id' => env('FACEBOOK_APP_ID'),
        'client_secret' => env('FACEBOOK_APP_SECRET'),
        'redirect' => env('FACEBOOK_REDIRECT_URI'),
    ],
 
];

Step 5: Create Authentication Routes

Next, you need to create routes for handling the login and callback processes. Open your routes/web.php file and add the following routes:

use App\Http\Controllers\Auth\SocialLoginController;
 
Route::get('login/{provider}', [SocialLoginController::class, 'redirectToProvider']);
Route::get('login/{provider}/callback', [SocialLoginController::class, 'handleProviderCallback']);

Step 6: Create SocialLoginController

Now, let’s create the SocialLoginController. You can create a controller using the Artisan command:

php artisan make:controller Auth/SocialLoginController

Open the newly created controller file (app/Http/Controllers/Auth/SocialLoginController.php) and add the following code:

namespace App\Http\Controllers\Auth;
 
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;
use App\Models\User;
 
class SocialLoginController extends Controller
{
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }
 
    public function handleProviderCallback($provider)
    {
        $socialUser = Socialite::driver($provider)->user();
 
        // Check if the user already exists in the database
        $user = User::where('email', $socialUser->getEmail())->first();
 
        if (!$user) {
            // Create a new user if it does not exist
            $user = User::create([
                'name' => $socialUser->getName(),
                'email' => $socialUser->getEmail(),
                'password' => bcrypt(uniqid()), // Temporary password
            ]);
        }
 
        // Log the user in
        Auth::login($user, true);
 
        return redirect()->intended('/home'); // Redirect to the intended page
    }
}

Step 7: Update the User Model

Make sure your User model can handle social login. Open app/Models/User.php and ensure the following fields are fillable:

protected $fillable = [
    'name',
    'email',
    'password',
];

Step 8: Testing

Now that everything is set up, you can test the social login feature. Start your Laravel server:

php artisan serve

Visit http://localhost:8000/login/google or http://localhost:8000/login/facebook to initiate the login process. You should be redirected to the social media platform for authentication and then back to your application.

Conclusion

Following the methods outlined above, you can successfully incorporate social login into your Laravel 11 application using Laravel Socialite. This feature simplifies the authentication process for consumers while also improving security by integrating established identity providers.

Feel free to customize this basic setup with features like error handling, user profile changes, and joining numerous social accounts.