In this guide, you'll learn how to set up the Google One-tap login feature in your store.

Google One-tap authenticates users through a pop-up, creating a streamlined login experience. With this feature, a small pop-up is displayed, allowing returning users to sign in with a single click.

1. In the Google Developers Console, go to the Google OAuth 2.0 configuration page.
2. Add all store domains to the Authorized domains list. Learn more in Google's guide Authorized Domains.

Include both the website domain and the {{accountName}}.myvtex.com domain. The restricted .myvtex.com domain may be used for testing purposes.

For more details on how to set up the Google OAuth app, refer to Google's documentation: Configure your OAuth Consent Screen and Setting up OAuth 2.0.

1. In the VTEX Admin, go to Storefront > Site Editor.

2. In the side menu, click the Login block. A new section for Google One-tap will be displayed.

3. Check the Enable Google One-tap sign up toggle to enable the feature in your store's Site Editor.

4. Configure the following settings:

   • Google One-tap alignment: Choose which side of the page the pop-up appears on. Possible values: Right or Left.
   • Google One-tap top margin: Set the top margin for the pop-up. This field accepts standard CSS top values (for example: 10px, 4rem).

5. Click Save.

   

After following these steps, the Google One-tap feature will be active, and the pop-up will appear for signed-out users browsing your store.

Google One-tap flow is implemented by the vtex.login app. The process is described below:

1. vtex.login checks if the user is logged in. The One-tap flow only starts for logged-out users.

2. vtex.login calls the VTEX ID API to get the store's OAuth clientId.

3. vtex.login triggers the One-tap pop-up.

4. The user clicks the Continue as button.

5. Google checks the user's identity and returns a JSON Web Token (JWT) to vtex.login.

6. vtex.login POSTs a form containing the JWT and redirects the user to an endpoint at the VTEX ID API.

7. The API validates the JWT and redirects the user back to the website.