Introduction

Google One-Tap for web & mobile. The closest thing to no password yet.

Prerequisites:

For using the plugin you'll need to get the API credentials with Google . Create your development account at : https://console.developers.google.com

How to setup

I. Setting up the Google developer side

Access “API & Services”

Go to the “Credentials” tab and create an OAuth Client ID.

In “OAuth 2.0 Client IDs” list click to your created OAuth ID’s name. Add your redirect URls in the same fields.

5. Past the Authorized Javascript origins URIs (your domain) (e.g. https://domain.com) 6. Copy Client ID and which will be pasted in plugins settings field, ClientID.

☝

Note: Remember to save all you settings in Google Console

II. Setting up the plugin on the Bubble side

7. When you've got your clientID from Developer Account, place it in plugin settings fields as shown:

8. Next place the Plugin element on in the Design Tab in bubble editor:

9. Use the element proprieties to create your logic.

10. Done!

Plugin Element Proprieties

The plugin contains Google One Tap element that should be used on the page in order to set up the authentication process.

Proprieties fields:

Request "one tap" on page load (checkbox): If checkbox is checked the sign-in prompt will be displayed on page load.

Enable autoselect (checkbox): If checkbox is checked it will enable automatic selection of an account. Note: Only for one logged in the browser account.

Context (dropdown): You can choose one of three contexts for the One Tap prompt header: signin: "Sign in with Google.", signup: "Sign up with Google.", use: "Use with Google." Note: More info on context propriety check https://developers.google.com/identity/one-tap/web/guides/change-sign-in-context

The DOM ID (string): The DOM ID of the container (use only Group visual element!) element. If not set, the One Tap prompt will be displayed at the top right corner of the window.

Element Actions

One Tap Action Google One tap - this action is used to request one tap signin.

Proprieties:

- Enable autoselect - If checkbox is checked it will enable automatic selection of an account, if there is only one - Context - You can choose one of three contexts for the One Tap prompt header: signin: "Sign in with Google.", signup: "Sign up with Google.", use: "Use with Google." - The DOM ID - The DOM ID of the container (use only Group visual element!) element. If not set, the One Tap prompt will be displayed at the top right corner of the window.

2. One Tap Validate token - this action is used to validate user token and retrieve user email / name.

Proprieties:

(param.) id_token - parameter value obtained from google one tap's element state