Google One Tap Login

Demo (Nextjs): https://google-one-tap-taupe.vercel.app

Sign up users with a single tap and keep them signed in automatically.

Install

npm install google-one-tap --save

How to use

React

import googleOneTap from 'google-one-tap';

const options = {
	client_id: '___CLIENT_ID___', // required
	auto_select: false, // optional
	cancel_on_tap_outside: false, // optional
	context: 'signin', // optional
};

googleOneTap(options, (response) => {
	// Send response to server
	console.log(response);
});

Vue

import googleOneTap from 'google-one-tap';
export default {
	mounted() {
		const options = {
			client_id: '___CLIENT_ID___', // required
			auto_select: false, // optional
			cancel_on_tap_outside: false, // optional
			context: 'signin', // optional
		};
		googleOneTap(options, (response) => {
			// Send response to server
			console.log(response);
		});
	},
};

Options

| Name | Type | Required | Description | | --------------------- | ------- | :------: | :----------------------------------------------------------------------------------: | | client_id | String | true | Your application's client ID | | auto_select | Boolean | false | Enables automatic selection. | null | | cancel_on_tap_outside | Boolean | false | Cancels the prompt if the user clicks outside the prompt. | | context | String | false | The title in the One Tap prompt. Allowed parameters: "signin", "signup", "use" | | login_uri | URL | false | The URL of your login endpoint. The Sign In With Google button redirect UX mode uses this attribute. | | prompt_parent_id | String | false | The DOM ID of the One Tap prompt container element | | nonce | String | false | A random string for ID tokens | | state_cookie_domain | String | false | If you need to call One Tap in the parent domain and its subdomains, pass the parent domain to this field so that a single shared cookie is used. | | ux_mode | String | false | The Sign In With Google button UX flow Allowed parameters: "redirect", "popup" | | allowed_parent_origin | String-Array | false | The origins that are allowed to embed the intermediate iframe. One Tap will run in the intermediate iframe mode if this field presents. | | itp_support | Boolean | false | Enables upgraded One Tap UX on ITP browsers. |

Server

Using one of the Google API Client Libraries (e.g. Java, Node.js, PHP, Python) is the recommended way to validate Google ID tokens in a production environment.

npm install google-auth-library --save

Node.js

const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client(CLIENT_ID);
async function verify() {
	const ticket = await client.verifyIdToken({
		idToken: token,
		audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend
		// Or, if multiple clients access the backend:
		//[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3]
	});
	const payload = ticket.getPayload();
	const userid = payload['sub'];
	// If request specified a G Suite domain:
	// const domain = payload['hd'];
}
verify().catch(console.error);