Laravel 11 Socialite Login with Google Account
Hello, laravel web developers! In this article, we'll see how to socialite log in with Google in laravel 11. Here, we'll with Laravel UI, Laravel Jetstream, and laravel Breeze to log in with a Gmail account. Also, you can log in with any social media using laravel 11 Socialite.
Here, we'll create a login form and integrate Google to login directly without any username and password. Also, you can use gmail to login in to laravel 11.
Laravel 11 Socialite Login with Google Account
In this step, we'll install the laravel 11 application using the following command.
composer create-project laravel/laravel laravel-11-example
Then, we'll install laravel UI using the following command.
composer require laravel/ui
Next, we'll install bootstrap auth to create login, and register using the following command.
php artisan ui bootstrap --auth
Then, run the following command to install the npm package
npm install
npm run build
After that, we'll install the Socialite package using the following command.
composer require laravel/socialite
we require a Google client id and a secret key, if you don't have a Google app account then you need to create one from the below link.
Google Account: Google Developers Console
Create an oAuth client ID as given in the below image.
After the configuration of the Google app, we'll set the app id, secret key, and call back URL in the config file.
config/services.php.
'google' => [
'client_id' => env('GOOGLE_CLIENT_ID'),
'client_secret' => env('GOOGLE_CLIENT_SECRET'),
'redirect' => env('GOOGLE_REDIRECT'),
],
.env
GOOGLE_CLIENT_ID=your client id
GOOGLE_CLIENT_SECRET=your client secret key
GOOGLE_REDIRECT=http://localhost:8000/authorized/google/callback
Next, we'll add a google_id column to the user's table.
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
{
}
};
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',
];
}
}
Then, we'll define the route for redirecting to Google and callback of Google to the web.php file
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\GoogleController;
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::controller(GoogleController::class)->group(function(){
Route::get('authorized/google', 'redirectToGoogle')->name('auth.google');
Route::get('authorized/google/callback', 'handleGoogleCallback');
});
Next, we'll create a GoogleController.php file and add a Google callback function.
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('home');
}else{
$newUser = User::updateOrCreate(['email' => $user->email],[
'name' => $user->name,
'google_id'=> $user->id,
'password' => encrypt('user@123456')
]);
Auth::login($newUser);
return redirect()->intended('home');
}
} catch (Exception $e) {
dd($e->getMessage());
}
}
}
Now, we'll update the login.blade.php file to add the Google login code.
resources/views/auth/login.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Login') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="row mb-3">
<label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
<div class="row mb-0">
<div class="col-md-8 offset-md-4">
<br/>
<a href="{{ route('auth.google') }}">
<img src="https://developers.google.com/identity/images/btn_google_signin_dark_normal_web.png">
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Now, run the laravel 11 application using the following code.
php artisan serve
You might also like :
- Read Also: Laravel 11 Google Recaptcha V3 Validation
- Read Also: Laravel 8 Google Bar Chart Example
- Read Also: How to Create Custom Middleware in Laravel 11
- Read Also: How To Get Current Date And Time In Node.js
