Centralizing User Integrations: Adding Google OAuth to Landing

Our landing project recently focused on enhancing user experience by providing more robust third-party integration options directly within their settings. The goal was to expand beyond existing integrations like LinkedIn and introduce Google OAuth, all while creating a unified management dashboard.

The Challenge

As applications grow, so does the demand for seamless connections with other services. Users expect to easily link their accounts, whether for identity, data exchange, or enhanced functionality. Our landing application already supported LinkedIn, but the integration management was scattered. The challenge was twofold: implement Google OAuth from scratch and consolidate all external service connections into a single, intuitive 'Integrations' hub.

Implementation Details

The integration involved several key steps. First, the User model was extended to store Google-specific credentials like google_id, google_token, google_refresh_token, and an expiration timestamp. A new database migration was crafted to accommodate these fields. For the user interface, a dedicated ConnectGoogleWidget was developed, likely using Livewire, to handle the OAuth flow and display connection status. The biggest architectural change was the creation of a new 'Integrations' page within the application settings. This page became the central point for managing both new Google connections and existing LinkedIn connections, which were migrated from the main dashboard. This centralization simplifies the user journey and improves maintainability.

Code Example

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    protected $fillable = [
        'name',
        'email',
        'password',
        'google_id',
        'google_token',
        'google_refresh_token',
        'google_token_expires_at',
        // Existing LinkedIn fields would also be here
    ];

    protected $hidden = [
        'password',
        'remember_token',
        'google_token', // Hide sensitive tokens
        'google_refresh_token',
        'linkedin_token',
    ];

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

    public function hasGoogleAccountConnected(): bool
    {
        return !empty($this->google_id) && !empty($this->google_token);
    }
}

This simplified User model demonstrates the added fields required to store Google OAuth credentials securely. The hasGoogleAccountConnected method is a simple helper to check the connection status, which can be used in UI components or business logic.

The Outcome

By implementing Google OAuth and consolidating all external service integrations into a single 'Integrations' page, the landing application now offers a more streamlined and intuitive experience for users. They can easily manage their connected third-party accounts, enhancing both functionality and transparency. This approach also lays a solid foundation for adding future integrations without cluttering existing dashboards.

The Lesson

When adding new third-party integrations, prioritize a centralized management approach from the outset. Design your data models to accommodate new credentials gracefully, and create a single, dedicated user interface for managing all external connections. This not only improves user experience but also simplifies future development and maintenance.