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