A social login, also known as a social sign-in, is a kind of single sign-on where you use the existing login information of a social network like Facebook, Twitter, Google+, Github, etc to log on to a third party website, instead of creating a new log-in account, especially for that website.
Social logins are mainly designed for simplifying the login process for users and to realize a higher conversion rate for registrations. Of course, it’s easier when the user doesn’t have to create a new login account, meaning to think of a new username and password, and to remember it!
This tutorial covers how to set up the Laravel Socialite package to enable users sign in to our Laravel application via their facebook accounts.
In this article, we’d be learning the following:
How to Create a Facebook Application and get its App ID and secret keys.
How to Install and configure the Laravel Socialite Package
How to Display a Login with Facebook button.
Creating / Configuring a Facebook App and grabbing Credentials
The first step to achieving this would be to head over to the facebook developer’s website and click on the Create App link button.
Open the facebook developer’s website and creating a new app
On doing this, a modal pops up where we have to enter the name of our application, enter in a preferred name for the app and proceed to click on the Create App ID button.
Enter your app name.
Once the name has been submitted, you are redirected to the app dashboard where you can configure your application and grab keys. the next step here is to click on the + icon next to the ‘products‘ menu on the left sidebar.
Next, select ‘Facebook Login’ as shown in the image below:
<figure class="wp-block-image size-large"><div data-gatsby-image-wrapper="" style="position:relative;overflow:hidden;display:inline-block;vertical-align:top" class="gatsby-image-wrapper gatsby-image-wrapper-constrained alignnone size-full wp-image-757 inline-gatsby-image-wrapper" data-reactroot=""><div style="max-width:720px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='260' width='720' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="height:100%;left:0;position:absolute;top:0;width:100%"></div><picture><source type="image/webp" data-srcset="/static/72fdcbc0efdf81f472deb94b6662897c/bfe92/select-facebook-login-2.webp 180w,/static/72fdcbc0efdf81f472deb94b6662897c/88d5e/select-facebook-login-2.webp 360w,/static/72fdcbc0efdf81f472deb94b6662897c/c80e3/select-facebook-login-2.webp 720w" sizes="(min-width: 720px) 720px, 100vw"/><img data-gatsby-image-ssr="" data-wp-inline-image="4" data-main-image="" style="height:100%;left:0;position:absolute;top:0;transform:translateZ(0);transition:opacity 250ms linear;width:100%;will-change:opacity;opacity:0" sizes="(min-width: 720px) 720px, 100vw" decoding="async" loading="lazy" data-src="/static/72fdcbc0efdf81f472deb94b6662897c/471ce/select-facebook-login-2.png" data-srcset="/static/72fdcbc0efdf81f472deb94b6662897c/76f9b/select-facebook-login-2.png 180w,/static/72fdcbc0efdf81f472deb94b6662897c/f50cf/select-facebook-login-2.png 360w,/static/72fdcbc0efdf81f472deb94b6662897c/471ce/select-facebook-login-2.png 720w" alt=""/></picture><noscript><picture><source type="image/webp" srcSet="/static/72fdcbc0efdf81f472deb94b6662897c/bfe92/select-facebook-login-2.webp 180w,/static/72fdcbc0efdf81f472deb94b6662897c/88d5e/select-facebook-login-2.webp 360w,/static/72fdcbc0efdf81f472deb94b6662897c/c80e3/select-facebook-login-2.webp 720w" sizes="(min-width: 720px) 720px, 100vw"/><img data-gatsby-image-ssr="" data-wp-inline-image="4" data-main-image="" style="height:100%;left:0;position:absolute;top:0;transform:translateZ(0);transition:opacity 250ms linear;width:100%;will-change:opacity;opacity:0" sizes="(min-width: 720px) 720px, 100vw" decoding="async" loading="lazy" src="/static/72fdcbc0efdf81f472deb94b6662897c/471ce/select-facebook-login-2.png" srcSet="/static/72fdcbc0efdf81f472deb94b6662897c/76f9b/select-facebook-login-2.png 180w,/static/72fdcbc0efdf81f472deb94b6662897c/f50cf/select-facebook-login-2.png 360w,/static/72fdcbc0efdf81f472deb94b6662897c/471ce/select-facebook-login-2.png 720w" alt=""/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1)}}
Next, select the “Web” options and enter <code>https://localhost:8000</code> as your site URL.
<figure class="wp-block-image size-large"><img loading="lazy" class="alignnone size-full wp-image-758" src="/static/7b44d4b42db61fc0503ffe6211343beb/Geekzoneguy-Facebook-Login-Facebook-for-Developers-3.png" width="720" height="313" alt="" srcset="/static/7b44d4b42db61fc0503ffe6211343beb/Geekzoneguy-Facebook-Login-Facebook-for-Developers-3.png 720w, https://gb.codesource.io/wp-content/uploads/2019/11/Geekzoneguy-Facebook-Login-Facebook-for-Developers-3-300x130.png 300w, https://gb.codesource.io/wp-content/uploads/2019/11/Geekzoneguy-Facebook-Login-Facebook-for-Developers-3-100x43.png 100w, https://gb.codesource.io/wp-content/uploads/2019/11/Geekzoneguy-Facebook-Login-Facebook-for-Developers-3-700x304.png 700w" sizes="(max-width: 720px) 100vw, 720px" /></figure>
Once that is done, click on the settings tab next and go over to your Valid OAuth Redirect URIs input field and enter <code>https://localhost:8000/callback</code> .
<figure class="wp-block-image size-large"><div data-gatsby-image-wrapper="" style="position:relative;overflow:hidden;display:inline-block;vertical-align:top" class="gatsby-image-wrapper gatsby-image-wrapper-constrained alignnone size-full wp-image-759 inline-gatsby-image-wrapper" data-reactroot=""><div style="max-width:719px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='313' width='719' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="height:100%;left:0;position:absolute;top:0;width:100%"></div><picture><source type="image/webp" data-srcset="/static/35185e7d6134f5ca7e97394d0b0a0b9b/e7dfb/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.webp 180w,/static/35185e7d6134f5ca7e97394d0b0a0b9b/1dfe5/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.webp 360w,/static/35185e7d6134f5ca7e97394d0b0a0b9b/ca418/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.webp 719w" sizes="(min-width: 719px) 719px, 100vw"/><img data-gatsby-image-ssr="" data-wp-inline-image="5" data-main-image="" style="height:100%;left:0;position:absolute;top:0;transform:translateZ(0);transition:opacity 250ms linear;width:100%;will-change:opacity;opacity:0" sizes="(min-width: 719px) 719px, 100vw" decoding="async" loading="lazy" data-src="/static/35185e7d6134f5ca7e97394d0b0a0b9b/a8248/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.png" data-srcset="/static/35185e7d6134f5ca7e97394d0b0a0b9b/f2688/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.png 180w,/static/35185e7d6134f5ca7e97394d0b0a0b9b/70ee4/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.png 360w,/static/35185e7d6134f5ca7e97394d0b0a0b9b/a8248/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.png 719w" alt=""/></picture><noscript><picture><source type="image/webp" srcSet="/static/35185e7d6134f5ca7e97394d0b0a0b9b/e7dfb/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.webp 180w,/static/35185e7d6134f5ca7e97394d0b0a0b9b/1dfe5/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.webp 360w,/static/35185e7d6134f5ca7e97394d0b0a0b9b/ca418/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.webp 719w" sizes="(min-width: 719px) 719px, 100vw"/><img data-gatsby-image-ssr="" data-wp-inline-image="5" data-main-image="" style="height:100%;left:0;position:absolute;top:0;transform:translateZ(0);transition:opacity 250ms linear;width:100%;will-change:opacity;opacity:0" sizes="(min-width: 719px) 719px, 100vw" decoding="async" loading="lazy" src="/static/35185e7d6134f5ca7e97394d0b0a0b9b/a8248/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.png" srcSet="/static/35185e7d6134f5ca7e97394d0b0a0b9b/f2688/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.png 180w,/static/35185e7d6134f5ca7e97394d0b0a0b9b/70ee4/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.png 360w,/static/35185e7d6134f5ca7e97394d0b0a0b9b/a8248/Geekzoneguy-Facebook-Login-Facebook-for-Developers-1-2.png 719w" alt=""/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1)}}
Save your changes and proceed to the settings->basic page, once on the dashboard, copy the App ID and App Secret key in a safe place eg a notepad.
<figure class="wp-block-image size-large"><div data-gatsby-image-wrapper="" style="position:relative;overflow:hidden;display:inline-block;vertical-align:top" class="gatsby-image-wrapper gatsby-image-wrapper-constrained alignnone size-full wp-image-760 inline-gatsby-image-wrapper" data-reactroot=""><div style="max-width:719px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='313' width='719' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="height:100%;left:0;position:absolute;top:0;width:100%"></div><picture><source type="image/webp" data-srcset="/static/d3ffc72676c954ba5eabe4db40501aa0/e7dfb/copy-your-keys-2.webp 180w,/static/d3ffc72676c954ba5eabe4db40501aa0/1dfe5/copy-your-keys-2.webp 360w,/static/d3ffc72676c954ba5eabe4db40501aa0/ca418/copy-your-keys-2.webp 719w" sizes="(min-width: 719px) 719px, 100vw"/><img data-gatsby-image-ssr="" data-wp-inline-image="6" data-main-image="" style="height:100%;left:0;position:absolute;top:0;transform:translateZ(0);transition:opacity 250ms linear;width:100%;will-change:opacity;opacity:0" sizes="(min-width: 719px) 719px, 100vw" decoding="async" loading="lazy" data-src="/static/d3ffc72676c954ba5eabe4db40501aa0/a8248/copy-your-keys-2.png" data-srcset="/static/d3ffc72676c954ba5eabe4db40501aa0/f2688/copy-your-keys-2.png 180w,/static/d3ffc72676c954ba5eabe4db40501aa0/70ee4/copy-your-keys-2.png 360w,/static/d3ffc72676c954ba5eabe4db40501aa0/a8248/copy-your-keys-2.png 719w" alt=""/></picture><noscript><picture><source type="image/webp" srcSet="/static/d3ffc72676c954ba5eabe4db40501aa0/e7dfb/copy-your-keys-2.webp 180w,/static/d3ffc72676c954ba5eabe4db40501aa0/1dfe5/copy-your-keys-2.webp 360w,/static/d3ffc72676c954ba5eabe4db40501aa0/ca418/copy-your-keys-2.webp 719w" sizes="(min-width: 719px) 719px, 100vw"/><img data-gatsby-image-ssr="" data-wp-inline-image="6" data-main-image="" style="height:100%;left:0;position:absolute;top:0;transform:translateZ(0);transition:opacity 250ms linear;width:100%;will-change:opacity;opacity:0" sizes="(min-width: 719px) 719px, 100vw" decoding="async" loading="lazy" src="/static/d3ffc72676c954ba5eabe4db40501aa0/a8248/copy-your-keys-2.png" srcSet="/static/d3ffc72676c954ba5eabe4db40501aa0/f2688/copy-your-keys-2.png 180w,/static/d3ffc72676c954ba5eabe4db40501aa0/70ee4/copy-your-keys-2.png 360w,/static/d3ffc72676c954ba5eabe4db40501aa0/a8248/copy-your-keys-2.png 719w" alt=""/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1)}}
Scaffolding Laravel Application With Authentication
Head over to your terminal and run the following commands:
Step 2: In the same config folder, open up services.php and add the following
Still, on the socialite configurations, switch to services.php still inside the config folder, add this block of code:
Creating Our Models and Migrations and Setting up our Controllers
Now that our configurations are done, let’s set up a controller to handle login with facebook. In your terminal, run:
In the SocialAuthFacebookController.php file, we’ll add two methods: redirect() to redirect the user to Facebook and callback() to handle the user’s credentials when called back from facebook. To achieve this, we add the following block of code to our controller:
namespace App\Http\Controllers;use Illuminate\Http\Request;
use Socialite;
use App\Services\SocialFacebookAccountService;class SocialAuthFacebookController extends Controller
{
/**
* Create a redirect method to facebook api.
*
* @return void
*/
public function redirect()
{
return Socialite::driver('facebook')->redirect();
} /**
* Return a callback method from facebook api.
*
* @return callback URL from facebook
*/
public function callback(SocialFacebookAccountService $service)
{
$user = $service->createOrGetUser(Socialite::driver('facebook')->user());
auth()->login($user);
return redirect()->to('/home');
}
}
The next step is to update our route/web.php file and add:
Once our Controller is set, run the command below to create a SocialFacebookAccount model and a migration:
php artisan make:model SocialFacebookAccount -m
Thereafter, proceed to App/SocialFacebookAccount.php to set up the code for our model,
// SocialFacebookAccount.php
namespace App;
use Illuminate\Database\Eloquent\Model;class SocialFacebookAccount extends Model
{
protected $fillable = ['user_id', 'provider_user_id', 'provider'];
public function user()
{
return $this->belongsTo(User::class);
}
}
Next, Navigate to database/migrations/create_social_facebook_accounts_table.php and replace the file with the following lines of code:
// create_social_facebook_accounts.php use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration; class CreateSocialFacebookAccountsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('social_facebook_accounts', function (Blueprint $table) {
$table->integer('user_id');
$table->string('provider_user_id');
$table->string('provider');
$table->timestamps();
});
} /**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('social_facebook_accounts');
}
}
After modifying the migration file above, open up the terminal and run the following command to refresh our database tables:
php artisan migrate:refresh
Updating the login view to show the “login with Facebook” button.
To do this, open up resources/views/auth/login.blade.php and in a preferred div, add the following block of code:
