Google - v1.0.0
Livewire Component
The <livewire:google-connection-manager /> component is auto-registered when livewire/livewire ^3.6 is installed. It renders server-side, so it works in any Blade view without touching a bundler.
Requirements
livewire/livewire ^3.6installed and running.
If Livewire isn't installed, GoogleServiceProvider::registerLivewireComponents() returns without registering — the base package boots cleanly and the JSON status endpoint still works for the React and Vue surfaces.
Basic usage
<livewire:google-connection-manager />
The component reads the current auth user, builds a ConnectionState, and renders google::livewire.connection-manager.
Behavior
- Not authenticated — the component still renders, but shows the disconnected state. Wrap it in an
@authblock if you don't want that. - Disconnected — shows a "Connect Google" link that points at
route('google.auth.connect'). - Connected — shows "Connected as {email}", a POST-form Disconnect button, and (when
needsReauthorize) a Reauthorize link + count of missing scopes. - Details — a collapsible
<details>block lists granted or required scopes depending on state.
Refresh after connect / disconnect
Because the connect flow redirects away to Google and back, the browser navigation resets the whole page — the component re-renders with fresh state on its own.
For same-page updates (e.g., disconnect via AJAX), dispatch the google-connection-updated event and the component will re-render:
<script>
Livewire.dispatch('google-connection-updated');
</script>
The component listens for it via protected $listeners = [ 'google-connection-updated' => '$refresh' ].
Customizing the view
Publish the view and edit resources/views/vendor/google/livewire/connection-manager.blade.php:
php artisan vendor:publish --tag=google-views
Laravel's view resolver prefers the published copy over the package copy, so your edits win.
Alternatively, override the view registration entirely from your service provider:
$this->loadViewsFrom( resource_path( 'views/my-google-views' ), 'google' );
Using ArtisanPack UI components inside
The default view uses vanilla HTML + Tailwind so the package doesn't hard-depend on livewire-ui-components. If your app is already on that package, publish and rewrite the view with ArtisanPack UI components:
@if( $state->isConnected )
<x-artisanpack-alert type="info">
{{ __( 'Connected as :email', [ 'email' => $state->email ] ) }}
</x-artisanpack-alert>
@if( $state->needsReauthorize )
<x-artisanpack-alert type="warning">
<a href="{{ route('google.auth.reauthorize') }}">{{ __( 'Reauthorize' ) }}</a>
</x-artisanpack-alert>
@endif
<form method="POST" action="{{ route('google.auth.disconnect') }}">
@csrf
<x-artisanpack-button type="submit" color="error">
{{ __( 'Disconnect' ) }}
</x-artisanpack-button>
</form>
@else
<x-artisanpack-button :href="route('google.auth.connect')" color="primary">
{{ __( 'Connect Google' ) }}
</x-artisanpack-button>
@endif
The class
ArtisanPackUI\Google\Livewire\ConnectionManager:
class ConnectionManager extends Component
{
protected $listeners = [ 'google-connection-updated' => '$refresh' ];
public function render(): View
{
$user = auth()->user();
$state = ConnectionState::forUser(
$user?->getAuthIdentifier(),
app( ScopeRegistry::class ),
);
return view( 'google::livewire.connection-manager', [
'state' => $state,
] );
}
}
Deliberately minimal — every rule about what to show lives in ConnectionState so the Livewire, React, and Vue surfaces can't drift.
Testing
use ArtisanPackUI\Google\Livewire\ConnectionManager;
use Livewire\Livewire;
Livewire::actingAs( $user )
->test( ConnectionManager::class )
->assertSee( 'Connect Google' );
For the connected state, seed a GoogleConnection for $user first:
GoogleConnection::factory()->for( $user )->create( [
'email' => 'you@example.com',
'scopes' => [ 'openid', 'https://www.googleapis.com/auth/userinfo.email' ],
] );
Livewire::actingAs( $user )
->test( ConnectionManager::class )
->assertSee( 'Connected as' )
->assertSee( 'you@example.com' );