Download the PHP package websitinu/laravel-socialite-google-one-tap without Composer

Light Package To Install Google One Tap provider for Laravel Socialite

Installation Laravel Socialite Google One Tap

Usage

Setup Google project

First you might need to create a new project at Google Cloud console, set up the OAuth consent screen and create a new OAuth Client ID. Within the Credentials menu you will find the client ID and client secret which you will need for authenticating.

Add configuration

You will need to store the client ID and client secret in your .env file and add the configuration to config/services.php. You will also need to add a redirection url which will be used for logging in and registering with Google One Tap. This package refers to a specific .env value for Google One Tap to avoid any clashes with the standard Google Socialite provider.

Add provider event listener

Configure the package's listener to listen for SocialiteWasCalled events. Add the event to your listen[] array in app/Providers/EventServiceProvider. See the Base Installation Guide for detailed instructions.

# For example in Laravel 11+

In app/providers/AppServiceProvider.php.

# For example in Laravel 10 or below

In app/providers/AppServiceProvider.php.

Usage front-end

Google One Tap requires a specific implementation both in the front-end as the back-end.

Front-end

On every page where you want to use Google One Tap, you will need to include the following script in the header of your html templates. ++

The actual Google One Tap prompt can be initiated with either javascript or html. The following code handles the response server side in html. It does not matter where you place this code. You can also append data-client_id and data-login_uri to any existing html element. Check references for more settings and variations such as a full javascript implementation.

And Styling this element won't have any effect since Google One tap is migrating to FedCM which means the prompt will be handled by the browser itself if the browser supports it.

For signing out you should add a g_id_signout class to your sign-out button to avoid a redirection loop because of data-auto_select in the previous snippet.

Google One Tap has a cooldown period when a user closes the Google One Tap prompt. The more often a user closes the prompt, the longer it will take for the prompt to be able to reappear to the user. Therefore, you need to include a sign-in button for a fallback to a Google Sign-In prompt. You will likely only want to include this button on login and register pages. Only the data-type field is required.

Back-end

Google One Tap is build on top of OAuth, but works different with an authenticating JTW token instead of with access tokens and refresh tokens. The redirect() and refreshToken() method won't be used in this context and will throw a Error as a reminder.

Your controller won't need to redirect the user and instead of resolving the user, you can immediately resolve the token.

This method will return the payload of the JWT token or throw an Error if the provided token was invalid.

Payload array

connect the payload

With the payload containing the email you can now handle the user flow after the user finished interacting with the Google One Tap prompt. This usually involves either registering the user if the Email isn't present in your database or logging in the user if you have a user registered with this Email.

References

• https://developers.google.com/identity/gsi/web/guides/overview
• https://developers.google.com/identity/gsi/web/reference/html-reference
• https://developers.google.com/identity/gsi/web/reference/js-reference
• https://github.com/googleapis/google-api-php-client
• https://googleapis.github.io/google-api-php-client/main/

License

This package is licensed under the MIT License (MIT). See the LICENSE for more details.