Make social login using Laravel in 5 minutes for rich UX.

Social login is a powerful feature that can enhance your web application’s user experience. It allows users to log in using their Google, Facebook, or other social media accounts, providing a faster and more secure authentication process. In this guide, we’ll walk you through how to implement social login using Laravel and the Socialite package.

We’ll use Google and Facebook as examples, but once you understand the basics, you’ll be able to add other social login providers easily.

1. Run the Project

Before we begin, make sure you have a Laravel project set up and running. If you don’t have one, you can quickly create a new project using Composer.

Command:

composer create-project --prefer-dist laravel/laravel social-login-app
cd social-login-app
php artisan serve

This command will create a new Laravel project and start the development server. Once it’s running, you can proceed with the integration of social logins.

---

2. Get the Socialite Package

To integrate social logins in Laravel, we’ll use the Socialite package. Socialite makes it easy to authenticate with OAuth providers such as Google, Facebook, GitHub, and others.

Install Socialite:

composer require laravel/socialite

Once the package is installed, open the config/app.php file and add the Socialite service provider to the providers array if it’s not automatically added.

Example:

'providers' => [
    // Other Service Providers
    Laravel\Socialite\SocialiteServiceProvider::class,
],

Also, add the alias in the aliases array:

'aliases' => [
    // Other Facades
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

---

3. Add Config

Next, we need to configure the services for Google and Facebook. Open the config/services.php file and add the following configuration:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('GOOGLE_REDIRECT_URI'),
],

'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
    'redirect' => env('FACEBOOK_REDIRECT_URI'),
],

This tells Laravel where to find the credentials for Google and Facebook OAuth.

---

4. Update Routes

Next, we’ll update the routes to handle social logins. Open the routes/web.php file and add the following routes:

use Laravel\Socialite\Facades\Socialite;

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

These routes will handle the redirection to the OAuth provider and the callback after authentication.

---

5. Create OAuth App

For social login to work, you need to create OAuth apps on both Google and Facebook. You will get the required client_id, client_secret, and redirect_uri for each platform.

• Google: Go to Google Developer Console, create a new project, and set up OAuth credentials for Web Applications. Provide the callback URL as http://your-domain.com/login/google/callback.
• Facebook: Go to Facebook Developer Portal, create a new app, and configure the OAuth credentials under “Settings > Basic”. Set the callback URL as http://your-domain.com/login/facebook/callback.

Once created, note down the client_id, client_secret, and redirect_uri for both providers.

---

6. Update Environment Variables

Add the credentials you obtained into the .env file of your Laravel project.

Example:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI=http://your-domain.com/login/google/callback

FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret
FACEBOOK_REDIRECT_URI=http://your-domain.com/login/facebook/callback

This ensures that the application connects to the correct OAuth providers using your credentials.

---

7. Check Application

Once the setup is complete, you can now test your social login. Visit the login route for Google and Facebook respectively:

• http://your-domain.com/login/google
• http://your-domain.com/login/facebook

If everything is set up correctly, you should be redirected to the respective social login provider and then back to your application after a successful login.

In your LoginController, you will need to handle the redirection and user data:

public function redirectToProvider($provider)
{
    return Socialite::driver($provider)->redirect();
}

public function handleProviderCallback($provider)
{
    $user = Socialite::driver($provider)->user();

    // Here, you can retrieve user info and log the user in or register them
    // Example: 
    // $user->getName(), $user->getEmail(), $user->getAvatar()

    // Add logic to store user in DB or authenticate user
}

---

8. Best Practices

• Security: Always validate the OAuth responses properly to ensure the data comes from a trusted source.
• Error Handling: Ensure you handle any exceptions that may occur during the authentication process (e.g., invalid tokens or expired sessions).
• User Experience: Customize the user flow for the best experience. Offer users multiple social login options and fallback mechanisms if one fails.
• Keep Dependencies Updated: Socialite and its providers may release updates or security patches. Keep your dependencies updated to avoid vulnerabilities.

---

Conclusion

Adding social login to your Laravel project enhances user convenience and speeds up the onboarding process. With Socialite, Laravel makes it easy to implement secure and user-friendly social login. By following the steps outlined in this guide, you can integrate both Google and Facebook login with minimal effort and give your users a smooth, modern authentication experience.