Login with Facebook & Google In Laravel

Using Laravel Socialite, Laravel offers an easy and elegant approach to incorporating social login into your current project.
Nevertheless, Laravel does not come with this package pre-installed. Since we'll walk you through a step-by-step method to add social login from scratch, the stages are rather simple.

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

However, only the following social login providers are supported by Laravel Socialite for authentication:

Start with a Fresh Installation of Laravel

Let’s start with a fresh installation of Laravel latest version 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 a database and configure database credentials in the .env file at the 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

Install and configure 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 the .env file should look like this.
GOOGLE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
GOOGLE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXX
GOOGLE_REDIRECT=http://domain.com/google/callback

Redirect Users to the Google/Facebook Login Portal

For this, let’s define a route in routes/web.php and link to the LoginController.php to redirect the user to the 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 Users

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 the 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 have created a new method to handle the logic for login in Auth/LoginController.php: inside the 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 registered by social login portal
        $newUser->email_verified_at = now();
        // you can also get avatar, so create an avatar column in database if 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 the user exists, if so then we will proceed to log in the user.
• If not, then we will create a new User and log in to 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 the .env file and enable them config/auth.php by adding another array of providers.