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

A lightweight package to integrate Google One Tap with Laravel Socialite.

Installation

To install this package, run the following composer command:

Configuration

Step 1: Create a Google Project

1.Go to the Google Cloud console.

2.If you haven't already, create a new project by clicking on Select a Project in the top header and then New Project. Follow the steps to create a project.

3.Once your project is created, you'll need to set up OAuth consent screen and OAuth 2.0 credentials.

For Use Google One Tap

1. Set up Google OAuth credentials:

   • In your Google Cloud Console, go to the Credentials tab on the left sidebar.
   • Click on Create Credentials and choose OAuth Client ID.

   1.1 Configure the OAuth consent screen:

   • Fill out the necessary fields like App name, User support email, etc.
   • For Scopes, you can keep the default or add specific scopes if needed.

   1.2 Under Application type, select Web application.

   1.3 In the Authorized JavaScript origins, add the URLs where your app will be hosted (e.g., http://localhost for local development).

Authorized JavaScript origins exampls for local development

For use with requests from a browser on local host

you can reaplace it just with your real domain .

1.4 In the Authorized redirect URIs, add the URL that your app will redirect to after the user logs in. For example, /google-one-tap (this is set in your .env file).

Authorized redirect URIs

For use with requests from a web server

or you can reaplace with your own route address

3. Get the credentials: After configuring OAuth credentials, you will receive a Client ID and Client Secret. Add these credentials to your .env file as follows:

For Users Who Want to Use Google One Tap with Regular Google Login

If you want to integrate Google One Tap alongside the traditional Google login, you'll need to follow these additional steps:

1. Set up Google OAuth credentials for regular Google login:

   • In the same Credentials tab, create another OAuth Client ID for regular Google login:

   1.1 Configure the OAuth consent screen:

   • Fill out the necessary fields like App name, User support email, etc.
   • For Scopes, you can keep the default or add specific scopes if needed.

   1.2 Under Application type, select Web application.

   1.3 In the Authorized JavaScript origins, nothing to add and leave empty.

   1.4 In the Authorized redirect URIs, Follow the same steps as for Google One Tap but configure the Authorized redirect URIs differently. For Google login, this URI is typically something like http://localhost:8000/auth/google/callback

Authorized redirect URIs

For use with requests from a web server

you can reaplace with your own route address

3. Add credentials to .env file: In addition to the credentials for Google One Tap, add the credentials for the regular Google login:

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 and 12

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 any page where you wish to use Google One Tap, you need to add the following script to the header of your HTML templates.

The Google One Tap prompt itself can be triggered using either JavaScript or HTML. The following code processes the response server-side in HTML. It doesn't matter where you place this code, and you can also append data-client_id and data-login_uri to any existing HTML element. For more settings and variations, such as a complete JavaScript implementation, check the references.

Styling this element won't affect the appearance, as Google One Tap is transitioning to FedCM, meaning the prompt will be handled by the browser if it supports it.

To sign out, add a g_id_signout class to your sign-out button to prevent a redirection loop due to data-auto_select in the previous code.

Google One Tap has a cooldown period after a user dismisses the prompt. The more frequently a user closes the prompt, the longer it will take for the prompt to reappear. Therefore, include a sign-in button as a fallback to trigger the Google Sign-In prompt. Typically, you'll want to add this button on login and registration pages. The Only required field is data-type.

Back-end

Google One Tap is built on top of OAuth, but it operates differently by using an authenticating JWT token instead of access and refresh tokens. The redirect() and refreshToken() methods will not be utilized in this context and will throw an Error as a reminder.

Your controller will not need to redirect the user, and instead of resolving the user, you can immediately resolve the token.

This function will either return the decoded payload of the JWT token or throw an Error if the token provided is invalid.

Payload Structure

Handling the Payload

Once you retrieve the payload, which includes the user's email, you can determine the next steps in the authentication process. If the email is already in your database, proceed with logging the user in. Otherwise, you may need to register a new user using the provided details.

OR if you want use with any provider

sample of buttons

References

• Google Identity Services Overview
• Google Identity HTML Reference
• Google Identity JavaScript Reference
• Google API PHP Client
• Google API PHP Client Docs
• Laravel Socialite Documentation
• Google OAuth 2.0 for Web

License

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