Login with Google Account in laravel 8 using socialite and jetstream. In this post, i will show you how to implement Google social login using socialite and jetstream in laravel 8.
Most online application provide facebook, google, twitter and google or gmail login features in apps. because using this feature user can login easily in online apps.
In this post, you will learn how implement login with Google in laravel 8. So, i will guide you step by step to implement Google login in laravel 8.
Laravel 8 Socialite Login with Google Example Tutorial
- Step 1 – Installing Laravel 8 App
- Step 2 – Configuring Database in .env File
- Step 3 – Installing Socialite
- Step 4 – Installing Jetstream Auth
- Step 5 – Add Column in Table
- Step 6 – Make Google App
- Step 7 – Create Routes
- Step 8 – Creating Google Auth Controller
- Step 9 – Create Google Login Button
- Step 10 – Start Development Server
Step 1 – Installing Laravel 8 App
In step 1, open your terminal and navigate to your local web server directory using the following command:
//for windows user cd xampp/htdocs //for ubuntu user cd var/www/html
Then install laravel 8 latest application using the following command:
composer create-project --prefer-dist laravel/laravel LaraGoogleLoginApp
Step 2 – Configuring Database in .env File
In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db name DB_USERNAME=db user name DB_PASSWORD=db password
Step 3 – Installing Socialite
In step 3, Navigate to your downloaded LaraGoogleLoginApp directory. And then install socialite Packages in your laravel 8. Open terminal and run the following command:
cd / LaraGoogleLoginApp composer require laravel/socialite
Then configure this package in app.php file, which is located inside config directory.
Add the ServiceProvider in config/app.php:
'providers' => [
/*
* Package Service Providers...
*/
Laravel\Socialite\SocialiteServiceProvider::class,
]
Then add the Facade in config/app.php:
'aliases' => [
...
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]
Step 4 – Installing Jetstream Auth
In step 4, install jetstream laravel auth scaffolding. You can read this LARAVEL 8 AUTH TUTORIAL: LOGIN/REGISTER/PASSWORD RESET EXAMPLE.
Step 5 – Add Column in Table
In step 5, add social login column in database table. Open command prompt and type the following command:
php artisan make:migration add_social_login_column
Then open add_social_login_column.php file, which is located inside database/migration directory. And add the following code into it:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class AddSoicalLoginColumn 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');
});
}
}
Also, add the following code into User.php model, which is located inside app/Models/ directory:
<?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',
];
}
Now, open again your terminal and type the following command on cmd to create tables into your selected database:
php artisan migrate
Step 6 – Make Google App
In step 6, click on this https://console.developers.google.com/ url. And when you click, you will look like the google console dahsboard:
After that, click on Credentials and choose first option oAuth and click Create new Client ID button. now you can see following slide:
Then
Then add google app client id, secret and callback url in services.php, which is located inside config directory:
return [
....
'google' => [
'client_id' => 'app id',
'client_secret' => 'add secret',
'redirect' => 'http://localhost:8000/auth/google/callback',
],
]
Step 7 – Create Routes
In step 7, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\SocialGoogleController;
Route::get('auth/google', [SocialGoogleController::class, 'redirectToGoogle']);
Route::get('auth/google/callback', [SocialGoogleController::class, 'handleCallback']);
Step 8 – Creating Google Auth Controller
In step 8, create google social login controller by using the following command:
php artisan make:controller SocialGoogleController
The above command will create SocialGoogleController.php file, which is located inside LaraGoogleLoginApp/app/Http/Controllers/ directory. So add the following code into it:
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Socialite;
use Auth;
use Exception;
use App\Models\User;
class SocialGoogleController 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('google123456')
]);
Auth::login($newUser);
return redirect('/home');
}
} catch (Exception $e) {
dd($e->getMessage());
}
}
}
Step 9 – Create Google Login Button
In step 9, create google login button in login.blade.php file. So, open login.blade.php, which is located inside resources/views/auth/ directory. And then add the following code into it:
<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
In step 10, open your browser and fire the following url into your browser:
http://127.0.0.1:8000/login