Login with Facebook In Laravel 7/6 Example

In this tutorial you will learn about the Login with Facebook In Laravel 7/6 Example and its application with practical example.

In this Login with facebook in Laravel 7/6 example tutorial I’ll show you how to integrate facebook login in laravel 7/6 using socialite package. Integrating Facebook login in Laravel 7/6 using socialite package is much easier. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application.

Table Of Contents−

In this step by step tutorial, you will learn to integrate Facebook login with your laravel 7/6 application. Please follow the steps give below:

Step 1: Install Laravel New App
Step 2: Connect App to Database
Step 3: Download Socialite Package

Step 4: Create Facebook App
Step 5: Create Auth Scaffolding
Step 6: Add Route

Step 7: Create Controller By Artisan Command
Step 8: Add Facebook Login Button On Blade View
Step 9: Run Development Server

Step 1: Install Laravel New App

First of all we need to create a fresh laravel project, download and install Laravel using the below command

composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

Step 2: Connect App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
  DB_HOST=127.0.0.1 
  DB_PORT=3306 
  DB_DATABASE=here your database name here
  DB_USERNAME=here database username here
  DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Download Socialite Package

In this step we will Install Socialite Package via Composer using following command:

composer require laravel/socialite

1	composer require laravel/socialite

After Installing ‘socialite’ package, we need to add service provider and alias in config/app.php file as following.

config/app.php

'providers' => [
      // Other service providers…
  Laravel\Socialite\SocialiteServiceProvider::class,
 ],

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

