Skip to content

BurakGur/google-one-tap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Google One Tap Login

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.
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);