Adding Facebook Authentication to a Laravel Website
With social authentication, users do not have to fill out forms in order to register on your website; they also do not need to remember another password in other to access their accounts on your website. This article will provide a step-by-step process to add Facebook authentication to your website
Assumptions:
This tutorial assumes that you have PHP and Composer installed on your computer. It also uses XAMPP’s Apache and MySQL installations. It is therefore assumed that the reader is familiar with XAMPP. Visit the Composer and XAMPP websites to download them.
1. Create a new Laravel project
Run the following on your command line to create a new Laravel project called social-auth
composer create-project laravel/laravel social-auth
2. Configure your database setup
You can do this in two steps:
- Create a new database called “social-auth” in phpMyAdmin
- Edit your .env file with the appropriate details as shown below
3. Setup your basic authentication system with Laravel Breeze
Laravel 8 provides three free authentication starter packages: Laravel Breeze, Laravel Jetstream, and Laravel Fortify. For this tutorial, we will be using Laravel Breeze. Feel free to use whichever you want. It should not make a difference for what we need to do here.
To setup Laravel Breeze, run the following lines in the order they appear on your command line:
composer require laravel/breeze --devphp artisan breeze:installnpm installnpm run devphp artisan migrate
4. Make the email field in your users migration file nullable
Facebook allows users to signup with phone numbers as well as email. The ‘email’ field for user information provided by the Facebook authentication API might therefore be null. Making the email field nullable will therefore help you avoid an “SQLSTATE[23000]: Integrity constraint violation” error.
Run the following line to reflect the change in your database.
php artisan migrate:refresh
5. Install Laravel Socialite and add provider and alias in your config file
Run the following line on your command line to install Laravel Socialite
composer require laravel/socialite
In your config/app.php, add Socialite to your providers and aliases arrays thus:
....
....
'providers' => [
....
....
Laravel\Socialite\SocialiteServiceProvider::class,
],
'aliases' => [
....
....
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],
....
....
6. Create a new Facebook app
Follow this link to create a new facebook app. When on the page do the following:
- Click the Create app button
2. When this page appears, click the “consumer” option and continue
3. After that, you get a screen that looks like this
Fill the security check that appears and you will get a new screen a portion of which is shown below.
4. Click the “Set Up” button for the “Facebook Login” option.
5. Pick the “Web” option
6. For the next screen type “http://localhost:8000” into they Site Url input.
7. Click the next button for the rest of the steps.
8. Navigate to Settings under Facebook login and add your redirect url.
9. Navigate to the settings and then to Basic. Your applications client id and client secret will be available here.
Add a facebook entry to your config/services.php file.
return [
....
....
....
'facebook' => [
'client_id' => env('FACEBOOK_CLIENT_ID'),
'client_secret' => env('FACEBOOK_CLIENT_SECRET',
'redirect' => env('FACEBOOK_CLIENT_REDIERECT',
],
]
Add the following to your .env file. Replace the placeholders for your client id and client secret with the actual values you just acquired.
FACEBOOK_CLIENT_ID="Your Facebook app id"
FACEBOOK_CLIENT_SECRET="Your Facebook client secret"
FACEBOOK_CLIENT_REDIERECT="http://localhost:8000/auth/facebook/callback"
7. Add a“facebook_id” column to your “users” table
Run the following line in your command line to create the migration file to add a facebook_id column to the users table
php artisan make:migration add_facebook_id_to_users_table
Make the following changes to the file created.
Run the following line to update your database
php artisan migrate:refresh
8. Setup your Facebook authentication routes
Add the following lines to your routes/web.php file.
use App\Http\Controllers\SocialController;
//Facebook Authentication RoutesRoute::get('auth/facebook', [SocialController::class, 'facebookRedirect'])->name('login.facebook');Route::get('auth/facebook/callback', [SocialController::class, 'facebookCallback']);
9. Create and configure controller to handle the routes
Run the following line on your command line to create a controller to handle social authentication.
php artisan make:controller SocialController
Define facebookRedirect() and facebookCallback() as shown below:
10. Add Facebook login link to your registration and login pages
Add a copy of the link below to both the register.blade.php and login.blade.php in the resources\views\auth folder.
<div class="flex items-center justify-end mt-4">
<a href="{{ route('login.facebook') }}" class="underline text-sm text-gray-600 hover:text-gray-900">
Login With facebook
</a>
</div>
11. Voila! You are done !!
Navigating to http://localhost:8000/login
and clicking the Login with Facebook
link should allow you to test it out. All the best!!!