Login with Laravel 8 and Socialite, Google

Step 1: Install Laravel 8 and UI

First, install a new Laravel application by running the following command in your terminal:

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

Next, install Laravel UI for authentication scaffolding:

composer require laravel/ui
php artisan ui vue --auth

Step 2: Update Your Database Credentials

Update your .env file with your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_custom_auth
DB_USERNAME=root
DB_PASSWORD=#your_database_password

GOOGLE_CLIENT_ID="your_google_id"
GOOGLE_CLIENT_SECRET="your_google_secret"

Step 3: Create Laravel Authentication

Run the following command to generate authentication scaffolding:

php artisan make:auth

This command will automatically add authentication routes in web.php.

Step 4: Install Socialite Package

Install the Laravel Socialite package for OAuth authentication:

composer require laravel/socialite
composer self-update --2

Then, update config/services.php with Google credentials:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => 'http://localhost/Laravel_Login_Google/public/login/google/callback',
],

Step 5: Obtain Google Client Credentials

1. Visit Google Developer Console

2. Create a new project and configure OAuth credentials

3. Copy the Client ID and Client Secret into the .env file

Step 6: Run Migrations

Modify database/migrations/create_users_table.php to include social login columns:

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->string('provider_id')->nullable();
        $table->text('avatar')->nullable();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password')->nullable();
        $table->rememberToken();
        $table->timestamps();
    });
}

Run the migration:

php artisan migrate

Step 7: Define Routes

Update routes/web.php to include Google authentication routes:

Route::get('/', function () {
    return view('auth.login');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

// Google Login
Route::get('login/google', [App\Http\Controllers\Auth\LoginController::class, 'redirectToGoogle'])->name('login.google');
Route::get('login/google/callback', [App\Http\Controllers\Auth\LoginController::class, 'handleGoogleCallback']);

Step 8: Create LoginController

Generate the LoginController:

php artisan make:controller LoginController

Modify app/Http/Controllers/Auth/LoginController.php:

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

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

    public function handleGoogleCallback()
    {
        $user = Socialite::driver('google')->user();
        $this->_registerOrLoginUser($user);
        return redirect()->route('home');
    }

    protected function _registerOrLoginUser($data)
    {
        $user = User::where('email', $data->email)->first();
        if (!$user) {
            $user = new User();
            $user->name = $data->name;
            $user->email = $data->email;
            $user->provider_id = $data->id;
            $user->avatar = $data->avatar;
            $user->save();
        }
        Auth::login($user);
    }
}

Step 9: Add Google Login Button

Modify resources/views/auth/login.blade.php:

<a href="{{ route('login.google') }}">
    <button type="button" class="btn btn-block btn-google">
        <i class="fa fa-google mr-2"></i> Google
    </button>
</a>

Step 10: Run Development Server

Start the Laravel development server:

php artisan serve

Visit the login page at:

http://localhost/Laravel_Login_Google/public/

Now you can log in with Google in your Laravel 8 application!