Laravel Breeze Login with Google Auth Example

In this post, i will show you how to login with google account with laravel breeze. we will install laravel breeze with alpine js and add google auth.

As we know, social media becomes more and more popular in the world. Everyone has a social account like Gmail, Facebook, etc. I think also most have Gmail accounts. So if your application has login with social, then it becomes awesome. You get more people to connect with your website because most of the people do not want to fill out the sign-up or sign-in form. If they login with social, then it becomes awesome.

In this example, we will install the Socialite composer package for login with Google. Then we will install Laravel breeze for Bootstrap authentication. After that, we will add a login with Google button, allowing users to log in and register using their Gmail accounts. So, let's follow the steps below:

Step for Login with Gmail Account in Laravel 11?

• Step 1: Install Laravel 11
• Step 2: Install Laravel Breeze
• Step 3: Install Socialite
• Step 4: Create Google App
• Step 5: Add google_id Column
• Step 6: Create Routes
• Step 7: Create Controller
• Step 8: Update Blade File
• Run Laravel App

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Install Laravel Breeze

Now, in this step, we need to use Composer command to install Laravel Breeze, so let's run the below command and install the below library.

composer require laravel/breeze

Now, we need to create authentication using the below command. You can create basic login, register, and email verification. We will run the below commands:

php artisan breeze:install

You need to choose "Blade with Alpine" option to setup.

Step 3: Install Socialite

In the first step, we will install the Socialite Package, which provides an API to connect with Google accounts. So, first open your terminal and run the below command:

composer require laravel/socialite

Step 4: Create Google App

Go to https://console.cloud.google.com/projectcreate and create a new project.

Now go to https://console.cloud.google.com/apis/credentials/consent and after selecting "External," click on "CREATE" as shown in the following image:

Now fill in the required fields i.e. "App Name", "User Support Email", "Developer Contact Info -> Email Address" and click on "Save and Continue". Again click on "Save and Continue", once again click on "Save and Continue" and finally click on "Back to Dashboard".

Now go to https://console.cloud.google.com/apis/credentials and click on "Create Credentials" then click on "OAuth clientID" in a popup as shown in the following image:

Now select the Application type as "Web Application", Add "Authorized redirect URI", and click on "CREATE" as shown in the following image:

Now copy "Client ID" and "Client Secret" as shown in the image, we will add it on .env file:

Now you have to set app id, secret and call back URL in config file so open config/services.php and set id and secret this way:

config/services.php

return [
    ....

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

Then you need to add google client id and client secret in .env file:

.env

GOOGLE_CLIENT_ID=XXXXXsvqcn3d.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=XXXXXT6tR1rWpR-Jxy3jkdzs
GOOGLE_REDIRECT=http://localhost:8000/auth/google/callback

Step 5: Add google_id Column

In this step, first, we have to create a migration to add the google_id in your user table. So let's run the below command:

php artisan make:migration add_google_id_column

Migration

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void
    {
        Schema::table('users', function ($table) {
            $table->string('google_id')->nullable();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
          
    }
};

Update mode like this way:

app/Models/User.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'google_id'
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * Get the attributes that should be cast.
     *
     * @return array
     */
    protected function casts(): array
    {
        return [
            'email_verified_at' => 'datetime',
            'password' => 'hashed',
        ];
    }
}

Step 6: Create Routes

After adding the `google_id` column, first, we have to add new routes for Google login. So let's add the below route in the `routes.php` file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProfileController;
use App\Http\Controllers\GoogleController;
  
Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});
  
Route::controller(GoogleController::class)->group(function(){
    Route::get('auth/google', 'redirectToGoogle')->name('auth.google');
    Route::get('auth/google/callback', 'handleGoogleCallback');
});

Step 7: Create Controller

After adding the routes, we need to add a method for Google authentication. This method will handle the Google callback URL, etc. First, put the code below in your GoogleController.php file.

app/Http/Controllers/GoogleController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
use Exception;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
  
class GoogleController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }
          
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function handleGoogleCallback()
    {
        try {
        
            $user = Socialite::driver('google')->user();
            $finduser = User::where('google_id', $user->id)->first();
         
            if($finduser){
         
                Auth::login($finduser);
                return redirect()->intended('dashboard');
         
            }else{
                $newUser = User::updateOrCreate(['email' => $user->email],[
                        'name' => $user->name,
                        'google_id'=> $user->id,
                        'password' => encrypt('123456dummy')
                    ]);
         
                Auth::login($newUser);
        
                return redirect()->intended('dashboard');
            }
        
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

Step 8: Update Blade File

Ok, now at last we need to add blade view so first create new file login.blade.php file and put bellow code:

resources/views/auth/login.blade.php

<x-guest-layout>
    <!-- Session Status -->
    <x-auth-session-status class="mb-4" :status="session('status')" />

    <form method="POST" action="{{ route('login') }}">
        @csrf

        <!-- Email Address -->
        <div>
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />

            <x-text-input id="password" class="block mt-1 w-full"
                            type="password"
                            name="password"
                            required autocomplete="current-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Remember Me -->
        <div class="block mt-4">
            <label for="remember_me" class="inline-flex items-center">
                <input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
            </label>
        </div>

        <div class="flex items-center justify-end mt-4">
            @if (Route::has('password.request'))
                <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </a>
            @endif

            <x-primary-button class="ms-3">
                {{ __('Log in') }}
            </x-primary-button>
        </div>

        <div class="flex items-center justify-end mt-4">
            <a class="" href="{{ route('auth.google') }}">
                <img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png">
            </a>
        </div>
    </form>
</x-guest-layout>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/login

I hope it can help you...