Membuat fitur Registrasi dan Login menggunakan akun Google di Laravel

Berikut adalah tutorial lengkap dan detail untuk membuat fitur registrasi dan login menggunakan akun Google di Laravel (dengan MySQL).

Kita akan menggunakan paket Laravel Socialite, yang merupakan solusi resmi dari Laravel untuk OAuth login.

1.  Install Laravel

composer create-project laravel/laravel social-login-app 
cd social-login-app

2. Konfigurasi Database

Edit .env:

DB_CONNECTION=sqlite
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=laravel
# DB_USERNAME=root
# DB_PASSWORD=

Menjadi

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=social_login
DB_USERNAME=root
DB_PASSWORD=

Buat database-nya di MySQL:

CREATE DATABASE social_login;

3. Install Laravel UI (opsional jika ingin UI auth dengan Bootstrap)

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

Di sini kita pakai laravel UI, karena kita sangat familiar dengan bootstrap agar kita lebih mudah. Jika pakai yang lain seperti laravel jetstream, bisa menyesuaikan. 

4. Install Laravel Socialite

composer require laravel/socialite

Laravel Socialite adalah package yang dapat kita gunakan untuk mengintegrasikan Oauth ke dalam aplikasi yang kita bangun menggunakan laravel.

Setelah kita tambahkan laravel socialite, selanjutnya buka file konfigurasi bootstrap/providers.php, lalu tambahkan laravel socialite.

<?php

return [
    App\Providers\AppServiceProvider::class,
    Laravel\Socialite\SocialiteServiceProvider::class,
];

5. Konfigurasi Socialite

Edit config/services.php dan tambahkan:

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

Lalu di file .env, tambahkan:

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
GOOGLE_REDIRECT_URL=http://localhost:8000/oauth/google/callback

Untuk mendapatkan Google client ID, dan google client secret, pertama kita buka dulu google console auth di link berikut:

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

Kemudian, Create credential dan pilih OAuth client ID seperti berikut:

Jika google request untuk melakukan project configuration, silahkan klik dan isi seperti berikut, lalu klik create:

Setelah itu, akan muncul halaman berikut, klik Create OAuth client di pojok kanan:

Lalu isi name dan Authorized redirect URIs. Dalam project ini karena kita jalankan di localhost, kita set URL nya seperti berikut:

Setelah itu, akan muncul Pop Up untuk Client ID dan Client Secret seperti berikut:

Copy code tersebut dan masukkan ke .env sebelumnya. 

6. Migration dan Model

Edit file migration create_users_table.php:

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

Lalu jalankan migrasi:

php artisan migrate

7. Update Model User.php

Tambahkan berikut:

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

8. Buat Controller Auth

php artisan make:controller SocialAuthController

Isi SocialAuthController.php:

<?php

namespace App\Http\Controllers;

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

class SocialAuthController extends Controller
{
    public function redirectToProvider($provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    public function handleProviderCallback($provider)
    {
        $socialUser = Socialite::driver($provider)->stateless()->user();

        $user = User::updateOrCreate(
            [
                'provider' => $provider,
                'provider_id' => $socialUser->getId(),
            ],
            [
                'name' => $socialUser->getName() ?? $socialUser->getNickname(),
                'email' => $socialUser->getEmail(),
            ]
        );

        Auth::login($user, true);

        return redirect('/home');
    }
}

9. Buat Route Social Login

Edit routes/web.php:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialAuthController;
use Illuminate\Support\Facades\Auth;

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

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

Route::get('/auth/{provider}', [SocialAuthController::class, 'redirectToProvider']);
Route::get('/oauth/{provider}/callback', [SocialAuthController::class, 'handleProviderCallback']);

10. Tambahkan Tombol Login Sosial di Halaman Login

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

<a href="{{ url('/auth/google') }}" class="btn btn-danger btn-block">Login with Google</a>

11. Jalankan Aplikasi

Sebelum menjalankan aplikasi, jika terdapat error berikut:

Call to undefined method App\Http\Controllers\Auth\LoginController::middleware(),

buka Controller.php di folder App/Http/Controllers/, modifikasi menjadi berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;

class Controller extends BaseController
{
    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;
}

Karena laravel 11+ sudah tidak support middleware. Jalankan server dengan perintah berikut: 

php artisan serve

Buka di browser:

http://localhost:8000/login

Klik "Login with Google" atau "Login with Facebook", dan kamu akan otomatis masuk/terdaftar jika belum ada.

Jika berhasil, akan menghasilkan seperti berikut:

Setelah login google diklik, akan redirect ke halaman berikut:

Dan login berhasil!. Cek di database user, apakah datanya sudah bertambah?

Selamat mencoba!!! semoga berhasil