burakgur/google-one-tap

Google One Tap Login

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

google-one-tap's Issues

Dark mode support

Is this possible, switch to dark theme?

Unable to close prompt directly from the library

Hey I'm facing origin not allowed issue in next js

I have used it in nextjs this way .
const options = {
client_id: "My client id", // required
auto_select: false, // optional
cancel_on_tap_outside: false, // optional
context: "signin", // optional
};

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

is there any other solution workaround for this issue?

Unexpected token 'export'

Hi, I'm building a Next.js dan want to have the google one tap feature on my app. However after following the tutorial, it seems I've always encountered this error:

Anybody having similar issue???

Add wrapper to the iframe on mobile

Hey. First of all, thanks a lot for this little utility. Is it possible to add a wrapper div to the iframe on mobile, just like you did on desktop? It would be very helpful.

it's not working in nextjs chakraui project it's not even showing the popup

feat: add signup by using button

Is there any way to use signup-by button

Cannot read properties of undefined (reading 'accounts')

I think line 25 in the index.js should be handled properly when there is no google object is available otherwise it gives an error