Laravel 8 Socialite Login With Google Account

In this tutorial, we will see laravel 8 socialite login with google account. Also, you can gain knowledge about how to socialite login with google account in laravel 8 jetstream. Laravel also provides a simple, convenient way to authenticate with OAuth providers using laravel socialite.

Laravel socialite currently supports authentication with Facebook, Twitter, LinkedIn, Google, GitHub, GitLab, and Bitbucket. So, in this laravel 8 login with google example we are using the OAuth process and integrating google API in laravel.

So, let's see laravel socialite google login.

Step 1 : Install Laravel 8

In this step, we will install laravel 8 for this laravel 8 socialite login with google account.

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

 

 

Step 2 : Install JetStream

In this step, we need to install a jetstream. So, run the below command to install jetstream.

composer require laravel/jetstream

Now, we need to install livewire using the below artisan command and also we need basic authentication like login and registration otherwise you can install using auth command.

php artisan jetstream:install livewire

Now, Install the node and run the package.

npm install
npm run dev

 Now, we will create the database using the migration command.

php artisan migrate

 

Step 3 : Install Socialite

 Now, we will install the socialite package which provides API to connect with a google account. So, run the below command.

composer require laravel/socialite

 

 

Step 4 : Create Google App

Now, we required a google client id and secret key. if you don't have a google app account then you need to create one from the below link. Google Developers Console.

google_client_auth_id

google_create_client_auth_id

google_callback_url

After configuration of the google app, we will set the app id, secret key, and call back URL in the config file. So copy the below code in config/services.php.

'google' => [
        'client_id' => 'your client id',
        'client_secret' => 'your client secret key',
        'redirect' => 'http://localhost:8000/authorized/google/callback',
],

 

 

Step 5 : Add Database Column In User Table

Now, run the below command to add the google id column in the user table. 

php artisan make:migration add_google_id_to_users_table

 

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddGoogleIdToUsersTable extends Migration
{
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('google_id')->nullable();
        });
    }

    public function down()
    {
        Schema::table('users', function (Blueprint $table) {            
            $table->dropColumn('google_id');
        });
    }
}

Add the below code in the User model.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Fortify\TwoFactorAuthenticatable;
use Laravel\Jetstream\HasProfilePhoto;
use Laravel\Jetstream\HasTeams;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens;
    use HasFactory;
    use HasProfilePhoto;
    use HasTeams;
    use Notifiable;
    use TwoFactorAuthenticatable;

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

    protected $hidden = [
        'password',
        'remember_token',
        'two_factor_recovery_codes',
        'two_factor_secret',
    ];

    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    protected $appends = [
        'profile_photo_url',
    ];
}

 

 

Step 6 : Create Route

Now, create a new route for laravel socialite.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\LoginWithGoogleController;

Route::get('authorized/google', [LoginWithGoogleController::class, 'redirectToGoogle']);
Route::get('authorized/google/callback', [LoginWithGoogleController::class, 'handleGoogleCallback']);

 

Step 7 : Create Controller

 In this step, we will create a new controller for laravel 8 socialite login with google and the name as LoginWithGoogleController.

<?php

namespace App\Http\Controllers;

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

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

    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::create([
                    'name' => $user->name,
                    'email' => $user->email,
                    'google_id'=> $user->id,
                    'password' => encrypt('123456dummy')
                ]);
      
                Auth::login($newUser);
      
                return redirect()->intended('dashboard');
            }
      
        } catch (Exception $e) {
            dd($e->getMessage());
        }
    }
}

 

 

Step 8 : Edit Login Blade File

Now, add the google login code in login blade file.

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>

        <x-jet-validation-errors class="mb-4" />

        @if (session('status'))
            <div class="mb-4 font-medium text-sm text-green-600">
                {{ session('status') }}
            </div>
        @endif

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

            <div>
                <x-jet-label for="email" value="{{ __('Email') }}" />
                <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
            </div>

            <div class="mt-4">
                <x-jet-label for="password" value="{{ __('Password') }}" />
                <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>

            <div class="block mt-4">
                <label for="remember_me" class="flex items-center">
                    <input id="remember_me" type="checkbox" class="form-checkbox" name="remember">
                    <span class="ml-2 text-sm text-gray-600">{{ __('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 hover:text-gray-900" href="{{ route('password.request') }}">
                        {{ __('Forgot your password?') }}
                    </a>
                @endif

                <x-jet-button class="ml-4">
                    {{ __('Login') }}
                </x-jet-button>
            </div>
            <div class="flex items-center justify-end mt-4">
                <a href="{{ url('authorized/google') }}">
                    <img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png" style="margin-left: 3em;">
                </a>
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>

And finally, you will get output like this.

laravel_8_socialite_login_with_google

 


You might also like :

FEATURE POSTS