Google/Facebook Login with Laravel Socialite

Laravel provides a clean convenient way to integrate social login to your existing project easily using Laravel Socialite.

Although, this package is not pre-installed in laravel. The steps are quite easy as we’ll go through step by step guide to implement social login from scratch.

However, laravel socialite supports authentication only for following social login providers:

• Facebook
• Twitter
• LinkedIn
• Google
• GitHub
• GitLab
• Bitbucket

Start with fresh installation of laravel

Let’s start with a fresh installation of Laravel 7 cause at the time of writing this post, Laravel 7 was the latest version of laravel. So, We will start by installing and launching a new laravel project using the following command:

composer create-project --prefer-dist laravel/laravel social-login

Configure and Migrate Database

Create database and configure database credentials in .env file in root of your laravel project.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=yourdatabase
DB_USERNAME=user
DB_PASSWORD=password

Now before you migrate, if you got an error like Specified key was too long. Then, you might want to insert this code into your AppServiceProvider.php. However, You will not have this problem if you’re using MySQL 5.7.7+ or MariaDB 10.2.2+.

<?php

use Illuminate\Support\Facades\Schema;

//..

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        // Add This -------------
        Schema::defaultStringLength(191);
    }

Then, run the following command.

php artisan migrate

Install laravel/ui package and scaffold basic authentication

This package provides a quick and easy way to scaffold all of the routes and views you need for authentication. So, we’ll have to install this package as well.

composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev

Install and configure laravel/socialite

composer require laravel/socialite

After that, go to app/config.php and paste the code below for google and Facebook or other providers you want.

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

'facebook' => [
    'client_id'     => env('FB_CLIENT_ID'),
    'client_secret' => env('FB_CLIENT_SECRET'),
    'redirect'      => env('FB_REDIRECT'),
],

And, the credentials should be in .env file should look like this.

GOOGLE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
GOOGLE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXX
GOOGLE_REDIRECT=http://domain.com/google/callback

Redirect user to Google/Facebook login portal.

For this, let’s define a route in routes/web.php and link to the LoginController.php in order to redirect the user to selected provider login portal.

Route::get('redirect/{driver}', 'Auth\LoginController@redirectToProvider');

Now add this function to your app/Http/Controllers/Auth/LoginController.php:

use Socialite;

// ...

/**
 * Redirect the user to the provider authentication page.
 *
 * @return \Illuminate\Http\Response
 */
public function redirectToProvider($driver)
{
    return Socialite::driver($driver)->redirect();
}

Then, you might want to add an anchor link on your resources/views/auth/login.blade.php or register.blade.php:

<a href="{{ url('redirect/google') }}">Google Login</a>
// or
<a href="{{ url('redirect/facebook') }}">Facebok Login</a>

Handle callback from the user

After redirecting the user to the social login portal, if the user successfully signs into google or from any other supported providers by socialite, then the user will be redirected to your given callback URL you defined in your .env file.

But first we define a callback route in routes/web.php

Route::get('{driver}/callback', 'Auth\LoginController@handleProviderCallback');

Now, we create a new method to handle logic for login in Auth/LoginController.php: inside Http folder.

use App\User;

// ...

/**
 * Obtain the user information from provider.
 *
 * @return \Illuminate\Http\Response
 */
public function handleProviderCallback($driver)
{
    try {
        $user = Socialite::driver($driver)->user();
    } catch (\Exception $e) {
        return redirect()->route('login');
    }

    $existingUser = User::where('email', $user->getEmail())->first();

    if ($existingUser) {
        auth()->login($existingUser, true);
    } else {
        $newUser                    = new User;
        $newUser->provider_name     = $driver;
        $newUser->provider_id       = $user->getId();
        $newUser->name              = $user->getName();
        $newUser->email             = $user->getEmail();
        // we set email_verified_at because the user's email is already veridied by social login portal
        $newUser->email_verified_at = now();
        // you can also get avatar, so create avatar column in database it you want to save profile image
        // $newUser->avatar            = $user->getAvatar();
        $newUser->save();

        auth()->login($newUser, true);
    }

    return redirect($this->redirectPath());
}

In the handleProviderCallback method above:

• We first try to get the user from socialite, if it fails then we redirect to the login page.
• Then, we check our database for matching users by email provided.
• Check if user exists, if so then we will proceed to log in the user.
• If not, then we will create a new User and login them.

Okay, that’s all, you have successfully implemented laravel socialite in your project.

Finally, if you want to add other login providers then just add credentials in .env file and enable them in config/auth.php by adding another array of providers.