Angular Google One Tap

Minimal, dependency-free Google One Tap sign-in component for Angular applications.

Designed for startups, SaaS products, and production systems that need fast, secure Google authentication with minimal setup and maximum conversion.

✔ Automatically loads Google Identity Services
✔ Works with Angular 15+, standalone components, Vite, Nx
✔ No extra SDKs, no UI rendering
✔ Backend-agnostic (works with any stack)
✔ Lightweight, auditable, and secure

Production Note (Important)

Note: Google One Tap was tested and confirmed to work in production environments.
It may not function correctly in local development environments, depending on HTTPS availability, browser privacy settings, and Google account state.

This is a Google platform constraint, not a library issue.

Repository

Source code and issues are available on GitHub:

🔗 https://github.com/danny7777777268/angular-google-one-tap

Why Angular Google One Tap

Modern Angular applications need frictionless authentication.

Google One Tap significantly improves sign-in conversion, especially for:

• mobile users
• returning users
• password-fatigued users

This package focuses on:

• Performance — zero unnecessary dependencies
• Security — Google ID tokens are never stored on the client
• Simplicity — one component, minimal configuration
• Control — backend verification is fully under your control

Ideal for:

• SaaS platforms
• AI & fintech startups
• Marketplaces
• Consumer applications
• Enterprise dashboards

Installation

Using npm:

npm install angular-google-one-tap

Using yarn:

yarn add angular-google-one-tap


---

✅ Recommended (README / docs)

Note: In our case, Google One Tap was tested and confirmed to work in production environments. It may not function correctly in local development environments, depending on browser settings, HTTPS requirements, and Google account state.

----

Angular Usage Example
Template

<google-one-tap
  [clientId]="clientId"
  authUrl="https://test.com:3030/api/auth/google"
  (signedIn)="onSignedIn($event)"
  (error)="onError($event)"
></google-one-tap>



Standalone Component Setup (Angular 15+)

import { Component } from "@angular/core";
import { GoogleOneTapComponent } from "angular-google-one-tap";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [GoogleOneTapComponent],
  templateUrl: "./app.component.html"
})
export class AppComponent {
  clientId =
    "YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com";

  onSignedIn(data: any) {
    console.log("User:", data.user);
  }

  onError(err: Error) {
    console.error("One Tap error:", err);
  }
}


✅ Fully compatible with Angular standalone components
✅ No NgModule required

Component Inputs & Outputs

| Name                 | Type                  | Required | Description                                  |
| -------------------- | --------------------- | -------- | -------------------------------------------- |
| `clientId`           | `string`              | ✅        | Google OAuth Web Client ID                   |
| `authUrl`            | `string`              | ✅        | Backend endpoint to verify Google ID token   |
| `signedIn`           | `EventEmitter<any>`   | ❌        | Emits user data on successful authentication |
| `error`              | `EventEmitter<Error>` | ❌        | Emits authentication errors                  |
| `headers`            | `object`              | ❌        | Custom headers for auth request              |
| `autoSelect`         | `boolean`             | ❌        | Automatically sign in returning users        |
| `cancelOnTapOutside` | `boolean`             | ❌        | Prevent dismissal on outside click           |



Backend Example (Node.js / Express)

Use this example to securely verify Google ID tokens on your server.

const { OAuth2Client } = require("google-auth-library");

const googleClient = new OAuth2Client(process.env.GOOGLE_CLIENT_ID);

app.post("/api/auth/google", async (req, res) => {
  try {
    const { credential } = req.body;
    if (!credential) {
      return res.status(400).json({ error: "Missing credential" });
    }

    const ticket = await googleClient.verifyIdToken({
      idToken: credential,
      audience: process.env.GOOGLE_CLIENT_ID
    });

    const payload = ticket.getPayload();
    if (!payload) {
      return res.status(401).json({ error: "Invalid token payload" });
    }

    const user = {
      googleId: payload.sub,
      email: payload.email,
      name: payload.name,
      picture: payload.picture,
      emailVerified: payload.email_verified
    };

    // TODO: find-or-create user in your database
    // Create your own session or JWT here

    return res.json({ ok: true, user });
  } catch (err) {
    console.error(err);
    return res.status(401).json({ error: "Token verification failed" });
  }
});


Security Model

This package follows OAuth best practices:

❌ No tokens stored in localStorage
❌ No tokens stored in sessionStorage
✅ Google ID token sent directly to backend
✅ Full control over verification, sessions, cookies, and user lifecycle

Perfect for fintech, SaaS, and enterprise-grade systems.

Performance Notes

Google script loads only once

No re-renders

No layout shifts

No UI blocking

Zero runtime dependencies

Angular Framework Notes

Fully compatible with Angular Strict Mode

Safe change detection

No Zone.js hacks

Client-side rendering friendly

CORS (Common Issue & How to Fix It)

Google One Tap itself does not cause CORS issues.
CORS errors occur when your frontend sends the Google ID token to your backend.

Recommended Backend CORS Setup


import cors from "cors";

app.use(cors({
  origin: [
    "http://localhost:4200",
    "https://yourfrontend.com"
  ],
  methods: ["GET", "POST"],
  credentials: true
}));


⚠️ If credentials: true is enabled, you cannot use origin: "*".
Browsers will block the request.

SEO Keywords

angular google one tap
google one tap angular
google sign in angular
google oauth angular
angular authentication
oauth login angular
google identity services
angular auth component

Sponsor

This project is sponsored and maintained by Stockbase.

🔗 https://stockbase.pro

Stockbase builds next-generation game-based, financial, and AI-driven platforms, focused on speed, security, and exceptional user experience.

License

MIT