{"id":530,"date":"2025-08-24T16:59:13","date_gmt":"2025-08-24T16:59:13","guid":{"rendered":"https:\/\/designekta.com\/knowledge-base\/?p=530"},"modified":"2025-08-24T17:12:34","modified_gmt":"2025-08-24T17:12:34","slug":"laravel-12-google-login-with-socialite-step-by-step-tutorial","status":"publish","type":"post","link":"https:\/\/designekta.com\/knowledge-base\/laravel-12-google-login-with-socialite-step-by-step-tutorial\/","title":{"rendered":"Laravel 12 Google Login with Socialite: Step-by-Step Tutorial"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Before we dive in, make sure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A Laravel 12 project set up.<\/li>\n\n\n\n<li>A Google Developer account (required for OAuth credentials).<\/li>\n\n\n\n<li>Composer and npm installed.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Install Laravel 12 Application<\/h2>\n\n\n\n<p>Let\u2019s start by setting up a fresh Laravel 12 project if you haven\u2019t already:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer create-project laravel\/laravel laravel-12-example\n<\/code><\/pre>\n\n\n\n<p>Navigate to your project directory:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd laravel-12-example\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Install Laravel UI<\/h2>\n\n\n\n<p>To create a login and registration system, we\u2019ll use Laravel UI for Bootstrap authentication scaffolding. Run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer require laravel\/ui\n<\/code><\/pre>\n\n\n\n<p>Install the Bootstrap auth scaffolding:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan ui bootstrap --auth\n<\/code><\/pre>\n\n\n\n<p>Install npm dependencies and build assets:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install\nnpm run build\n<\/code><\/pre>\n\n\n\n<p><strong>Note<\/strong>: If you\u2019re using Jetstream or Breeze, you can skip this step and adapt the routes\/views accordingly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Install Socialite<\/h2>\n\n\n\n<p>Next, install the Laravel Socialite package to handle Google OAuth:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer require laravel\/socialite\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 4: Create a Google App<\/h2>\n\n\n\n<p>To enable Google login, you need OAuth credentials from the Google Developer Console.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <a href=\"https:\/\/console.developers.google.com\/\">Google Developer Console<\/a>.<\/li>\n\n\n\n<li>Create a new project (e.g., \u201cLaravel Google Login\u201d).<\/li>\n\n\n\n<li>Navigate to <strong>APIs &amp; Services<\/strong> > <strong>Credentials<\/strong> > <strong>Create Credentials<\/strong> > <strong>OAuth Client ID<\/strong>.<\/li>\n\n\n\n<li>Select <strong>Web Application<\/strong> as the application type.<\/li>\n\n\n\n<li>Add your app\u2019s redirect URI (e.g., <code>http:\/\/localhost:8000\/auth\/google\/callback<\/code>) under <strong>Authorized redirect URIs<\/strong>.<\/li>\n\n\n\n<li>Save and note down the <strong>Client ID<\/strong> and <strong>Client Secret<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"857\" height=\"297\" src=\"https:\/\/designekta.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/google_create_credentials-1.png\" alt=\"\" class=\"wp-image-534\" srcset=\"https:\/\/designekta.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/google_create_credentials-1.png 857w, https:\/\/designekta.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/google_create_credentials-1-300x104.png 300w, https:\/\/designekta.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/google_create_credentials-1-768x266.png 768w\" sizes=\"auto, (max-width: 857px) 100vw, 857px\" \/><\/figure>\n\n\n\n<p>Setup your URIs and Redirects<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"857\" height=\"297\" src=\"https:\/\/designekta.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/google_create_credentials-1.png\" alt=\"\" class=\"wp-image-534\" srcset=\"https:\/\/designekta.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/google_create_credentials-1.png 857w, https:\/\/designekta.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/google_create_credentials-1-300x104.png 300w, https:\/\/designekta.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/google_create_credentials-1-768x266.png 768w\" sizes=\"auto, (max-width: 857px) 100vw, 857px\" \/><\/figure>\n\n\n\n<p>Configure the credentials in your Laravel app:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Update config\/services.php<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nreturn &#91;\n    \/\/ Other services...\n    'google' =&gt; &#91;\n        'client_id' =&gt; env('GOOGLE_CLIENT_ID'),\n        'client_secret' =&gt; env('GOOGLE_CLIENT_SECRET'),\n        'redirect' =&gt; env('GOOGLE_REDIRECT'),\n    ],\n];\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Update env<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>GOOGLE_CLIENT_ID=your-client-id\nGOOGLE_CLIENT_SECRET=your-client-secret\nGOOGLE_REDIRECT=http:\/\/localhost:8000\/auth\/google\/callback\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Add <code>google_id<\/code> Column to Users Table<\/h2>\n\n\n\n<p>To store the Google user ID, add a <code>google_id<\/code> column to the <code>users<\/code> table.<\/p>\n\n\n\n<p>Create a migration:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:migration add_google_id_to_users_table\n<\/code><\/pre>\n\n\n\n<p>Update the migration file in <code>database\/migrations<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nreturn new class extends Migration\n{\n    public function up(): void\n    {\n        Schema::table('users', function (Blueprint $table) {\n            $table-&gt;string('google_id')-&gt;nullable();\n        });\n    }\n\n    public function down(): void\n    {\n        Schema::table('users', function (Blueprint $table) {\n            $table-&gt;dropColumn('google_id');\n        });\n    }\n};\n<\/code><\/pre>\n\n\n\n<p>Run the migration:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan migrate\n\n\n<\/code><\/pre>\n\n\n\n<p>Update the <code>User<\/code> model (<code>app\/Models\/User.php<\/code>) to make <code>google_id<\/code> fillable:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Foundation\\Auth\\User as Authenticatable;\nuse Illuminate\\Notifications\\Notifiable;\n\nclass User extends Authenticatable\n{\n    use HasFactory, Notifiable;\n\n    protected $fillable = &#91;\n        'name',\n        'email',\n        'password',\n        'google_id',\n    ];\n\n    protected $hidden = &#91;\n        'password',\n        'remember_token',\n    ];\n\n    protected function casts(): array\n    {\n        return &#91;\n            'email_verified_at' =&gt; 'datetime',\n            'password' =&gt; 'hashed',\n        ];\n    }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Define Routes<\/h2>\n\n\n\n<p>Add routes for redirecting to Google and handling the callback. Open <code>routes\/web.php<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nuse Illuminate\\Support\\Facades\\Route;\nuse App\\Http\\Controllers\\GoogleController;\n\nRoute::get('\/', function () {\n    return view('welcome');\n});\n\nAuth::routes();\n\nRoute::get('\/home', &#91;App\\Http\\Controllers\\HomeController::class, 'index'])-&gt;name('home');\n\nRoute::controller(GoogleController::class)-&gt;group(function () {\n    Route::get('auth\/google', 'redirectToGoogle')-&gt;name('auth.google');\n    Route::get('auth\/google\/callback', 'handleGoogleCallback');\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 7: Create the Google Controller<\/h2>\n\n\n\n<p>Create a controller to handle Google authentication:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:controller GoogleController\n<\/code><\/pre>\n\n\n\n<p>Update <code>app\/Http\/Controllers\/GoogleController.php<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\nuse Laravel\\Socialite\\Facades\\Socialite;\nuse Exception;\nuse App\\Models\\User;\nuse Illuminate\\Support\\Facades\\Auth;\n\nclass GoogleController extends Controller\n{\n    public function redirectToGoogle()\n    {\n        return Socialite::driver('google')-&gt;redirect();\n    }\n\n    public function handleGoogleCallback()\n    {\n        try {\n            $googleUser = Socialite::driver('google')-&gt;user();\n            $findUser = User::where('google_id', $googleUser-&gt;id)-&gt;first();\n\n            if ($findUser) {\n                Auth::login($findUser);\n                return redirect()-&gt;intended('home');\n            }\n\n            $newUser = User::updateOrCreate(\n                &#91;'email' =&gt; $googleUser-&gt;email],\n                &#91;\n                    'name' =&gt; $googleUser-&gt;name,\n                    'google_id' =&gt; $googleUser-&gt;id,\n                    'password' =&gt; bcrypt('random' . rand(100000, 999999)),\n                ]\n            );\n\n            Auth::login($newUser);\n            return redirect()-&gt;intended('home');\n        } catch (Exception $e) {\n            return redirect('\/login')-&gt;with('error', 'Google login failed. Please try again.');\n        }\n    }\n}\n<\/code><\/pre>\n\n\n\n<p><strong>Explanation<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>redirectToGoogle<\/code>: Redirects the user to Google\u2019s OAuth login page.<\/li>\n\n\n\n<li><code>handleGoogleCallback<\/code>: Retrieves the Google user, checks if they exist in the database, and either logs them in or creates a new user.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Update the Login Blade File<\/h2>\n\n\n\n<p>Add a \u201cLogin with Google\u201d button to the login page. Update <code>resources\/views\/auth\/login.blade.php<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@extends('layouts.app')\n\n@section('content')\n&lt;div class=\"container\"&gt;\n    &lt;div class=\"row justify-content-center\"&gt;\n        &lt;div class=\"col-md-8\"&gt;\n            &lt;div class=\"card\"&gt;\n                &lt;div class=\"card-header\"&gt;{{ __('Login') }}&lt;\/div&gt;\n\n                &lt;div class=\"card-body\"&gt;\n                    @if (session('error'))\n                        &lt;div class=\"alert alert-danger\"&gt;\n                            {{ session('error') }}\n                        &lt;\/div&gt;\n                    @endif\n\n                    &lt;form method=\"POST\" action=\"{{ route('login') }}\"&gt;\n                        @csrf\n\n                        &lt;div class=\"row mb-3\"&gt;\n                            &lt;label for=\"email\" class=\"col-md-4 col-form-label text-md-end\"&gt;{{ __('Email Address') }}&lt;\/label&gt;\n                            &lt;div class=\"col-md-6\"&gt;\n                                &lt;input id=\"email\" type=\"email\" class=\"form-control @error('email') is-invalid @enderror\" name=\"email\" value=\"{{ old('email') }}\" required autocomplete=\"email\" autofocus&gt;\n                                @error('email')\n                                    &lt;span class=\"invalid-feedback\" role=\"alert\"&gt;\n                                        &lt;strong&gt;{{ $message }}&lt;\/strong&gt;\n                                    &lt;\/span&gt;\n                                @enderror\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"row mb-3\"&gt;\n                            &lt;label for=\"password\" class=\"col-md-4 col-form-label text-md-end\"&gt;{{ __('Password') }}&lt;\/label&gt;\n                            &lt;div class=\"col-md-6\"&gt;\n                                &lt;input id=\"password Competence and Performance** type=\"password\" class=\"form-control @error('password') is-invalid @enderror\" name=\"password\" required autocomplete=\"current-password\"&gt;\n                                @error('password')\n                                    &lt;span class=\"invalid-feedback\" role=\"alert\"&gt;\n                                        &lt;strong&gt;{{ $message }}&lt;\/strong&gt;\n                                    &lt;\/span&gt;\n                                @enderror\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"row mb-3\"&gt;\n                            &lt;div class=\"col-md-6 offset-md-4\"&gt;\n                                &lt;div class=\"form-check\"&gt;\n                                    &lt;input class=\"form-check-input\" type=\"checkbox\" name=\"remember\" id=\"remember\" {{ old('remember') ? 'checked' : '' }}&gt;\n                                    &lt;label class=\"form-check-label\" for=\"remember\"&gt;\n                                        {{ __('Remember Me') }}\n                                    &lt;\/label&gt;\n                                &lt;\/div&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"row mb-0\"&gt;\n                            &lt;div class=\"col-md-8 offset-md-4\"&gt;\n                                &lt;button type=\"submit\" class=\"btn btn-primary\"&gt;\n                                    {{ __('Login') }}\n                                &lt;\/button&gt;\n                                @if (Route::has('password.request'))\n                                    &lt;a class=\"btn btn-link\" href=\"{{ route('password.request') }}\"&gt;\n                                        {{ __('Forgot Your Password?') }}\n                                    &lt;\/a&gt;\n                                @endif\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"row mb-0 mt-3\"&gt;\n                            &lt;div class=\"col-md-8 offset-md-4\"&gt;\n                                &lt;a href=\"{{ route('auth.google') }}\" class=\"btn btn-light border\"&gt;\n                                    &lt;img src=\"https:\/\/developers.google.com\/identity\/images\/btn_google_signin_dark_normal_web.png\" alt=\"Login with Google\" style=\"height: 40px;\"&gt;\n                                &lt;\/a&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    &lt;\/form&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n@endsection\n<\/code><\/pre>\n\n\n\n<p><strong>Explanation<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adds a Google login button using Google\u2019s official sign-in image.<\/li>\n\n\n\n<li>Displays an error message if the Google login fails.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Step 9: Run the Laravel Application<\/h2>\n\n\n\n<p>Start your Laravel server:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan serve\n<\/code><\/pre>\n\n\n\n<p>Visit <code>http:\/\/localhost:8000\/login<\/code> in your browser. You\u2019ll see the login form with a \u201cLogin with Google\u201d button. Click it, sign in with your Google account, and you\u2019ll be redirected to the <code>\/home<\/code> page if successful.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Adding Google login to your Laravel 12 app with Socialite is easier than it seems! In this tutorial, I showed you how to set up Socialite, configure Google OAuth, and create a smooth login experience. This feature saves users from remembering passwords and makes your app more accessible. Whether you\u2019re building a blog, e-commerce site, or any web app, social logins like this one can boost user engagement. I hope you found this guide helpful\u2014now go ahead and add Google login to your project!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To create a login and registration system, we\u2019ll use Laravel UI for Bootstrap authentication scaffolding.<\/p>\n","protected":false},"author":1,"featured_media":541,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tutorials"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/comments?post=530"}],"version-history":[{"count":1,"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/530\/revisions"}],"predecessor-version":[{"id":535,"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/530\/revisions\/535"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/media\/541"}],"wp:attachment":[{"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/categories?post=530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designekta.com\/knowledge-base\/wp-json\/wp\/v2\/tags?post=530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}