Google One Tap Popup
Google One Tap is the signature feature that makes OneTap Login unique. Unlike traditional social login that requires page redirects, One Tap displays a popup directly on your website for instant authentication.
What Is One Tap?
Google One Tap is a modern authentication method developed by Google that:
- Displays a popup in the corner of your page
- Detects if visitor is signed into Google
- Allows single-click login
- Requires no page redirects
- Keeps users on the same page
The Unique Differentiator
OneTap Login for WooCommerce is the only WordPress plugin that implements real Google One Tap. All competitors use traditional OAuth redirects, which are slower and more disruptive.
How It Works
User Experience Flow
1. User visits your site
↓
2. Plugin detects Google session
↓
3. One Tap popup appears (corner)
↓
4. User clicks their account
↓
5. Instantly logged in (same page)
Technical Flow
1. Google Identity Services (GIS) JavaScript loads
↓
2. GIS checks for active Google session
↓
3. If found, displays One Tap popup
↓
4. User clicks → JWT credential returned
↓
5. Plugin verifies credential with Google
↓
6. WordPress session created
↓
7. Page updates without redirect
One Tap vs Traditional OAuth
| Aspect | One Tap | Traditional OAuth |
|---|---|---|
| Clicks required | 1 | 4-5 |
| Page redirects | 0 | 2-3 |
| Time to login | 2-3 seconds | 15-30 seconds |
| Stays on page | Yes | No |
| User friction | Very low | High |
| Conversion impact | +30% registrations | Baseline |
One Tap Popup Appearance
The popup appears as a small card in the corner:
Popup contains:
- Google logo
- "Sign in to [Your Site]" text
- User's Google profile picture
- User's name and email
- "Continue as [Name]" button
- Close button (X)
Popup Positioning
| Context | Position |
|---|---|
| Desktop (LTR) | Top-right corner |
| Desktop (RTL) | Top-left corner |
| Mobile | Top-center |
| Custom container | Specified element |
Configuration
Enable One Tap
- Go to Settings > OneTap Login
- In One Tap Configuration section
- Check Enable One Tap
- Save Changes
Additional Options
| Option | Default | Description |
|---|---|---|
| Auto-select | Off | Auto-select if only one Google account |
| Cancel on tap outside | On | Close when clicking elsewhere |
| Prompt parent ID | (empty) | Custom container element |
Where One Tap Appears
Default Locations
| Page | Shows One Tap | Configurable |
|---|---|---|
| My Account | Yes | Always enabled |
| Checkout | Yes | PRO only |
| Cart | Yes | PRO only |
| wp-login.php | Yes | FREE |
Pages Where One Tap Doesn't Appear
- Admin pages (
/wp-admin/) - Already logged-in users
- Pages with no OneTap JavaScript
- When cookie consent not given
FedCM Support
OneTap Login supports Google's Federated Credential Management (FedCM):
What Is FedCM?
FedCM is a browser API that:
- Improves privacy for authentication
- Works when third-party cookies are blocked
- Is supported by Chrome 108+
- Will be required when Chrome removes third-party cookies
Automatic Fallback
The plugin automatically:
- Tries FedCM-based One Tap first
- Falls back to iframe-based One Tap
- Falls back to Sign-In Button if both fail
FedCM One Tap → iframe One Tap → Sign-In Button
Browser Support
| Browser | FedCM Support | One Tap Fallback |
|---|---|---|
| Chrome 108+ | Full | Yes |
| Edge 108+ | Full | Yes |
| Firefox | Not yet | iframe |
| Safari | Not yet | iframe |
Conditions for One Tap Display
The popup only appears when ALL conditions are met:
| Condition | Requirement |
|---|---|
| One Tap enabled | Setting is on |
| User not logged in | No WordPress session |
| User has Google session | Signed into Google |
| On enabled page | My Account, Checkout, etc. |
| Cookie consent given | If required by setting |
| Not in cooldown | No recent dismissals |
| HTTPS enabled | Required by Google |
| Valid Client ID | Configured in settings |
Cooldown Behavior
Google implements a cooldown when users dismiss the popup:
| Action | Cooldown Period |
|---|---|
| First dismiss | 2 hours |
| Second dismiss | 1 day |
| Third+ dismiss | 2 weeks |
| Close button click | Same as dismiss |
| Tap outside | Same as dismiss |
Resetting Cooldown
Cooldown is stored in cookies. To reset:
- Clear browser cookies
- Use incognito window
- Wait for cooldown to expire
Testing
Always use fresh incognito windows when testing One Tap to avoid cooldown issues.
Automatic Account Detection
One Tap can detect if the user's Google email matches an existing WordPress account:
New User Flow
Google email not in WordPress
↓
New account created
↓
Default role assigned
↓
User logged in
Existing User Flow
Google email found in WordPress
↓
Account linked to Google
↓
No duplicate created
↓
User logged in
Mobile Experience
On mobile devices:
Appearance
- Popup appears at top-center
- Larger touch targets
- Full-width on small screens
Interaction
- Tap to select account
- Swipe up/down to dismiss
- Optimized for touch
Performance
- Lightweight JavaScript
- Fast loading on mobile networks
- Minimal battery impact
Debugging One Tap
One Tap Not Appearing
Check these in order:
- Settings: Is One Tap enabled?
- Google session: Is user signed into Google?
- WordPress session: Is user already logged in?
- Cooldown: Has popup been dismissed recently?
- Console: Any JavaScript errors?
- Client ID: Is it valid and configured?
Console Logging
Enable debug mode to see One Tap events:
// Browser console
localStorage.setItem('onetap_debug', 'true');
Then reload the page and check console for:
- "One Tap: Checking eligibility..."
- "One Tap: Displaying popup..."
- "One Tap: Credential received..."
Common Issues
| Issue | Likely Cause | Solution |
|---|---|---|
| Never appears | Not signed into Google | Sign into Google first |
| Appears then hides | Invalid Client ID | Check credentials |
| Shows error | Domain not authorized | Add domain to Google Cloud |
| Dismissed instantly | Cooldown active | Clear cookies or wait |
Security
JWT Validation
One Tap returns a JWT (JSON Web Token) that the plugin validates:
- Signature verified against Google's public keys
- Issuer checked (
accounts.google.com) - Audience checked (your Client ID)
- Expiration checked (not expired)
- Issued-at checked (not too old)
CSRF Protection
The plugin includes CSRF protection:
- Nonce verification
- State parameter validation
- Origin checking
Data Privacy
One Tap only shares:
- Email address
- First and last name
- Profile picture URL
- Google user ID
Does NOT share:
- Password (there isn't one)
- Browser history
- Other Google data
Performance Impact
JavaScript Size
| Component | Size (gzipped) |
|---|---|
| Google GIS library | ~15 KB |
| OneTap plugin script | ~5 KB |
| Total | ~20 KB |
Loading Strategy
- Scripts load asynchronously
- No render blocking
- Lazy initialization
- Minimal main thread impact
Core Web Vitals
One Tap is optimized for:
- LCP: No impact (loads after)
- FID: Minimal (async processing)
- CLS: Zero (skeleton placeholders)
Best Practices
Do's
- Keep One Tap enabled for best UX
- Use on high-traffic pages (My Account)
- Test with incognito windows
- Monitor conversion rates
Don'ts
- Don't disable on mobile
- Don't add too many custom containers
- Don't block Google's domains
- Don't ignore console errors
Next Steps
- Sign-In Button - Fallback authentication
- Connection Test - Verify configuration
- Troubleshooting - Common problems