In this tutorial you will learn about the Laravel 8 Socialite Google Login Example Tutorial and its application with practical example.
In this Laravel 8 Socialite Google Login Example Tutorial I’ll show you how to integrate google login in laravel 8 using socialite package. Integrating google login in Laravel 8 using socialite package is much easier. Allowing users to login with their social media accounts makes registration/login process much easier, it also encourages more users to register for your application.
- Laravel 8 Socialite Google Login Example Tutorial
- Step 1 – Install Laravel 8 App
- Step 2 – Configure Database With App
- Step 3 – Configure Google App
- Step 4 – Install Socialite & Configure
- Step 5 – Add Field In Table Using Migration
- Step 6 – Install Jetstream Auth
- Step 7 – Make Routes
- Step 8 – Create Google Login Controller By Command
- Step 9 – Integrate Google Login Button In Login Page
- Step 10 – Start Development Server
Laravel 8 Socialite Google Login Example Tutorial
In this step by step tutorial, you will learn to integrate google login with your laravel 8 application. Please follow the steps give below:
- Step 1 – Install Laravel 8 App
- Step 2 – Configure Database With App
- Step 3 – Configure Google App
- Step 4 – Install Socialite & Configure
- Step 5 – Add Field In Table Using Migration
- Step 6 – Install Jetstream Auth
- Step 7 – Make Routes
- Step 8 – Create Google Login Controller By Command
- Step 9 – Integrate Google Login Button In Login Page
- Step 10 – Start Development Server
Step 1 – Install Laravel 8 App
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel LaravelLoginWithGoogle |
Step 2 – Configure Database With App
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=here your database name here DB_USERNAME=here database username here DB_PASSWORD=here database password here |
Step 3 – Configure Google App
In this step, we will configure Google app with this laravel app. So, open your laravel Google social login project in any text editor. Then navigate the config directory and open service.php file and add the client id, secret and callback url:
|
1 2 3 4 5 |
'google' => [ 'client_id' => 'xxxx', 'client_secret' => 'xxx', 'redirect' => 'http://127.0.0.1:8000/callback/google', ], |
Step 4 – Install Socialite & Configure
In this step we will Install Socialite Package via Composer using following command:
|
1 |
composer require laravel/socialite |
Now, Navigate to config directory and open app.php file. Then add aliese and provider app.php:
|
1 2 3 4 5 6 |
'providers' => [ /* * Package Service Providers... */ Laravel\Socialite\SocialiteServiceProvider::class, ] |
Then add the Facade in config/app.php:
|
1 2 3 4 |
'aliases' => [ ... 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ] |
Step 5 – Add Field In Table Using Migration
Now, we will create migration to add social login field using following command:
|
1 |
php artisan make:migration add_social_login_field |
After that, open the add_social_login_field.php file, which is found inside database/migration directory and add the following code into it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class AddSoicalLoginField extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::table('users', function ($table) { $table->string('social_id')->nullable(); $table->string('social_type')->nullable(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::table('users', function ($table) { $table->dropColumn('social_id'); $table->dropColumn('social_type'); }); } } |
After successfully add field in database table. Then add fillable property in User.php model, which is found inside app/Models/ directory:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?php namespace App\Models; use Illuminate\Contracts\Auth\MustVerifyEmail; 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\Sanctum\HasApiTokens; class User extends Authenticatable { use HasApiTokens; use HasFactory; use HasProfilePhoto; use Notifiable; use TwoFactorAuthenticatable; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'name', 'email', 'password', 'social_id', 'social_type' ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = [ 'password', 'remember_token', 'two_factor_recovery_codes', 'two_factor_secret', ]; /** * The attributes that should be cast to native types. * * @var array */ protected $casts = [ 'email_verified_at' => 'datetime', ]; /** * The accessors to append to the model's array form. * * @var array */ protected $appends = [ 'profile_photo_url', ]; } |
After that, execute the following command on cmd to create tables into your selected database:
|
1 |
php artisan migrate |
Step 6 – Install Jetstream Auth
In this step, install jetstream laravel auth scaffolding package with livewire. We have provided a complete guide in this Laravel 8 Auth Scaffolding using Jetstream Tutorial.
Step 7 – Make Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 5 6 |
use Illuminate\Support\Facades\Route; use App\Http\Controllers\Auth\GoogleSocialiteController; Route::get('auth/google', [GoogleSocialiteController::class, 'redirectToGoogle']); Route::get('callback/google', [GoogleSocialiteController::class, 'handleCallback']); |
Step 8 – Create Google Login Controller By Command
In this step, run following command to create GoogleSocialiteController.php file:
|
1 |
php artisan make:controller GoogleSocialiteController |
Now, go to app/http/controllers directory and open GoogleSocialiteController.php file in any text editor. Then add the following code into GoogleSocialiteController.php file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Socialite; use Auth; use Exception; use App\Models\User; class GoogleSocialiteController 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 handleCallback() { try { $user = Socialite::driver('google')->user(); $finduser = User::where('social_id', $user->id)->first(); if($finduser){ Auth::login($finduser); return redirect('/home'); }else{ $newUser = User::create([ 'name' => $user->name, 'email' => $user->email, 'social_id'=> $user->id, 'social_type'=> 'google', 'password' => encrypt('my-google') ]); Auth::login($newUser); return redirect('/home'); } } catch (Exception $e) { dd($e->getMessage()); } } } |
Step 9 – Integrate Google Login Button In Login Page
In this step, integrate google login button into login.blade.php file. So, open login.blade.php, which is found inside resources/views/auth/ directory:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<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 value="{{ __('Email') }}" /> <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus /> </div> <div class="mt-4"> <x-jet-label value="{{ __('Password') }}" /> <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" /> </div> <div class="block mt-4"> <label class="flex items-center"> <input 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> <a href="{{ url('auth/google') }}" style="margin-top: 0px !important;background: green;color: #ffffff;padding: 5px;border-radius:7px;" class="ml-2"> <strong>Google Login</strong> </a> </div> </form> </x-jet-authentication-card> </x-guest-layout> |
Step 10 – Start Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://127.0.0.1:8000 |
