Laravel 5.6 - Login with Facebook using Socialite

In this Laravel 5.6 tutorial, I am going to tell you how to implement social login functionality in our Laravel application using Socialite package.

It's very important to put login functionality with social media in website to increase traffic.

Please keep in touch with us to know more about connectivity with social sites like Google +, Twitter and Github etc.

As we all know that users are not interested in registration process by filling a big form. Login with social media is a quick and powerful way to get traffic on our website and provide easiest way to login into website.

This tutorial will explain how to implement login with facebook or register with facebook account by storing user profile data in our MySQL database.

It's very easy to work with login and register functionality in Laravel 5.6 using socialite package.

Let's start

You will need facebook app id and secret key to login with facebook account in website.

You will have to follow some steps to get the Facebook APP ID and APP secret from here : https://developers.facebook.com/apps and click + Create New App.

Now you are ready to start with steps to implement login functionality.

Install Socialite Package

In this first step, I will install package to start with Socialite.

composer require laravel/socialite

After installing the socialite package, register the provider and aliases in config/app.php file.

config/app.php

'providers' => [

 ....

 Laravel\Socialite\SocialiteServiceProvider::class,

],

'aliases' => [

 ....

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

],

Configure Laravel Socialite

Now open config/services.php file to set App Id and App Secret as client_id and client_secret with call back url.

config/services.php

return [
 ....
    'facebook' => [
        'client_id' => env('FB_CLIENT_ID'),
        'client_secret' => env('FB_CLIENT_SECRET'),
        'redirect' => env('FB_CALLBACK_URL'),
    ],
]

in your .env file :

.env

FB_CLIENT_ID=xxxxxxxxx
FB_CLIENT_SECRET=xxxxxxx
FB_CALLBACK_URL=http://localhost:8000/auth/facebook/callback

Migrations and User Model

When you download the laravel application, you will see the some migration file inside database/migrations to create users table and password reset table.

Open the migration file to create users table :

database/migrations

<?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')->nullable();
            $table->string('password', 60)->nullable();
            $table->string('provider');
            $table->string('provider_id');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

If you already have laravel application then you will have to generate new migration file to add extra columns to user table and also set the email and password field to nullable.

Now run migration with following command :

php artisan migrate

User Model

Now add provider and provider_id to fillable attribute called "mass assignable" in the User Model.

app/User.php

[...]
protected $fillable = [
        'name', 'email', 'password', 'provider', 'provider_id'
    ];
[...]

Routing

Now add following two routes: one for redirecting the user to the OAuth provider and second for handle the callback url.

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

Social Auth Controller

In this step, I will add Socialite using the Socialite facade and also have to require the Auth facade.

app/Http/Controllers/Auth/SocialAuthController.php

<?php

namespace App\Http\Controllers\Auth;

use App\User;
use App\Http\Controllers\Controller;
use Socialite;
use Exception;
use Auth;

class SocialAuthController extends Controller
{

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function redirect($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    /**
     * Get the user info from provider and check if user exist for specific provider
     * then log them in otherwise
     * create a new user then log them in 
     * Once user is logged in then redirect to authenticated home page
     *
     * @return Response
     */
    public function callback($provider)
    {
        try {
            $user = Socialite::driver($provider)->user();
            $input['name'] = $user->getName();
            $input['email'] = $user->getEmail();
            $input['provider'] = $provider;
            $input['provider_id'] = $user->getId();

            $authUser = $this->findOrCreate($input);
            Auth::loginUsingId($authUser->id);

            return redirect()->route('home');


        } catch (Exception $e) {

            return redirect('auth/'.$provider);

        }
    }
    public function findOrCreate($input){
     checkIfExist = User::where('provider',$input['provider'])
                           ->where('provider_id',$input['provider_id'])          
                           ->first();

        if($checkIfExist){
            return $checkIfExist;
        }

        return User::create($input);
 }
}

Login Blade File

Now it's time to add links to the login view so that user will be able to login with facebook in our website.

resources/views/login.blade.php

[...]
<div class="container">
  <div class="row">
        <div class="col-md-12">
         <a href="{{ url('auth/facebook') }}" class="btn btn-primary">
          <i class="fa fa-facebook"></i>Login With Facebook
         </a>              
        </div>
    </div>
</div>
[...]

Try this..