Integrating socialite with laravel

Installing the plugin

 composer require laravel/socialite 

Setting up the files

Add the following routes to the route file.

//Social Logins
Route::get('/auth/facebook/login', [App\Http\Controllers\SocialAuthFacebookController::class, 'redirect']);
Route::get('/auth/facebook/callback', [App\Http\Controllers\SocialAuthFacebookController::class, 'callback']);

Route::get('/auth/google/login', [App\Http\Controllers\SocialAuthGoogleController::class, 'redirect']);
Route::get('/auth/google/callback', [App\Http\Controllers\SocialAuthGoogleController::class, 'callback']);

Create a new file "SocialFacebookAccount.php" with the following code.

<?php
namespace App;
use Jenssegers\Mongodb\Eloquent\Model  as Eloquent; //Use MongoDB as a model
class SocialFacebookAccount extends Eloquent
{
    protected $fillable = ['user_id', 'provider_user_id', 'provider'];
    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Create a new file "SocialGoogleAccount.php" file with the following code.

<?php
namespace App;
use Jenssegers\Mongodb\Eloquent\Model  as Eloquent; //Use MongoDB as a model
class SocialGoogleAccount extends Eloquent
{
    protected $fillable = ['user_id', 'provider_user_id', 'provider'];
    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

Create a new file "SocialFacebookAccountService.php" file under the Services folder.

<?php
namespace App\Services;
use App\Application;
use App\Player;
use App\User;
use Laravel\Socialite\Contracts\User as ProviderUser;
use Log;

class SocialFacebookAccountService
{
    public function createOrGetUser(ProviderUser $providerUser)
    {     

    }
}  

Create a new file "SocialGoogleAccountService.php" file under the Services folder.

<?php
namespace App\Services;
use App\Application;
use App\Player;
use App\SocialGoogleAccount;
use App\User;
use Laravel\Socialite\Contracts\User as ProviderUser;
use Log;

class SocialGoogleAccountService
{
    public function createOrGetUser(ProviderUser $providerUser)
    {
       
    }
}

Create a new file "SocialAuthFacebookController.php" file under the "app>Http>Controllers" folder.

<?php
namespace App\Http\Controllers;
use Socialite;
use App\Services\SocialFacebookAccountService;
use Illuminate\Http\Request;
use Log;
use Redirect;
use Cookie;

class SocialAuthFacebookController extends Controller
{
    public function redirect()
    {
        return Socialite::driver('facebook')->redirect();
    }

    public function callback(SocialFacebookAccountService $service)
//    public function callback()
    {
//        return 'Callback received';
//        Log::info('Getting user info !');
//        $user = Socialite::driver('facebook')->user();
        $user = Socialite::driver('facebook')->stateless()->user();
        $user = $service->createOrGetUser($user);
        auth()->login($user);
        return Redirect::intended();

    }
}

Create a new file "SocialAuthFacebookController.php" file under the "app>Http>Controllers" folder.

<?php
namespace App\Http\Controllers;
use App\Services\SocialGoogleAccountService;
use Socialite;
use App\Services\SocialFacebookAccountService;
use Illuminate\Http\Request;
use Log;
use Redirect;
use Cookie;

class SocialAuthGoogleController extends Controller
{
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    public function callback(SocialGoogleAccountService $service )
    {
        $user = Socialite::driver('google')->stateless()->user();
        $user = $service->createOrGetUser($user);
        auth()->login($user);

        return Redirect::intended();
    }
}

Setting up environment file

FACEBOOK_APP_ID=facebook_app_id
FACEBOOK_APP_SECRET=facebook_app_secret
FACEBOOK_REDIRECT=http://www.website.com/auth/facebook/callback

GOOGLE_CLIENT_ID=google_client_id
GOOGLE_CLIENT_SECRET=google_client_secret
GOOGLE_REDIRECT=http://www.website.com/auth/google/callback

Inside the services.php file, add the following codes.

'facebook' => [
    'client_id' => env('FACEBOOK_APP_ID'),
    'client_secret' => env('FACEBOOK_APP_SECRET'),
    'redirect' => env('FACEBOOK_REDIRECT'),
],

'google' => [
    'client_id'     => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect'      => env('GOOGLE_REDIRECT')
],

Configuring google client

Create a new project in the google console.

https://console.cloud.google.com/

OAuth consent screen

Select the created project > API & Services >  OAuth consent screen > External > Create

Fill in the form and add the domains for both production and localhost and click next

Add or Remove Scopes > email > Update > Save and Continue

Add Test Users and Continue

Verify the domain

Domain verification > Add Domain and add your domain

Create a new web application credential

Credentials > Create Credentials > OAuth Client ID > Web application

Add the URI callbacks 

http://www.website.com/auth/google/callback and create the credential.

Now you'll get client ID and secret to be used inside the laravel environment file and it's now ready to test the google login.

Configuring facebook Client

Create a new facebook app at https://developer.facebook.com

Once you've created, you will get the app_id and secret where you have to put them inside your environment file for your laravel project. Make sure that you provide privacy policy, terms of service and data deletion instruction URL to be able to submit for production usage.

Add Platform > Website and fill in your website url with https.

On the left side bar, Add Product > Facebook Login > Setup and follow the instruction. You only need to copy the SDK script inside the body tag since socialite will handle remaining integrations.

Go to Products > Facebook Login > Settings > Valid OAuth Redirect URIs, add the following url

https://<your_website>.com/auth/facebook/callback. 

Now you're ready to test your facebook login. 

Note : For localhost development, http://localhost is automatically redirected while in development mode. So make sure you turn on the development mode while testing it out in localhost.