{"id":14410,"date":"2020-06-05T13:55:09","date_gmt":"2020-06-05T13:55:09","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=14410"},"modified":"2021-11-05T10:40:16","modified_gmt":"2021-11-05T10:40:16","slug":"how-to-add-sign-in-with-facebook-feature-in-laravel","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-add-sign-in-with-facebook-feature-in-laravel\/","title":{"rendered":"How to Add Sign-in with Facebook feature in Laravel."},"content":{"rendered":"\n

In this tutorial, we\u2019re going learn how to add authentication via Facebook to a Laravel app. In Short, How to add Sign-in with Facebook<\/strong> feature in our Laravel Project. For that, we use Laravel Socialite Package which is officially provided by Laravel (you can check Documentation here<\/a>.) <\/p>\n\n\n\n

Socialite supports Facebook, Twitter, LinkedIn, Google, GitHub and Bitbucket.<\/p>\n\n\n\n

Note :-<\/strong> For using Socialite Package, you must have Laravel 5.4 or an Upper version of Laravel in your project. (Recommended 5.5 and above.)<\/strong><\/p>\n\n\n\n

I’m using Laravel 5.8 (version) in my project. So Follow the below Steps to add Sign-in with Facebook<\/strong> Functionality in your existing Laravel Project.<\/p>\n\n\n\n

Step 1 :-<\/span> <\/strong> Install Socialite using composer by below Command.<\/p>\n\n\n\n

composer require laravel\/socialite<\/strong><\/p>\n\n\n\n

Step 2 :-<\/span><\/strong> Go to config\/services.php<\/strong> and add a new Package as below.<\/p>\n\n\n\n

‘Facebook’ => [
‘client_id’ => ‘FACEBOOK_CLIENT_ID’,
‘client_secret’ => ‘FACEBOOK<\/strong>_CLIENT_SECRET’,
‘redirect’ => ‘http:\/\/your-callback-url’,
],<\/strong><\/p>\n\n\n\n

We\u2019ll obtain client_id<\/strong>, client_secret<\/strong> and redirect URL<\/strong> in next Step.<\/p>\n\n\n\n

Since we added a new package, make sure to add to the service providers<\/strong> array in config\/app.php<\/strong> (In providers<\/strong> array)<\/p>\n\n\n\n

‘providers’ => [
\/\/ Other service providers\u2026 <\/strong>
Laravel\\Socialite\\SocialiteServiceProvider::class,
],<\/strong><\/p>\n\n\n\n

Add an alias<\/strong> in config\/app.php<\/strong>, so it is easier to reference later.<\/p>\n\n\n\n

‘Socialite’ => Laravel\\Socialite\\Facades\\Socialite::class,<\/strong><\/p>\n\n\n\n

Step 3 :-<\/span><\/strong> Now, Create your app on Facebook.<\/p>\n\n\n\n

( i ) Create a Project<\/strong> :- <\/span>Go to https:\/\/developers.facebook.com\/<\/a><\/a> and click on My Apps and then Create App as shown below. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

After Clicking on Create App<\/strong> a pop-up appears like this (See below Image) :-<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In Which Fill the Display Name (Your App Name) and click on Create App ID<\/strong>. A Security check pop-up appears just pass it, and you are redirected to the App Dashboard<\/strong>.<\/p>\n\n\n\n

Now Click on Facebook Login Set-up and then click on WWW(web)<\/strong> see Below image <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After that Click on Settings<\/strong> in the left side, Fill Redirect_URL<\/strong> and then click on Save Changes. See the below image for help. :- <\/p>\n\n\n\n

Redirect URL is like your_web_URL\/login\/facebook\/callback<\/span><\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After that click on Settings–>Basic<\/strong> below Dashboard<\/strong> where you can find Your_App_ID<\/strong><\/span> and Your_App_Secret<\/strong><\/span>. See the Below Image.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

just copy <\/strong>and paste <\/strong>it in the config\/services.php<\/strong> as mentioned in Step 2<\/strong>. <\/p>\n\n\n\n

Step 4 :-<\/span><\/strong> Handle the route. Go to routes\/web.php<\/span><\/strong>. See the below code.<\/p>\n\n\n\n

Route::get(‘login\/facebook’, ‘Auth\\LoginController@redirectToProvider’);
Route::get(‘login\/facebook\/callback’, ‘Auth\\LoginController@handleProviderCallback’);<\/strong><\/p>\n\n\n\n

Step 5 :-<\/span><\/strong> Now go to loginController and paste the below code.<\/p>\n\n\n\n

use Socialite;<\/strong>

public function redirectToProvider()
{
return Socialite::driver(‘facebook’)->stateless()->redirect();
}<\/strong>

public function handleProviderCallback()
{
$user = Socialite::driver(‘facebook’)->user();
\/\/ $user->token; (return as your need)<\/span>
}<\/strong><\/p>\n\n\n\n

Step 6 :-<\/span><\/strong> Now, we make Sign-in with Facebook<\/strong> button. Just copy and paste the below code in your login page.<\/p>\n\n\n\n