'providers' => [

// Other service providers…

Laravel\Socialite\SocialiteServiceProvider::class,

'aliases' => [

// Other aliases…

'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Step 4: Create Facebook App

Step 1:-
Go to Facebook’s developers site https://developers.facebook.com/ and log in with your Facebook account. There in Facebook developers Dashboard you have option to Create App. Lets create a Facebook Login App simply providing App Name and Contact Email.

Step 2:-
After creating the facebook app, go to setting->advanced and set redirect url

Step 3:-
Then, go to Facebook Login -> Settings and scroll down to “Valid OAuth Redirect URL” and set your callback URL

Step 4:-
After creating app, go to Settings -> Basic and get your newly created App ID and App Secret. Now, go to config directory and open service.php file and add the client id, secret and callback url:

'facebook' => [
     'client_id' => 'xxxx',
     'client_secret' => 'xxx',
     'redirect' => 'http://127.0.0.1:8000/callback/facebook',
   ],

'facebook' => [

'client_id' => 'xxxx',

'client_secret' => 'xxx',

'redirect' => 'http://127.0.0.1:8000/callback/facebook',

Now, go to User.php model and add fillable property like below:

protected $fillable = [

         'name', 'email', 'password', 'provider', 'provider_id'

     ];

protected $fillable = [

'name', 'email', 'password', 'provider', 'provider_id'

];

Now, go to database/migrations directory and open create_users_table.php. Then put the following code into it:

<?php
 use Illuminate\Support\Facades\Schema;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Database\Migrations\Migration;
 class CreateUsersTable extends Migration
 {
 /**
 Run the migrations.
 *
 @return void
 */
 public function up()
 {
 Schema::create('users', function (Blueprint $table) {
     $table->increments('id');
     $table->string('name');
     $table->string('email')->unique()->nullable();
     $table->string('provider');
     $table->string('provider_id');
     $table->timestamp('email_verified_at')->nullable();
     $table->string('password')->nullable();
     $table->rememberToken()->nullable();
     $table->timestamps();
 });
 } 
 /**
 Reverse the migrations.
 *
 @return void
 */
 public function down()
 {
 Schema::dropIfExists('users');
 }
 }

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration

{

/**

Run the migrations.

@return void

public function up()

{

Schema::create('users', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->string('email')->unique()->nullable();

$table->string('provider');

$table->string('provider_id');

$table->timestamp('email_verified_at')->nullable();

$table->string('password')->nullable();

$table->rememberToken()->nullable();

$table->timestamps();

});

}

/**

Reverse the migrations.

@return void

public function down()

{

Schema::dropIfExists('users');

}

Before you run PHP artisan migrate command. Navigate to app/providers/ directory and open AppServiceProvider.php. Then add the following code into it:

…
 use Illuminate\Support\Facades\Schema; 
….
 function boot()
 {
     Schema::defaultStringLength(191);
 }
 …

…

use Illuminate\Support\Facades\Schema;

….

function boot()

{

Schema::defaultStringLength(191);

}

…

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Step 5: Create Auth Scaffolding

Install Laravel UI

composer require laravel/ui

1	composer require laravel/ui

Create Auth

php artisan ui bootstrap --auth

1	php artisan ui bootstrap --auth

NPM Install

npm install

1	npm install

Step 6: Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('/auth/redirect/{provider}', 'SocialController@redirect');
  Route::get('/callback/{provider}', 'SocialController@callback');

1 2	Route::get('/auth/redirect/{provider}', 'SocialController@redirect'); Route::get('/callback/{provider}', 'SocialController@callback');

Step 7: Create Controller By Artisan Command

Now, lets create a controller named SocialController using command given below –

php artisan make:controller SocialController

1	php artisan make:controller SocialController

Now, go to app/http/controllers/ directory and open SocialController.php. Then put the following code into your SocialController.php file

<?php
 namespace App\Http\Controllers;
 use Illuminate\Http\Request;
 use Validator,Redirect,Response,File;
 use Socialite;
 use App\User;
 class SocialController extends Controller
 {
 public function redirect($provider)
 {
     return Socialite::driver($provider)->redirect();
 }
 public function callback($provider)
 {
   $getInfo = Socialite::driver($provider)->user(); 
   $user = $this->createUser($getInfo,$provider); 
   auth()->login($user); 
   return redirect()->to('/home');
 }
 function createUser($getInfo,$provider){
 $user = User::where('provider_id', $getInfo->id)->first();
 if (!$user) {
      $user = User::create([
         'name'     => $getInfo->name,
         'email'    => $getInfo->email,
         'provider' => $provider,
         'provider_id' => $getInfo->id
     ]);
   }
   return $user;
 }
 }

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response,File;

use Socialite;

use App\User;

class SocialController extends Controller

{

public function redirect($provider)

{

return Socialite::driver($provider)->redirect();

}

public function callback($provider)

{

$getInfo = Socialite::driver($provider)->user();

$user = $this->createUser($getInfo,$provider);

auth()->login($user);

return redirect()->to('/home');

}

function createUser($getInfo,$provider){

$user = User::where('provider_id', $getInfo->id)->first();

if (!$user) {

$user = User::create([

'name' => $getInfo->name,

'email' => $getInfo->email,

'provider' => $provider,

'provider_id' => $getInfo->id

]);

}

return $user;

}

In this step, you need to add Facebook login button in blade views file. Now, go to resources/views/Auth directory and open login.blade.php. Then put Facebook social login button in login.blade.php file

<hr>
<div class="form-group row mb-0">
 <div class="col-md-8 offset-md-4">
    <a href="{{ url('/auth/redirect/facebook') }}" class="btn btn-primary"><i class="fa fa-facebook"></i> Facebook</a>
</div>
</div>

<hr>

<a href="{{ url('/auth/redirect/facebook') }}" class="btn btn-primary"><i class="fa fa-facebook"></i> Facebook</a>

</div>

Now, go to resources/views/Auth directory and open register.blade.php. Then add Facebook social login button in register.blade.php file:

<hr>
<div class="form-group row mb-0">
 <div class="col-md-8 offset-md-4">
    <a href="{{ url('/auth/redirect/facebook') }}" class="btn btn-primary"><i class="fa fa-facebook"></i> Facebook</a>
</div>
</div>

<hr>

<a href="{{ url('/auth/redirect/facebook') }}" class="btn btn-primary"><i class="fa fa-facebook"></i> Facebook</a>

</div>

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/login

 Or direct hit in your browser

 http://localhost/blog/public/login

http://127.0.0.1:8000/login

Or direct hit in your browser

http://localhost/blog/public/login

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Step 1: Install Laravel New App

Step 2: Connect App to Database

Step 3: Download Socialite Package

Step 4: Create Facebook App

Step 5: Create Auth Scaffolding

Install Laravel UI

Create Auth

NPM Install

Step 6: Add Route

Step 7: Create Controller By Artisan Command

Step 9: Run Development Server

Laravel 9 Livewire Pagination with Search

Laravel 9 Livewire Pagination Example

Laravel 9 Check User Login, Online Status & Last Seen

codeigniter 4 image upload example tutorial

Laravel 9 Livewire Charts Example

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Multiple Image Upload

Laravel 9 Livewire Image Upload

Laravel 9 Livewire Submit Form

Laravel 9 Simple CRUD Application Example