Laravel Social login Integrations 2023 (Facebook-Instagram-LinkedIn-Twitter)

Effortlessly integrate social login functionality into your Laravel application in 2023. Learn how to enable seamless user authentication via Facebook, Instagram, LinkedIn, and Twitter. Enhance user experience and streamline registration with step-by-step integration guides

Facebook Integration

1.Set up a Facebook App:

• Go to the Facebook Developer website (https://developers.facebook.com/), log in with your Facebook account, and create a new app.
• Obtain the App ID and App Secret, which you’ll need later for authentication.

2.Install Laravel Socialite:

• Laravel Socialite is a popular package that simplifies the social authentication process. You can install it via Composer by running the following command in your Laravel project folder:

composer require laravel/socialite

3.Configure Facebook OAuth:

• Open the config/services.php file and add your Facebook App credentials:

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

4.Create Routes and Controller:

• Define routes in routes/web.php to handle the Facebook login and callback:

Route::get('/login/facebook', 'AuthController@redirectToFacebook');
Route::get('/login/facebook/callback', 'AuthController@handleFacebookCallback');

5.Create AuthController:

• Generate a controller to handle the authentication process:

php artisan make:controller AuthController

• Implement the methods for redirecting to Facebook and handling the callback in AuthController:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
use Exception;

class AuthController extends Controller
{
    public function redirectToFacebook()
    {
        return Socialite::driver('facebook')->redirect();
    }

    public function handleFacebookCallback()
    {
        try {
            $user = Socialite::driver('facebook')->user();
            // Now you can store the user data in your database or use it as needed.
            // For example, you can retrieve the user's profile name and show it after the button.
            $profileName = $user->getName();
            return view('facebook-profile', compact('profileName'));
        } catch (Exception $e) {
            // Handle the error if the authentication fails.
            // You can redirect back with a message or show an error page.
            return redirect('/')->with('error', 'Facebook login failed');
        }
    }
}

6.Create a Blade view file:

• Create a Blade view file (e.g., facebook-profile.blade.php) to display the user’s profile name:

<h1>Hello, {{ $profileName }}</h1>

7.Add the buttons in your existing view:

• In the view where you have your social buttons (e.g., Facebook), add the URL to the login route and any relevant styling or icons for the button:

<a href="{{ url('/login/facebook') }}">
    <button>Connect with Facebook</button>
</a>

When a user clicks the “Connect with Facebook” button, they will be redirected to the Facebook login page to authenticate their account. Once authenticated, they will be redirected back to your application’s callback URL (/login/facebook/callback), and the user’s Facebook profile name will be displayed on the facebook-profile.blade.php view.

---

Instagram Integration:

• Follow steps 1-3 from the Facebook integration section to create a new app and obtain the Instagram App ID and App Secret.
• Add the Instagram credentials to your config/services.php file:

'instagram' => [
    'client_id' => env('INSTAGRAM_CLIENT_ID'),
    'client_secret' => env('INSTAGRAM_CLIENT_SECRET'),
    'redirect' => env('INSTAGRAM_REDIRECT'),
],

• Define the routes for Instagram login and callback in routes/web.php:

Route::get('/login/instagram', 'AuthController@redirectToInstagram');
Route::get('/login/instagram/callback', 'AuthController@handleInstagramCallback');

• Modify the AuthController to include methods for Instagram login and callback:

public function redirectToInstagram()
{
    return Socialite::driver('instagram')->redirect();
}

public function handleInstagramCallback()
{
    try {
        $user = Socialite::driver('instagram')->user();
        $profileName = $user->getName(); // Instagram doesn't provide a username by default, so this may not always work.
        return view('instagram-profile', compact('profileName'));
    } catch (Exception $e) {
        return redirect('/')->with('error', 'Instagram login failed');
    }
}

---

LinkedIn Integration:

• Follow steps 1-3 from the Facebook integration section to create a new app and obtain the LinkedIn App ID and App Secret.
• Add the LinkedIn credentials to your config/services.php file:

'linkedin' => [
    'client_id' => env('LINKEDIN_CLIENT_ID'),
    'client_secret' => env('LINKEDIN_CLIENT_SECRET'),
    'redirect' => env('LINKEDIN_REDIRECT'),
],

• Define the routes for LinkedIn login and callback in routes/web.php:

Route::get('/login/linkedin', 'AuthController@redirectToLinkedIn');
Route::get('/login/linkedin/callback', 'AuthController@handleLinkedInCallback');

• Modify the AuthController to include methods for LinkedIn login and callback:

public function redirectToLinkedIn()
{
    return Socialite::driver('linkedin')->redirect();
}

public function handleLinkedInCallback()
{
    try {
        $user = Socialite::driver('linkedin')->user();
        $profileName = $user->getName();
        return view('linkedin-profile', compact('profileName'));
    } catch (Exception $e) {
        return redirect('/')->with('error', 'LinkedIn login failed');
    }
}

---

Twitter Integration:

• Follow steps 1-3 from the Facebook integration section to create a new app and obtain the Twitter API Key and API Secret Key.
• Add the Twitter credentials to your config/services.php file:

'twitter' => [
    'client_id' => env('TWITTER_API_KEY'),
    'client_secret' => env('TWITTER_API_SECRET'),
    'redirect' => env('TWITTER_REDIRECT'),
],

• Define the routes for Twitter login and callback in routes/web.php:

Route::get('/login/twitter', 'AuthController@redirectToTwitter');
Route::get('/login/twitter/callback', 'AuthController@handleTwitterCallback');

• Modify the AuthController to include methods for Twitter login and callback:

public function redirectToTwitter()
{
    return Socialite::driver('twitter')->redirect();
}

public function handleTwitterCallback()
{
    try {
        $user = Socialite::driver('twitter')->user();
        $profileName = $user->getName();
        return view('twitter-profile', compact('profileName'));
    } catch (Exception $e) {
        return redirect('/')->with('error', 'Twitter login failed');
    }
}

Create the corresponding Blade views:

• For each social platform, create a corresponding Blade view file (e.g., instagram-profile.blade.php, linkedin-profile.blade.php, twitter-profile.blade.php) to display the user’s profile name.

Add the buttons in your existing view:

• In the view where you have your social buttons, add the URLs to the login routes for each platform along with any relevant styling or icons for the buttons.

By following these steps, you should now have integrated Instagram, LinkedIn, and Twitter logins into your Laravel application. When users click on the respective buttons and authenticate with the social platforms, their profile names will be displayed on the corresponding profile views.

More Posts