One Tap is the new cross-platform sign-in mechanism from Google that supports and streamlines multiple types of credentials.
You can quickly and easily manage user authentication and sign in to your website using One Tap. Users sign into a Google Account, provide their consent and securely share their profile information with your platform.
Many organisations have started using this method to increase their user retention score. After reading this blog post, you will be able to create a Google One Tap package plugin for any of your projects. Let's go!
Go to "Credentials" => Click "Create Credentials" then "OAuth Client ID".
Step 2: Fill in details
Fill in the details of your project to create Client ID for the Web Application.
IMPORTANT: Include your site's domain in the Authorized JavaScript origins box. Please note that Google One Tap can only be displayed in HTTPS domains.
When you perform local tests or development, you must add both http://localhost and http://localhost:port_number to the Authorized JavaScript origins box. In my case, I added http://localhost and http://localhost:3000.
Step 3: Get your Client ID
Yes! you have your Client ID ready to be used! Make sure to save it, we will use this Client ID on our plugin 👍
IMPORTANT: Do not share your Client Secret to anyone.
Before we write our code, I'd like setup our project with eslint, jest, and playground. Let's start with setting up our `package.json`.
Then install all the dependencies by running npm install on your terminal. Afterwards, we need to setup the Babel, ESLint and Jest config:
When it's done, you see a new `node_modules` folder and `package-lock.json`. To check if everything is OK, run these commands on your terminal without any errors:
When the setup is done, we are gonna create the `playground` for our project so we can test our plugin later on. To create a playground, follow this steps.
You can also check out this commit ...fcf76d.
Before I start writing code, it helps me tremendously to visualise what would be the best developer experience for my plugin.
In my head, I want the flow to work like:
To install, run npm install google-one-tap
Developers should be able to pass client ID, context and logged in status to determine the visibility of the GOT.
Create `onetaplogin.js` and start with install plugin. See commit ...43b6914c
Check if the pluging is executable based on the `rules`. See commit ...d5434f
Load method to check if the plugin is not yet loaded. See commit ...215e7
Load method to check if the plugin is not yet loaded. See commit ...4d88f0
Test your Google One Tap plugin on the plaground. See commit ...0a66e
Let's run npm run playground and go to localhost:8080. You should see One Tap login shows up like this:
Check your "Authorized JavaScript origins" on your Google API Console if you see this error on your browser console => [GSI_LOGGER]: The given origin is not allowed for the given client ID.